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

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

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


 ExpandedBlockStart.gif代码

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

你可能感兴趣的:([原] html5 canvas 贪吃蛇小游戏~~)