HTML5 Doudou game development practice (1) Draw the game protagonist using Canvas, html5canvas

HTML5 Doudou game development practice (1) Draw the game protagonist using Canvas, html5canvas

Recently, when I was studying HTML5, Einstein once said, "The best way to learn is to go through your own experience ". So I want to make a simple game while learning HTML5, which will be interesting to learn, what I want to do is a classic game on the Overlord that I used to play when I was a child. It's called "eating beans". The monsters are running behind it. It's fun and cool, I believe everyone has played.

Eat beans:

I just used some simple HTML5 knowledge I learned to simulate this game. I don't plan to use images for this game. I use canvas to draw all the images. This is interesting.

As you can see, the main character of our game is the Yellow mouth in the figure. Although there is only one mouth, It is cool. Simple is beautiful.

First, we need to use Canvas to draw it,

After analysis, it is quite simple:

Set the open mouth angle to 90 °. Then, perform the Cartesian coordinate system and divide the angle equally. The two sides are all 45 °. Then, use cos or sin to obtain the coordinates of A and B.

Draw 3/4 circles first, and connect them to two lines.

The following code is used:

// Function drawBall_RightOrLeft (ball, isRight) {// document. write (state); // draw eyes, eyes are public // draw eyes-Outer Ring var eyeX; if (isRight = true) // right eyeX = ball. x-5; else eyeX = ball. x + 5; // left var eyeY = ball. y-8; var eyeR = 6; // currently limited to dead this cxt. beginPath (); cxt. fillStyle = "#000000"; cxt. arc (eyeX, eyeY, eyeR, 0, Math. PI * 2, false); cxt. fill (); cxt. closePath (); // draw eyes-eye var qiuR = eyeR/2; cxt. beginPath (); cxt. fillStyle = "# FF0000"; cxt. arc (eyeX, eyeY, qiuR, 0, Math. PI * 2, false); cxt. fill (); cxt. closePath (); switch (state) {// mouth case 1: // draw a red ball cxt. beginPath (); cxt. fillStyle = "# FF0000"; // The mouth size is 90 ° // draw an arc -- face if (isRight) cxt. arc (ball. x, ball. y, radius, 1/4 * Math. PI, 3/2 * Math. PI + 1/4 * Math. PI, false); else cxt. arc (ball. x, ball. y, radius, 3/4 * Math. PI, Math. PI + 1/4 * Math. PI, true); cxt. stroke (); cxt. closePath (); cxt. beginPath (); // draw mouth var ax = 0, ay = 0; var bx = 0, by = 0; var temp = radius * Math. sqrt (2)/2; if (isRight) ax = ball. x + temp; else ax = ball. x-temp; ay = ball. y-temp; bx = ax; by = ball. y + temp; cxt. moveTo (ball. x, ball. y); cxt. lineTo (ax, ay); cxt. moveTo (ball. x, ball. y); cxt. lineTo (bx, by); cxt. closePath (); cxt. stroke (); state = 0; break; // shut up case 0: // draw an arc -- face cxt. beginPath (); cxt. arc (ball. x, ball. y, radius, 0, Math. PI * 2, false); cxt. stroke (); cxt. closePath (); // cxt from the center of the circle to the end of the mouth. beginPath (); cxt. moveTo (ball. x, ball. y); if (isRight) cxt. lineTo (ball. x + radius, ball. y); else cxt. lineTo (ball. x-radius, ball. y); cxt. stroke (); cxt. closePath (); state = 1; break; default: break ;}}

:

If you are not clear about Canvas, read the previous article.

This topic will be updated continuously until the game is developed. You are welcome to exchange ideas and comments. Thank you!