html5-canvas（多模式彩色贪吃蛇）

    
   
   
    
    


    
   
   
    
   
   

    
   
   

        
    
    简单中等困难
        
    
    
    
   
   
    <script>
        var d1 = document.getElementById("d1");
        var s1 = document.getElementById("s1");
        var c = document.getElementById("mycanvas");
        var context = c.getContext("2d");
        var a = 10,b=10;
        var n = 5;
        var m = 10;
        var key = 2;
        var map = [];
        var shiwu = [];
        var su = 300;
        var t;
        function star(bt){
            if(bt.value=="开始"){
                switch (parseInt(s1.value)){
                    case 1:
                        su = 300;
                        sw(parseInt(s1.value));
                        break;
                    case 2:
                        su = 200;
                        sw(parseInt(s1.value));
                        break;
                    case 3:
                        su = 100;
                        sw(parseInt(s1.value));
                        break;
                }
                t = setInterval(hs,su);
                bt.value="暂停";
            }else{
                clearInterval(t);
                bt.value="开始";
            }

        }
        document.οnkeydοwn= function (e) {
            var code = e.keyCode-37;
            switch (code){
                case 1:
                    key=1;
                    break;
                case 2:
                    key=2;
                    break;
                case 3:
                    key=3;
                    break;
                case 0:
                    key=0;
                    break;
            }
        };
        function sw(a){
            for(var i=0;i
   
   
    
    490||b>490||a<0||b<0){
                alert("你碰壁啦#29.....");
                window.location.reload();
            }
            d1.innerHTML = "当前长度:"+n+"
    
    
当前坐标X:"+a/10+"
    
    
当前坐标Y:"+b/10;
            switch(key){
                case 0:
                    a-=m;
                    break;
                case 1:
                    b-=m;
                    break;
                case 2:
                    a+=m;
                    break;
                case 3:
                    b+=m;
                    break;
            }

            for(var i=0;i
    
    
     
     n){
                var c1=map.shift();
                context.clearRect(c1['a'],c1['b'],m,m);
            }
            for(var i=0;i
     
     
      
      
       
        
       
      
      
     
     
    
    
   
   

抱歉，这么久没更新。最近公司项目紧，没顾上捣鼓这个……被ng搞的头大= =……这个是分三种模式的彩色贪吃蛇……ps：如果有ng大神无意路过看到的话- -希望留个脚步，一起研究ng。