贪吃蛇游戏js就可以实现

最新推荐文章于 2024-05-23 22:21:26 发布

帅锅打酱油

最新推荐文章于 2024-05-23 22:21:26 发布

阅读量182

点赞数 1

分类专栏：有关实习的东西文章标签： js实现贪吃蛇基础

有关实习的东西专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>贪吃蛇</title>
  </head>
  
  <body>
  <canvas id="myCanvas" width="400" height="400" style="border: #F00 solid 2px;"></canvas>
  <script type="text/javascript">
  var c=document.getElementById("myCanvas");//获得id
  var time=160;//蛇的速度
  var cxt=c.getContext("2d");
  var x=y=8;
  var a=0;//食物的坐标
  var t=20;//舍身长
  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>400||y>400||x<0||y<0){
          alert("你挂了，继续努力吧！失败原因：碰壁了....");
          window.location.reload();
          
          }
          for(var i=0;i<map.length;i++){
			  if(parseInt(map[i].x)==x && parseInt(map[i].y)==y){
              alert("你挂了，继续努力吧！失败原因：撞到自己了");
              window.location.reload();
              }
      }
      if(map.length>t){//保持舍身的长度
      var cl=map.shift();//删除数组第一项，并且返回原元素
      cxt.clearRect(cl['x'],cl['y'],size,size);
          };
          map.push({'x':x,'y':y});//将数组添加到原数组尾部
          cxt.fillStyle="#006699";//内部填充颜色
          cxt.strokeStyle="#006699";//边框颜色
          cxt.fillRect(x,y,size,size);//绘制矩形
          if((a*8)==x&&(a*8)==y){//吃食物
              rand_frog();t++;
              }
  document.οnkeydοwn=function(e){//改变蛇的方向
  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 rand_frog(){
      a=Math.ceil(Math.random()*50);
      cxt.fillStyle="#000000";//内部填充颜色
      cxt.strokeStyle="#000000";//边框颜色
      cxt.fillRect(a*8,a*8,8,8);//绘制矩形
      }
  //随机放置食物
           rand_frog();}
</script>
</body>
</html>