Eighth: HTML5 in the canvas to achieve small ball hit the game

Source: http://download.csdn.net/detail/liumingm900913/7469969 Game development process: 1. Create a canvas:Place the canvas in the div tag, which controls where the canvas is centered, and then add some styling to the DIV tag, such as border and Border-radius, so that it looks like a mobile phone for viewing.

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

2. Create a small moving block of wood:Defines a small block that can be used for movement, which includes attributes such as the following, coordinates, the length and width of the small squares, and the distance of each move.

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 a little square, including properties such as the following, the coordinates of the ball, the radius, the speed of the x-axis and the y-axis. The speed of the x-axis and y-axis is the direction of the movement and the coordinate values after the movement for the ball.

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

var diamond_impact = [];//defines the array that stores the hit small squares diamond_impact.length = 0;var Width_span = 25; Random two small squares horizontal interval var Height_span = 25;//Random two small squares of horizontal interval for (var i =1; i <=10; i++) {//control small squares for each line output  (var j = 1; J < ; 10; J + +) {//output each column of small squares  has only the x-axis and the y-axis coordinates are different.    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 box is placed in the Diamond_impact, has been used later  }  Height_span + =;  Width_span = 25;}

5. How to move small blocks:

Moving the implementation of the small box, the first need to listen to get keyboard events, and then based on the keyboard events obtained to separate processing to move in that direction, where I have defined four directions, in order to just move around may not completely eliminate the small square,

during the move, it is also inferred to move the position of the small square to prevent it from being out of bounds. Here I have defined four methods to handle movement in all directions.                          ,         &NB Sp                          ,         &NB Sp                          ,         &NB Sp                          ,         &NB Sp                          ,         &NB Sp                          ,         &NB Sp  

Keyboard event, get current in that direction motion var direction = "";d Ocument.onkeydown = function (e) {  if (E.keycode = = PNS) Direction = "Left"; 
   if (E.keycode = =) Direction = "right";  if (E.keycode = =) Direction = "Up";  if (E.keycode = =) Direction = "Down";}

Define four methods to redraw the position of the block  respectively have left, right, upper, lower function Move_right_diamond () {  clear_diamond ();//Clear the previous block  Init_canvas_ Background ();//Initialize the canvas again below  //Once again draw the position of the small square  if (diamond.x + diamond.width >= canvas.width) {// Infer if the block has reached the right-most    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 remaining methods are similar  

6, the method of writing small ball movement and the way of hitting the wall and touching the moving little square bounce:

Bounce: The bounce of a small square, mainly changing the speed of its x-axis and y-axis direction, because we define uniform motion, so we just need to change the direction of its speed.

Move: Calculates the new spherical coordinates based on the velocity of the ball and the specified size of the movement, and then draws a new ball.

Bounce Image Example: (Not much for touch wall bounce)

The code to move the ball:

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 small square, the way to disappear:Hit: The ball hit the Xiao Fang box, the main inference ball and small square coordinate position can be. Note that the y-axis and x-axis are respectively inferred to limit the small square of the ball's hit to an area.Hours: After hitting the current small square to change its length width, and then redraw the small square, because the current small square is 0, that is, the small square after the plot is not.Plot the coordinate changes of the hit:8. The method to infer the failure and success of the tour:Failure: is to drop the ball to the lowest end that the y-coordinate of the ball is greater than the canvas's Y coordinate is the failure;Success: The count infers whether the number of small squares to be wiped 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 Jas Black";  Cxt.filltext ("failure! ", 30,250);  Diamond.move = 0;//cannot move the plate}

Infer if it is equal to the total number of small squares if (count_sum = =) {  Cxt.fillstyle = "#FCF205";  Cxt.font = "Bold 50px Microsoft Jas Black";  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;}

9. Display Effect: