Canvas exercises _ Zuma game 01 and canvas exercises Zuma 01

Canvas exercises _ Zuma game 01 and canvas exercises Zuma 01

I learned a Demo of Zuma game over the past few days and recorded the compilation process of this game.

1: first, implement a simple interface effect.

2: After drawing, let the black ball move along the circular arc.

Encoding Process

Create a canvas and draw a circular arc.

First, define a Canvas tag on the Html page.

<Div> gc. beginPath (); // call the arc (x, y, r, start, stop, counterclockwise) method of the plot to create a garden // where x and y are the Center Coordinate, r is the radius, start is the start radian, // stop is the end radian, counterclockwise false shun time Bell true Back Clock default shun time clock. // Three o'clock is 0 radian, and is 1.5 radian. Gc. arc (300,200,200, 1.5 * Math. PI, 1 * Math. PI, false); // The difference between stroke () and fill () Is that fill () is a filling graph gc. stroke (); gc. closePath (); gc. beginPath (); // when it is drawn at 180 degrees, the big circle becomes a small circle. Move the circle center (250,200. Gc. arc (250,200,150, 1. * Math. PI, 2 * Math. PI, false); gc. stroke (); gc. closePath (); gc. beginPath (); // draw a small circle at the end with a radius of 20. gc. arc (400,200, * Math. PI, 2 * Math. PI); gc. stroke (); gc. closePath ();

2: create a dynamic ball. Since there will be multiple target balls, you need to define an array.

Var ball = []; ball [0] = {x: 300, // draw the center point of the ball x coordinate y: 0, // draw the center point y coordinate r: 200, // draw the ball's radius angle: 0, // the angle from which the ball starts to turn from 0 degrees firstx: 300, // the starting point of the ball x coordinate firsty: 200 // y coordinate of the starting point of the ball };

3: Let the created ball move. The created ball moves and re-draws the ball by changing the center coordinate of the ball.

Change the circle center coordinates of the ball, and obtain the result by adding angle values.

// Create a timer to change the coordinates of the center of the ball every 30 seconds setInterval (function () {for (var I = 0; I <ball. length; I ++) {ball [I]. angle ++; // The x coordinate of the new ball is equal to or equal to the x coordinate of the original starting point plus the x axis component of the angle after the ball turns. Ball [I]. x = ball [I]. firstx + Math. sin (ball [I]. angle * Math. PI/180) * ball [I]. r; // The y coordinate of the new ball is equal to or equal to the y coordinate of the original starting point minus the y axis of the angle after the ball turns. Ball [I]. y = ball [I]. firsty-Math.cos (ball [I]. angle * Math. PI/180) * ball [I]. r ;}}, 30 );}

4: After dynamically changing the coordinates of the center of the ball, add the ball to the canvas and move the ball.

The ball can be moved. In fact, you can clean the canvas every several seconds and re-draw the canvas to achieve the dynamic effect.

Call: clearRect (X, y, width, height) Method to clear the canvas with the coordinates starting from (x, y.

// Clear the canvas
Gc. clearRect (0, 0, context. width, context. height );
// Add the ball
For (var I = 0; I <ball. length; I ++) {gc. beginPath (); gc. moveTo (ball [I]. x, ball [I]. y); // draw the gc of the target ball. arc (ball [I]. x, ball [I]. y, 20, 0 * Math. PI, 2 * Math. PI); gc. fillStyle = "black"; gc. fill (); gc. closePath ();}

5: converts radians and degrees.

For most functions in the canvas, degrees must be converted to radians Based on radians. To convert degrees, you only need to multiply the degrees by 0.017453293 (2PI/360) to radians.

That is Math. PI/180.

To be continued.