html5 贪吃蛇canvas小游戏
2014-02-10 12:41
429 查看
贪吃蛇是一个经典的小游戏,虽然我当年是个游戏小白,但是好歹当年玩这种不需要脑力的小游戏,还是手到擒来的。
贪吃蛇的算法不算复杂,主要讲蛇身的每一个片段分解存储在数组里,然后每一次移动时,a[n-1] = a
,即将每一个前元素的值,赋给下一个元素。最后重新设置第一个元素a[0]的位置和方向。
下面是蛇的移动算法
最后绑定按键
在随机生成食物时:判断食物是否与蛇重合
完整的html文件在我的github上:https://github.com/chenkehxx/practice/blob/test/gluttonousSnake.html
贪吃蛇的算法不算复杂,主要讲蛇身的每一个片段分解存储在数组里,然后每一次移动时,a[n-1] = a
,即将每一个前元素的值,赋给下一个元素。最后重新设置第一个元素a[0]的位置和方向。
// r表示蛇,co表示蛇前进的方向,默认向下, e表示食物 var r = [{x : 10, y : 9}, {x : 10, y : 8}], co = 40, e = null;
下面是蛇的移动算法
function move () { // 游戏是否结束 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()), console.log('food')) : (r.unshift(r.pop()), console.log('no food')); // 根据方向,重新设定蛇数组元素的坐标,从而进行移动 (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); console.dir(r); // 清空屏幕 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.random() * 24 >>> 0), x : (Math.random() * 24 >>> 0)}; console.dir(e); } // 判断游戏是否结束 if(check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24){ alert('game over! the length is : ' + (r.length - 2) ); } }
最后绑定按键
// 加入键盘事件, 用方向键控制蛇前进方向 document.onkeyup = function (event) { 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; } }
完整的html文件在我的github上:https://github.com/chenkehxx/practice/blob/test/gluttonousSnake.html
相关文章推荐
- [原] html5 canvas 贪吃蛇小游戏~~
- HTML5 Canvas实现贪吃蛇(一)
- HTML5 canvas 小游戏练手
- html5 canvas 英雄打怪小游戏
- limej 写一个HTML5的贪吃蛇小游戏
- HTML5写了个贪吃蛇,1.0版。主要玩玩canvas画画和初体验Web存储-localStorage
- 最近学习到H5的canvas,一时兴起写了个经典的“贪吃蛇”小游戏
- 网页HTML5--飞机大战小游戏开发--canvas的应用
- 贪吃蛇 HTML5 Canvas代码
- html5 canvas 自制小游戏系列之 【贪吃蛇】。
- 一个基于HTML5的canvas的js面向对象贪吃蛇
- HTML5 Canvas 射击类小游戏 平滑的移动 思路
- HTML5 Canvas实现贪吃蛇(二)
- html5实现贪吃蛇小游戏
- 如何开发一个简单的HTML5 Canvas 小游戏
- 利用HTML5 <canvas>实现2048小游戏
- html5 canvas 实现简易马祖小游戏
- 用html5中canvas标签写个贪吃蛇
- 基于JS、canvas的小游戏--贪吃蛇
- 如何开发一个简单的HTML5 Canvas 小游戏