JavaScript HTML5 Canvas to achieve _javascript skills in bricks-and-play games

This example is written in a small game based on the canvas in HTML5. The game is mainly a small ball bounce hit Xiaofang block. The main implementation of the code in the small box generation, keyboard key event monitoring, the movement of the ball and the rebound after the wall and how to eliminate small squares and other methods. The code uses a JS script library

Game development process:

1. Create Canvas:

Place the canvas in the div tag so you can control where the canvas is centered, and then add some styles such as border and Border-radius to the DIV tag, making it look like a mobile phone for viewing.

<div id= "main" >
 <!--embed the canvas inside a div block so that it can be centered-->
 <canvas id= "Liuming_canvas" width= "300px" height= "500px" >
 </canvas>
</div>

2. Create moving small pieces of wood:

Defines a small square that can be used to move a small square that contains the following attributes, the coordinates, the length of the small square, and the distance each movement of the small square.

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

3. Create a ball for hitting:

Defines a small ball that is used to move and hit the little square, which contains the following properties, the coordinates of the ball, the radius, the velocity at the x and y axes. The velocity of the x and Y axes is the direction of movement and the coordinate value of the movement after the ball is computed.

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 the ball to hit, the formation of the ball is mainly based on the size of the canvas and small squares of the coordinates and the length of each small square and the x-axis and y-axis spacing.

var diamond_impact = [];//defines the array that stores the hit small squares
diamond_impact.length = 0;
var width_span = 25; The transverse interval of any two small squares 
var height_span =;  The horizontal interval for any two small squares for 
(var i =1 i <=10 i++) {//control the small squares for each row output
 (var j = 1; J < + j) {//output small squares for each column only the x and y axes coordinates It's not the same.
  var Diamond_impact_children = {
   X:width_span,
   Y:height_span,
   width:10,
   height:10
   
    };
  Width_span + +;
  Diamond_impact.push (Diamond_impact_children); The resulting small squares are placed in the diamond_impact and are later used
 }
 Height_span + +;
 Width_span = +;
}

   

5, write move the small square Move method:

Move the implementation of the small square, the first need to listen to get the keyboard events, and then according to the keyboard event to be processed separately to move in that direction, where I defined four different directions, in order to only move around may not completely eliminate the small squares,
In the process of moving also to determine the location of moving small squares to prevent whether it is out of bounds. Here I have defined four methods to handle movement in all directions.

Keyboard event to get current in that direction of the motion

var direction = "";
Document.onkeydown = function (e) {
 if (E.keycode = =) Direction = "Left";
 if (E.keycode = =) Direction = "right";
 if (E.keycode = =) Direction = "Up";
 if (E.keycode = =) Direction = "Down";
}
 
The four methods to redraw the squares are left, right, top, lower

function Move_right_diamond () {
 clear_diamond (), and/or clear the previous squares
 Init_canvas_ Background ()//re-initialize the canvas below
 //redraw the position of the small squares
 if (diamond.x + diamond.width >= canvas.width) {//Judge whether the box has reached the right end
  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);
 }
The rest of the methods are similar 

6, the preparation of the method of small ball movement as well as the wall and contact mobile block rebound method:

Bounce: Small square bounce, mainly change the speed of its x and Y axes, because we define uniform motion, so we just need to change the direction of its speed.
Move: The new ball coordinates are computed according to the speed of the ball and the specified moving size, and then a new ball is drawn.
Bounce Picture Example: (For touching a wall bounce similar, don't say much)

Small ball Movement Code:

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;//Change the position of its coordinates
BALL_IMPACT.Y + = Ball_impact.vy * cyc/1000;

7, small ball hit the small square, the way the little square disappears:

Strike: Ball hit Xiaofang box, the main judge of small ball and the coordinates of the square can be. Note that the y-axis and the x-axis will be judged separately to limit the small squares of the ball's strike to one area.
Hours: After hitting the current small box to change its long width, then redraw the small box, because the current small square of the long width of 0, that is, after the small box is not drawn.
Diagram of the coordinates of the hit change:

8. The method to judge the failure and success of tour:

Failure: the ball to the lowest end of the ball is the y-coordinate larger than the canvas's y-coordinate is failure;
Success: Counts whether the number of small squares that are eliminated is the same as the number of small squares specified.

if (Ball_impact.y + BALL_IMPACT.R >= canvas.height) {
 Cxt.fillstyle = "#FC0000";
 Cxt.font = "bold 50px Microsoft Ya Hei";
 Cxt.filltext ("failure! ", 30,250);
 Diamond.move = 0;//cannot move plate
}

//Judge whether with all the small squares number equal
if (count_sum = =) {
 Cxt.fillstyle = "#FCF205";
 Cxt.font = "bold 50px Microsoft Ya Hei";
 Cxt.filltext ("success! ", 20,250);//write on canvas success 
 Diamond.move = 0;//cannot move plate
 BALL_IMPACT.VX =0;
 Ball_impact.vy =0;
else{
 count_sum = 0;
}

The above is the entire content of this article, I hope to help you learn.