html5-canvas（简单贪吃蛇）

    
   
   
    
    <script src="../js/jquery-1.11.3.js"></script>


    
   
   
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var time = 160 ; //蛇的速度
    var cxt=c.getContext("2d");
    var x = y = 8;
    var a = 0; //食物坐标
    var t = 2; //蛇身长
    var map = []; //记录蛇运行路径
    var size = 8; //蛇身单元大小
    var direction = 2; // 1 向上 2 向右 0 左 3下
    interval = window.setInterval(set_game_speed, time); // 移动蛇
    function set_game_speed(){ // 移动蛇
        switch(direction){
            case 1:y = y-size;
                break;
            case 2:x = x+size;
                break;
            case 0:x = x-size;
                break;
            case 3:y = y+size;
                break;
        }
        if(x>600 || y>500 || x<0 || y<0){
            alert("你碰壁啦#29.....");
            window.location.reload();}
        for(var i=0;i
   
   
    
    t) { //保持蛇身长度
            var cl = map.shift(); //删除数组第一项，并且返回原元素
            cxt.clearRect(cl['x'], cl['y'], size, size);
        }
        map.push({'x':x,'y':y}); //将数据添加到原数组尾部
        cxt.fillStyle = ranColor();//内部填充颜色
        cxt.strokeStyle = "purple";//边框颜色
        cxt.fillRect(x, y, size, size);//绘制矩形
        if((a*8)==x && (a*8)==y){ //吃食物
            food();t++;
        }
    }
         function ranColor(){
             var a = "#";
             var t = "";
             for(var i =0 ;i<6;i++){
                 t+=parseInt(Math.random()*16).toString(16);//由一行一个数字变成字符串：一行六个字；
             }
             a+=t;//让#跟字符串连接起来;
             return a;
         }
    document.onkeydown = function(e) { //改变蛇方向
        //alert(e.keyCode);
        if(e.keyCode==32){//空格
            clearInterval(interval);
        }else if(e.keyCode==70){//F键
            interval = window.setInterval(set_game_speed, time);
        }
        var code = e.keyCode - 37;
        switch(code){
            case 1 : direction = 1;break;//上
            case 2 : direction = 2;break;//右
            case 3 : direction = 3;break;//下
            case 0 : direction = 0;break;//左
        }
    };
    // 随机放置食物
    function food(){
        a = Math.ceil(Math.random()*50);
        cxt.fillStyle = ranColor();//内部填充颜色
        cxt.strokeStyle = "#000000";//边框颜色
        cxt.fillRect(a*8, a*8, 8, 8);//绘制矩形
    }
    // 随机放置食物
    food();
</script>


   
   

闲来无事，捣鼓一个小东西玩……突然想到了canvas，然后就来了条蛇玩= =……
可见我是得有多怕技术丢掉= =。下面步入正题。写的太粗糙，各位大神不喜勿喷= =，欢迎各路大神技术交流。