Javascript HTML5 canvas implements brick-hitting games and html5 brick-hitting games

Javascript HTML5 canvas implements brick-hitting games and html5 brick-hitting games

This example shows a small game, based on the canvas in HTML5. The game is mainly used to bounce a small ball and hit a small square. In the code, we mainly implement the generation of small blocks, the listening of keyboard key events, the bounce of ball movement and hitting the wall, and how to eliminate small blocks. The Code uses a js script library.

Game Development Process:

1. Create a canvas:

Place the canvas inside the div label to control the center position of the canvas, and add some styles such as border and border-radius to the div label so that it looks like a mobile phone and is helpful for watching.

<Div id = "main"> <! -- Embed the canvas in the div block, so that it can be centered --> <canvas id = "liuming_canvas" width = "300px" height = "500px"> </canvas> </div>

2. Create a moving block:

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

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

3. Create a ball for hitting:

Define a small ball for moving and hitting small blocks. The ball contains the following attributes: the Coordinate Position, radius, and speed on the X and Y axes of the ball. The speed of the X and Y axes is the moving direction of the ball and the coordinate value after the movement.

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

4. generate a series of small blocks:

A series of small blocks are generated to be hit by the ball. The ball is generated mainly based on the size of the canvas, the coordinates and the length and width of the small blocks, and the gap between the X and Y axes of each small block.

Var diamond_impact = []; // defines the array diamond_impact.length = 0; var width_span = 25; // The horizontal interval between any two small blocks var height_span = 25; // horizontal interval of any two small squares for (var I = 1; I <= 10; I ++) {// control the small squares output by each row for (var j = 1; j <10; j ++) {// only the coordinates of the x and y axes in each column are output. var diamond_impact_children = {x: width_span, y: height_span, width: 10, height: 10}; width_span + = 30; diamond_impact.push (diamond_impact_children); // place the small block in diamond_impact, which has been used in the future} height_span + = 25; width_span = 25 ;}

5. Compile the method for moving small squares:

To move a small square, you need to first listen to the keyboard events, and then process them in the same direction based on the obtained Keyboard Events. Here, I have defined four directions respectively, the purpose is to move the block only between the left and right sides, which may not completely eliminate the small block,
In the process of moving, you also need to determine the position of the small block to prevent it from going out of bounds. Here, I have defined four methods to process the movement in all directions.

// Keyboard event to obtain the current direction of motion 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";} // defines four methods to re-draw the left, right, top, and bottom function move_right_diamond () {clear_diamond (); // clear the previous square init_canvas_background (); // re-initialize the canvas. // re-draw the position of the small square if (diamond. x + diamond. width> = canvas. width) {// determine whether the cube has reached the rightmost 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) ;}} // other methods are similar

6. Compile the ball moving method and the method of hitting the wall and moving the small block bounce:

Rebound: the rebound of small blocks mainly changes the speed of the X axis and Y axis. Because we define a uniform motion, we only need to change the speed direction.
Move: Calculate the coordinates of the new ball based on the speed of the ball and the specified moving size, and then draw the new ball.
Bounce image example: (for a bounce similar to a wall, not to mention)

Code for moving a 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 coordinates of ball_impact.y + = ball_impact.vy * cyc/1000;

7. How to hit the small square with a ball and disappear it:

Hitting: the ball hits the small box, mainly to determine the Coordinate Position of the ball and the small square. Note that the Y axis and the X axis are determined respectively, and the small blocks hit by the ball are limited to one area.
Hour: after hitting the current small block, change its length and width, and then re-draw the small block, because the length and width of the current small block are all 0, that is, the small block after the painting is not.
Coordinate change of hitting:

8. methods to determine whether a game fails or succeeds:

Failure: If the Y coordinate of the ball falls to the bottom of the ball, that is, the Y coordinate of the ball is greater than the Y coordinate of the canvas;
Success: Count to determine whether the number of small blocks to be eliminated is the same as the number of specified 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; // The plate cannot be moved} // determine whether it is equal to the number of all small squares if (count_sum = 90) {cxt. fillStyle = "# FCF205"; cxt. font = "bold 50px "; cxt. fillText ("SUCCESS! ", 20,250); // write SUCCESS diamond. move = 0 on the canvas; // do not move the plate ball_impact.vx = 0; ball_impact.vy = 0; else {count_sum = 0 ;}

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• Snake Games Written in JS (Personal exercises)
• Javascript and HTML5 use canvas to build a card game Implementation Algorithm
• Javascript and HTML5 use canvas to build an algorithm for Web wuziqi games
• Sample Code for a non-html5 JavaScript version of the pinball game
• Use non-html5 to implement js board-to-link playback game sample code
• Javascript simulated tank war game (html5 version) with source code download
• Javascript 2048 game example
• Is node. js suitable for game Background Development?
• Native js uses html5 to create a simple dual-color sub-game
• Js + html5 implement jigsaw puzzle games that can be played on mobile phones