[原] html5 canvas 贪吃蛇小游戏~~

自己写的贪吃蛇小游戏用canvas做的，没有引用excanvas.js所以不支持ie ~ 还有同时按多个方向键会有bug， 喜欢的复值 code拿去玩吧~

算法上也可以用 正则 判断数组是否有重复，不一定要用循环，性能上会更好 ：）

 代码

<! Doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"  lang ="gb2312" >
< head >
< title >  - S n a k e -  </ title >
< meta  http-equiv ="content-type"  content ="text/html; charset=gb2312"   />
< meta  name ="author"  content ="Aissa"   />
< meta  name ="keywords"  content =""   />
< meta  name ="description"  content =""   />
< style  type ="text/css" >
    body { background-color : #000 ;  text-align : center ; }
    canvas { margin : 100px ;  border : solid 1px #ccc ; }
</ style >
</ head >
< body >
     < input  id ="btn"  type ="button"  value ="start!!"   />
     < canvas  id ="cvSnake"  width ="400"  height ="300" ></ canvas >
</ body >
< script  type ="text/javascript" >
     var  Aissa  =  {}, cv, ctx, point  =  [[ 31 ,  1 ], [ 21 ,  1 ], [ 11 ,  1 ], [ 1 ,  1 ]], mx  =   4 , direction  =   2 , eX  =   0 , eY  =   0 , sil;

     function  drawPoint(x, y, c) {
        ctx.fillStyle  =  c;
        ctx.fillRect(x, y,  9 ,  9 );
    }

     function  changeEggXY(w, h) {
         var  count  =   0 ;

         do  {
            count  =   0 ;
            eX  =  Math.floor(Math.random()  *  ((w  -   10 )  /   10 ))  *   10   +   1 ;
            eY  =  Math.floor(Math.random()  *  ((h  -   10 )  /   10 ))  *   10   +   1 ;

             for  ( var  i  =   0 , len  =  point.length; i  <  len; i ++ ) {
                 if  (point[i][ 0 ]  ==  eX  &&  point[i][ 1 ]  ==  eY) {
                    count  =   1 ;
                     break ;
                }
            }
        }  while  (count  ==   1 )
    }

     function  setEgg() {
        drawPoint(eX, eY,  ' #f70 ' );
    }
    
    Aissa.Game  =  {};

    Aissa.Game.Snake  =   function  (cvId) {
         this .init(cvId);
    }

    Aissa.Game.Snake.prototype  =  {
        init:  function  (cvId) {
             var  t  =   this ;
            cv  =  document.getElementById(cvId);
             if  ( ! cv)  return ;
            ctx  =  cv.getContext( ' 2d ' );

             /*  set egg xy  */
            changeEggXY(cv.width, cv.height);

             /*  set snake  */
             for  ( var  i  =   0 , len  =  point.length; i  <  len; i ++ ) {
                drawPoint(point[i][ 0 ], point[i][ 1 ],  ' #fff ' );
            }

            t.changeDirection();

            sil  =  setInterval(t.loop,  100 );
        },
        loop:  function  () {
             var  t  =   this , newXY  =  [], x  =  point[ 0 ][ 0 ], y  =  point[ 0 ][ 1 ], i, len;

            ctx.clearRect( 0 ,  0 , cv.width, cv.height);

             switch  (direction) {
                 case   1 :
                    newXY  =  [x, y  -=   10 ];
                     break ;
                 case   2 :
                    newXY  =  [x  +=   10 , y];
                     break ;
                 case   3 :
                    newXY  =  [x, y  +=   10 ];
                     break ;
                 case   4 :
                    newXY  =  [x  -=   10 , y];
                     break ;
            }

            point.reverse();
            point.push(newXY);
            point.reverse();
            point.length  =  mx;

             for  (i  =   0 , len  =  point.length; i  <  len; i ++ ) {
                drawPoint(point[i][ 0 ], point[i][ 1 ],  ' #fff ' );
            }

             /*  die  */
             var  count  =   0 ;
             for  (i  =   1 ; i  <  len; i ++ ) {
                 if  (point[ 0 ][ 0 ]  ==  point[i][ 0 ]  &&  point[ 0 ][ 1 ]  ==  point[i][ 1 ]) {
                    count  =   1 ;
                     // break;
                }
            }
             if  (count  ==   1   ||  point[ 0 ][ 0 ]  <   0   ||  point[ 0 ][ 0 ]  >  cv.width  ||  point[ 0 ][ 1 ]  <   0   ||  point[ 0 ][ 1 ]  >  cv.height) {
                alert( ' die ' );
                location.reload();
            }

             /*  eat  */
             if  (point[ 0 ][ 0 ]  ==  eX  &&  point[ 0 ][ 1 ]  ==  eY) {
                mx  +=   1 ;
                changeEggXY(cv.width, cv.height);
            }

            setEgg();
        },
        changeDirection:  function  () {
             var  t  =   this ;
            window.onkeydown  =   function  (e) {
                 //  left: 37 4  up: 38 1  right: 39 2  down: 40 3
                 switch  (e.keyCode) {
                     case   38 :
                         if  (direction  ==   3 )  return ;
                        direction  =   1 ;
                         break ;
                     case   39 :
                         if  (direction  ==   4 )  return ;
                        direction  =   2 ;
                         break ;
                     case   40 :
                         if  (direction  ==   1 )  return ;
                        direction  =   3 ;
                         break ;
                     case   37 :
                         if  (direction  ==   2 )  return ;
                        direction  =   4 ;
                         break ;
                     default :
                         return ;
                }
            }
        }
    }
    document.getElementById( ' btn ' ).onclick = function (){
         new  Aissa.Game.Snake( ' cvSnake ' );
        document.getElementById( ' btn ' ).disabled  =   true ;
    }
</ script >
</ html >

 

转载于:https://www.cnblogs.com/aissa/archive/2010/02/03/1662555.html