HTML5----简易贪吃蛇小游戏

话不多说直接贴上代码:

<script>
      window.onload = function(){
          //定义一些公共变量
          var gj = document.getElementById("gj");
          var p2 = gj.getContext("2d");
  
          //定义蛇的变量
          var snake = 3;
          //定义存储蛇身体的数组
          var sBody = [];
          //定义蛇的初始化位置(坐标)
          var x = y = 0;
        //定义蛇的初始化运动方向
        var direction = 39;
        //定义食物的位置
        var fx = fy =0;
  
          //绘制场景(运动场所)
          var bg = document.getElementById("bg");
          var p1 = bg.getContext("2d");
          p1.strokeStyle="#efefef"
          var bx = 0;
          var by = 0;
          for(var i = 0;i<=40;i++){
              //1.画横线
              by+=10;
              p1.moveTo(0,by)
              p1.lineTo(400,by)
              p1.stroke();
              //2.画竖线
              bx+=10;
              p1.moveTo(bx,0)
              p1.lineTo(bx,400)
              p1.stroke();
          }
          //调用函数
          putFood();
          var Run = setInterval(sankeRun,160);
          //随机放食物
          function putFood(){
              fx = Math.ceil(Math.random()*40-1)*10;
              fy = Math.ceil(Math.random()*40-1)*10;
              p2.fillStyle="#009900";
              p2.fillRect(fx,fy,10,10);
          }
        document.onkeydown = function(){
            switch(event.keyCode){
                case 37: direction = 37;break;//左
                case 38: direction = 38;break;//上
                case 39: direction = 39;break;//右
                case 40: direction = 40;break;//下
            }
        }
          //蛇运动
          function sankeRun(){
            switch(direction){
                case 37: x -= 10;break;
                case 38: y -= 10;break;
                case 39: x += 10;break;
                case 40: y += 10;break;
            }
            //调整蛇的x方向路径
            p2.fillStyle="#ffff66";
            p2.fillRect(x,y,10,10);    
            clear();
              sBody.push({'x':x , 'y':y});
              bump();
          }
        //擦除尾部
        function clear(){
            if(sBody.length>snake){
                  var wb = sBody.shift();
                  p2.clearRect(wb.x,wb.y,10,10);
              }
        }
        //碰撞检测
        function bump(){
            //撞墙
              if(x>=400 || y>=400 || x<=-1 || y<=-1){
                  alert("碰壁而死");
                clearInterval(Run);
                  x = 0;
                  y = 0;    
            }
            //撞自己
            //for(var i=0;i<=sBody.length;i++){
                //alert(sBody[i].x+"---"+sBody[i].y);
                //if(sBody[i].x == x && sBody[i].y == y){
                    //alert("自爆而亡");
                    //clearInterval(Run);
                    //x = 0;
                      //y = 0;    
                    //window.location.reload();//刷新页面
                //}
            //}
            //蛇吃食物
            if(x == fx && y == fy){
                snake += 1;
                putFood();
            }
        }
        

      }    
  </script>

效果图 如下: