HTML5 eat Beans Game development Combat (a) using canvas to draw the game lead

Recently in learning HTML5, Einstein once said, "the best learning is to go through it yourself." So, I want to learn HTML5 at the same time, do a simple small game, so that learning will be very interesting, I want to do is playing in the former little overlord above the very classic of a game, called "Eat Peas", behind the monster followed run, pretty fun, but also very abusive heart, I believe we all play.

This is the way to eat peas:

I'll just use some of the HTML5 's simple knowledge to emulate the game. I do this game is not intended to use pictures, all with canvas to draw, so it is interesting, hey.

As you can see, the protagonist of our game is the yellow mouth of the picture, although only a mouth, or relatively cool, simple is the United States, hey.

First step, we're going to use canvas to draw it out,

Analysis, the drawing is quite simple:

Set the open mouth angle of 90°, and then do a Cartesian coordinate system, split the angle between the two sides is 45°, and then with cos or sin can find a A, b coordinate, hey.

First draw 3/4 Circle, in the even two lines, can.

Here's the code:

Right/left Look 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 limits the death of 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 red ball cxt.beginpath ();                Cxt.fillstyle= "#FF0000"; Mouth size for 90°//draw arc--face if (isright) Cxt.arc (BALL.X,BALL.Y,RADIUS,1/4 * math.pi,3/                    2 * Math.PI + quarter * math.pi,false);else Cxt.arc (BALL.X,BALL.Y,RADIUS,3/4 * math.pi, Math.PI + quarter * 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 Arc--face Cxt.beginpath ();                Cxt.arc (BALL.X,BALL.Y,RADIUS,0,MATH.PI * 2,false); Cxt.stroke ();                Cxt.closepath ();                From the center to the end of the mouth of the line Cxt.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; }    }

：

Not clear to the canvas classmate, you can look at my previous article ha.

The topic will be updated continuously until the game is made, welcome to exchange, Welcome to comment, thank you!

HTML5 eat Beans Game development Combat (a) using canvas to draw the game lead