首页 > 网页设计 > html5 贪吃蛇canvas小游戏

html5 贪吃蛇canvas小游戏

贪吃蛇是一个经典的小游戏,虽然我当年是个游戏小白,但是好歹当年玩这种不需要脑力的小游戏,还是手到擒来的。

贪吃蛇的算法不算复杂,主要讲蛇身的每一个片段分解存储在数组里,然后每一次移动时,a[n-1] = a[n],即将每一个前元素的值,赋给下一个元素。最后重新设置第一个元素a[0]的位置和方向。

 

[javascript]
  1. // r表示蛇,co表示蛇前进的方向,默认向下, e表示食物
  2.             var r = [{x : 10, y : 9}, {x : 10, y : 8}],
  3.                 co = 40,
  4.                 e = null;

下面是蛇的移动算法

 

 

[javascript]
  1. function move () {
  2.                 // 游戏是否结束
  3.                 if(check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24){
  4.                     return;
  5.                 }
  6.                 // 如果有食物,则根据蛇前进的方向判断是否吃到了食物,并且将蛇数组中最后一个元素换到首部
  7.                 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()), console.log('food')) : (r.unshift(r.pop()), console.log('no food'));
  8.                 // 根据方向,重新设定蛇数组元素的坐标,从而进行移动
  9.                 (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);
  10.                 console.dir(r);
  11.                 // 清空屏幕
  12.                 ctx.clearRect(0, 0, 240, 240);
  13.                 // 如果有食物,则绘制食物
  14.                 if (e) {
  15.                     ctx.fillRect(e.x * 10, e.y *10, 10, 10);
  16.                 }
  17.                 // 绘制蛇
  18.                 for (var i = 0; i < r.length; i++) {
  19.                     ctx.fillRect(r[i].x * 10, r[i].y * 10, 10, 10);
  20.                 }
  21.                 // 如果没有食物,则随机位置上加入一粒食物
  22.                 while (e == null || check(e)) {
  23.                     e = {y : (Math.random() * 24 >>> 0), x : (Math.random() * 24 >>> 0)};
  24.                     console.dir(e);
  25.                 }
  26.                 // 判断游戏是否结束
  27.                 if(check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24){
  28.                     alert('game over! the length is : ' + (r.length - 2) );
  29.                 }
  30.             }

最后绑定按键

 

 

[javascript]
  1. // 加入键盘事件, 用方向键控制蛇前进方向
  2.         document.onkeyup = function (event) {
  3.             co = event.keyCode >= 37 && event.keyCode <= 40 && (Math.abs(event.keyCode - co) != 2) ? event.keyCode : co;
  4.         }

在随机生成食物时:判断食物是否与蛇重合

 

 

[javascript]
  1. // 判断指定位置是否与蛇重叠
  2.         function check (e, j) {
  3.             for (var i =0; i < r.length; i++) {
  4.                 if (j != i && r[i].x == e.x && r[i].y == e.y) {
  5.                     return true;
  6.                 }
  7.                 return false;
  8.             }
  9.         }

完整的html文件在我的github上:https://github.com/chenkehxx/practice/blob/test/gluttonousSnake.html


本文固定链接: http://www.devba.com/index.php/archives/4793.html | 开发吧

报歉!评论已关闭.