最近在学习HTML5，爱因斯坦曾说过，“最好的学习就是自己去经历”。于是，我想在学习HTML5的同时，做一款简单的小游戏，这样学习起来也会很有趣的，我想做的是以前小时候玩儿的小霸王上面的很经典的一款游戏，叫“吃豆豆”，后面有怪物跟着跑，蛮好玩的，还很虐心，相信大家都玩儿过。
吃豆豆就是这款啦：
我就用前面学的一些HTML5的简单的一些知识来简单模拟这款游戏吧。我做这款游戏不打算用图片，全部用canvas来画，这样才有意思，嘿嘿。
正如大家所看到的，我们游戏的主角就是图中的黄色的嘴巴，虽然只有一张嘴巴，还是比较酷的，简单就是美，嘿嘿。
首先第一步，我们要使用Canvas把它画出来，
分析一下，画出来还是挺简单的：
设张开的嘴巴角度为90°，如图，然后做直角坐标系，平分夹角，两边都是45°，然后用cos或者sin就可以求出A,B坐标，嘿嘿。
首先画3/4圆，在连两条线，即可。
下面是代码：
//往右/左的样子function drawBall_RightOrLeft(ball,isRight){//document.write(state);//画眼睛，眼睛是公共的//画眼睛-外圈var eyeX;if(isRight == true)//右eyeX = ball.x – 5;else eyeX = ball.x + 5;//左var eyeY = ball.y-8;var eyeR = 6;//目前限定死这个cxt.beginPath();cxt.fillStyle="#000000";cxt.arc(eyeX,eyeY,eyeR,0,Math.PI * 2,false);cxt.fill();cxt.closePath();//画眼睛-眼球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){//张嘴case 1://画红球cxt.beginPath();cxt.fillStyle="#FF0000";//嘴巴大小为90°//画圆弧–脸if(isRight)cxt.arc(ball.x,ball.y,radius,1/4 * Math.PI,3/2 * Math.PI + 1/4 * Math.PI,false);elsecxt.arc(ball.x,ball.y,radius,3/4 * Math.PI, Math.PI + 1/4 * Math.PI,true);cxt.stroke();cxt.closePath();cxt.beginPath();//画嘴巴var ax = 0,ay = 0;var bx = 0,by = 0;var temp = radius * Math.sqrt(2)/2;if(isRight)ax = ball.x + temp;elseax = 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;//闭嘴case 0://画圆弧–脸cxt.beginPath();cxt.arc(ball.x,ball.y,radius,0,Math.PI * 2,false);cxt.stroke();cxt.closePath();//从圆心到嘴巴末点的连线cxt.beginPath();cxt.moveTo(ball.x,ball.y);if(isRight)cxt.lineTo(ball.x + radius,ball.y);elsecxt.lineTo(ball.x – radius,ball.y);cxt.stroke();cxt.closePath();state = 1;break;default :break;}}
效果图：
对Canvas不清楚的同学，可以看看我前面的文章哈。
本专题将会持续更新，，直到游戏做出来，欢迎交流，欢迎评论，谢谢！
若不给自己设限，则人生中就没有限制你发挥的藩篱。
