你的位置:首页 > Java教程

[Java教程]canvas游戏之贪食蛇

直接上效果图:

这个贪食蛇关键地方在于数组,它的长度增加其实是数组的增长,就是数组的向前追加等操作,核心就是数组的操作。

 

完整代码:

<!DOCTYPE html><html>  <body>    <canvas id="myCanvas" width="240" height="240" >      Your browser does not support the HTML5 canvas tag.    </canvas>    <script>    //r数组表示蛇 ; co表示蛇前进的方向,默认向下 ; e表示食物var ctx = document.getElementById("myCanvas").getContext("2d"),  r = [{    x: 10,    y: 9  }, {    x: 10,    y: 8  }],  co = 40,  e = null;  /*为了避免按键太快,使定时器没有反应过来,出现bug*/  var offOn=true;  /*这是关卡的开关*/  var offOn01=true;  /*关卡倒计开始值*/  var num=3;//循环,间隔为200毫秒var timer=setInterval(doMove, 200);function doMove() {  //给蛇加上阴影效果  ctx.shadowBlur = 20, ctx.shadowColor = "black";  //游戏是否已经结束  if (check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24) return;  //如果有食物,则根据蛇前进的方向判断是否吃到了食物,并且将蛇数组中最后一个元素换到首部  e != null && ((co == 40 && r[0].x == e.x && r[0].y + 1 == e.y) ||     (co == 38 && r[0].x == e.x && r[0].y - 1 == e.y) ||     (co == 37 && r[0].x - 1 == e.x && r[0].y == e.y) ||     (co == 39 && r[0].x + 1 == e.x && r[0].y == e.y)) ?   (r.unshift(e), e = null, r.unshift(r.pop())) : (r.unshift(r.pop()));  //根据方向,重新设定蛇数组首元素的坐标,从而进行移动  (co == 40 || co == 38) ? (r[0].x = r[1].x, r[0].y = r[1].y + (co == 40 ? 1 : -1)) : (r[0].x = r[1].x + (co == 39 ? 1 : -1), r[0].y = r[1].y);  //清空屏幕  ctx.clearRect(0, 0, 240, 240);  //如果有食物,则绘制食物  if (e) ctx.fillRect(e.x * 10, e.y * 10, 10, 10);  //绘制蛇  for (var i = 0; i < r.length; i++) ctx.fillRect(r[i].x * 10, r[i].y * 10, 10, 10);  //如果没有食物,则在随机位置上加入一粒食物  while (e == null || check(e)) e = {    y: (Math.floor(Math.random() * 24)),    x: (Math.floor(Math.random() * 24))  };  /*分数*/  ctx.shadowBlur=0;  ctx.font="12px Arial";  ctx.fillText("分数:"+(r.length - 2),10,10);  ctx.textBaseline="top";  //判断游戏是否结束  if (check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)     alert("game over\n你获得:" + (r.length - 2) + "分");    /*设置一个关卡,就是分数到10分后进入下一关,只设置一个关卡*/  if((r.length-2)==10){  if(offOn01){    clearInterval(timer);    offOn01=false;    var timer0=setInterval(function(){      if(num<=0){        clearInterval(timer0);      }      ctx.clearRect(0, 0, 240, 240);      ctx.font="20px Arial";      ctx.textBaseline="middle";      ctx.textAlign="center";      ctx.fillText("下一关:"+num,120,120);      num=--num<0?0:num;      },1000);      setTimeout(function(){        timer=setInterval(doMove, 100);      },4000);    }  }  offOn=true;}//加入键盘事件,用方向键来控制蛇前进的方向/*(Math.abs(event.keyCode - co) != 2判断不能向后走left:37,top:38,right:39,bottom:40反方向刚刚好是相差2*/document.onkeydown = function(event) {  if(offOn){    offOn=false;    co = event.keyCode >= 37 &&     event.keyCode <= 40 &&     (Math.abs(event.keyCode - co) != 2) ? event.keyCode : co;  }  }  //判断指定位置是否与蛇重叠  /*这是为了检测自己撞到自己或检测食物在贪食蛇里面的*/function check(e, j) {  for (var i = 0; i < r.length; i++)    if (j != i && r[i].x == e.x && r[i].y == e.y) return true;  return false;}</script>  </body></html>

可以直接复制上面代码看效果;

 

上面的核心代码:

//如果有食物,则根据蛇前进的方向判断是否吃到了食物,并且将蛇数组中最后一个元素换到首部  e != null && ((co == 40 && r[0].x == e.x && r[0].y + 1 == e.y) ||     (co == 38 && r[0].x == e.x && r[0].y - 1 == e.y) ||     (co == 37 && r[0].x - 1 == e.x && r[0].y == e.y) ||     (co == 39 && r[0].x + 1 == e.x && r[0].y == e.y)) ?   (r.unshift(e), e = null, r.unshift(r.pop())) : (r.unshift(r.pop()));  //根据方向,重新设定蛇数组首元素的坐标,从而进行移动  (co == 40 || co == 38) ? (r[0].x = r[1].x, r[0].y = r[1].y + (co == 40 ? 1 : -1)) : (r[0].x = r[1].x + (co == 39 ? 1 : -1), r[0].y = r[1].y);

这是贪食蛇的核心代码,就是数组长度添加,和数组里的值怎么改变。