首页 > 代码库 > canvas游戏之贪食蛇
canvas游戏之贪食蛇
直接上效果图：
这个贪食蛇关键地方在于数组，它的长度增加其实是数组的增长，就是数组的向前追加等操作，核心就是数组的操作。
完整代码：
<!DOCTYPE html><html> <body> <canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;"> 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);
这是贪食蛇的核心代码，就是数组长度添加，和数组里的值怎么改变。
canvas游戏之贪食蛇
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。