html5贪吃蛇游戏使用63行代码完美实现

1、html5贪吃蛇游戏使用63行代码完美实现贪吃蛇，最主要的功能点：1、蛇的移动2、转变蛇的方向3、放置食物4、增强舍身5、怎么挂的，详细实现如下，容易有用就60行，感爱好的伴侣可以参考下哈，希翼对大家有所协助以前也很少关注html5，感觉挑选html已经渐渐成为趋势，想了解下。就找了个嬉戏学习了，写完这个嬉戏感觉html5和js结合很紧密，假如js不是特殊好。估量需要先补习下js，这个只是个人的建议，不一定精确。还有一个就是，思维和规律要特殊清晰，不然写嬉戏可能很疼痛。 贪吃蛇，最主要的功能点： 1，蛇的移动 2，转变蛇的方向 3，放置食物 4，增强舍身 5,怎么挂的。 第一次写嬉戏，第一次写

2、html5 感觉还是很吃力的。写完了，给大家共享下。相互沟通.不懂的或者有建议的，可以留言给我。代码很短，就60行。 不过这个是个半成品，等写完成了。再更新下 代码如下: var c=document.getelementbyid("mycanvas");var time = 160 ; /蛇的速度var cxt=c.getcontext("2d");var x = y = 8;var a = 0; /食物坐标var t = 20; /舍身长var map = ; /记录蛇运行路径var size = 8; /蛇身单元大小

3、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 | xt) /保持舍身长度var cl = map.shift(); /删除

4、数组第一项，并且返回原元素cxt.clearrect(cl&39;x&39;, cl&39;y&39;, size, size);map.push(&39;x&39;:x,&39;y&39;:y); /将数据添加到原数组尾部cxt.fillstyle = "006699"/内部填充色彩cxt.strokestyle = "006699"/边框色彩cxt.fillrect(x, y, size, size);/绘制矩形if(a*8)=x &&am

5、p;amp; (a*8)=y) /吃食物rand_frog();t+;document.onkeydown = 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 = "0000