javascript HTML5 canvas implements brick breaking game_javascript skills

A small game written as an example in this article, based on canvas in HTML5. The game is mainly about small balls bouncing and hitting small squares. The code mainly implements the generation of small squares, the monitoring of keyboard key events, the movement of small balls and their rebound after hitting the wall, and how to eliminate small squares. The code uses a js script library

Game development process:

1. Create canvas:

Put the canvas inside the div tag, so that you can control the center position of the canvas, and then add some styles to the div tag, such as border and border-radius, to make it look like a mobile phone, which is easier to view.

<div id="main">
 <!--将画布嵌在div块里面,使其可以居中-->
 <canvas id="liuming_canvas" width="300px" height="500px">
 </canvas>
</div>

2. Create moving wooden blocks:

Define a small square that can be moved. The moving square contains the following attributes, coordinate position, length and width of the small square and the distance of each movement of the small square.

var diamond = {
 x : 100,  
 y : 485,
 width : 100,
 height : 15,
 move : 10
}

3. Create a small ball for hitting:

Define a small ball for moving and hitting small squares. The small ball contains the following attributes, the coordinate position of the small ball, the radius, and the speed on the x-axis and y-axis. The speed of the x-axis and y-axis is to calculate the direction of movement of the ball and the coordinate value after movement.

var ball_impact = {
 x : 150,
 y : 465,
 r : 10,
 vx : 200,
 vy : 200
}

4. Generate a series of small squares:

Generate a series of small squares for being hit by small balls. The generation of small balls is mainly based on the size of the canvas, the coordinates, length and width of the small squares, and the x-axis and y-axis intervals of each small square.

var diamond_impact = [];//定义存储击打小方块的数组
diamond_impact.length = 0;
var width_span = 25; // 任意两个小方块的横向间隔 
var height_span = 25;  //任意两个小方块的水平间隔 
for(var i =1 ; i <=10 ; i++){//控制每行输出的小方块
 for(var j = 1 ; j < 10 ; j++){//输出每列的小方块 只有x轴和y轴的坐标不一样而已
  var diamond_impact_children = {
   x : width_span,
   y : height_span,
   width : 10,
   height : 10
  };
  width_span += 30;
  diamond_impact.push(diamond_impact_children); //将得到的小方块放在 diamond_impact 中，已被以后使用
 }
 height_span += 25;
 width_span = 25;
}

5. Write a method to move small squares:

To implement the movement of the small square, you first need to listen to the event of getting the keyboard, and then process it separately according to the obtained keyboard event to move in that direction. Here I have defined four directions respectively, in order to only move in the left and right directions. Movement may not completely destroy small blocks,
During the movement process, the position of the moving small block must be judged to prevent it from going out of bounds. Here I have defined four methods to handle movement in each direction.

//键盘事件，获取当前在那个方向运动

var direction = "";
document.onkeydown = function (e) {
 if (e.keyCode == 37 ) direction = "left" ;
 if (e.keyCode == 39 ) direction = "right";
 if (e.keyCode == 38 ) direction = "up";
 if (e.keyCode == 40 ) direction = "down";
}
 
//定义四个方法来重绘制方块的位置 分别有 左、右、上、下

function move_right_diamond(){
 clear_diamond();//清除以前的方块
 init_canvas_background();//再次初始化画布 下同
 //重新绘制小方块的位置
 if(diamond.x + diamond.width >= canvas.width){ //判断方块是否已经到达最右端
  cxt.fillStyle = "#17F705";
  cxt.fillRect(diamond.x,diamond.y,diamond.width,diamond.height);
 }else{
  diamond.x += diamond.move;
  cxt.fillStyle = "#17F705";
  cxt.fillRect(diamond.x,diamond.y,diamond.width,diamond.height);
 }
}
//其余方法类似 

6. Write a method for moving the ball and a method for bouncing the moving small square against a wall or in contact with it:

Rebound: The rebound of the small block mainly changes its speed in the x-axis and y-axis directions. Since we define uniform motion, we only need to change the direction of its speed.
Movement: Calculate the new ball coordinates based on the speed of the ball and the specified movement size, and then draw the new ball.
Example of rebound picture: (It’s similar to the rebound when touching the wall, so I won’t go into details)

Code for ball movement:

cxt.arc(ball_impact.x,ball_impact.y,ball_impact.r,0,Math.PI * 2,true);
cxt.closePath();
cxt.fill();
ball_impact.x += ball_impact.vx * cyc /1000;//改变其坐标的位置
ball_impact.y += ball_impact.vy * cyc /1000;

7. How to make the small square disappear when the ball hits it:

Hit: The ball hits the small box, mainly to determine the coordinate positions of the ball and the small box. Note that the y-axis and x-axis will be judged separately here to limit the small square where the ball hits to a region.
Hours: After hitting the current small square, change its length and width, and then redraw the small square. Since the length and width of the current small square are both 0, that is, there is no small square after drawing.
Illustration of the coordinate changes of the hit:

8. How to judge the failure and success of a game:

Failure: If the ball falls to the lowest point, that is, the Y coordinate of the ball is greater than the Y coordinate of the canvas, it means failure;
Success: Count to determine whether the number of small blocks destroyed is the same as the specified number of small blocks.

if(ball_impact.y + ball_impact.r >= canvas.height){
 cxt.fillStyle = "#FC0000";
 cxt.font = "bold 50px 微软雅黑";
 cxt.fillText("FAILURE！",30,250);
 diamond.move = 0;//不能移动板块
}

//判断是否与所有的小方块数相等
if(count_sum == 90){
 cxt.fillStyle = "#FCF205";
 cxt.font = "bold 50px 微软雅黑";
 cxt.fillText("SUCCESS！",20,250);//在画布上书写SUCCESS 
 diamond.move = 0;//不能移动板块
 ball_impact.vx =0;
 ball_impact.vy =0;
else{
 count_sum = 0;
}

The above is the entire content of this article, I hope it will be helpful to everyone’s study.