HTML5吃豆豆遊戲開發實戰（一）使用Canvas繪製遊戲主角，html5canvas

HTML5吃豆豆遊戲開發實戰（一）使用Canvas繪製遊戲主角，html5canvas

       最近在學習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);                    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();                //畫嘴巴                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;            //閉嘴            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);                    else                    cxt.lineTo(ball.x - radius,ball.y);                cxt.stroke();                cxt.closePath();                state = 1;                break;            default :                break;        }    }

：

       

對Canvas不清楚的同學，可以看看我前面的文章哈。

本專題將會持續更新，直到遊戲做出來，歡迎交流，歡迎評論，謝謝！