不过我们的小蛇好像对食物并没有什么兴趣呢，路过以后并不会吃掉，所以我们得给他加一个碰撞检测吧，碰撞检测的逻辑很简单，只需要让食物的left值与头部的left值相减的绝对值<=食物的大小，并且食物的top值与头部的top值相减的绝对值<=食物的大小，设置小于等于是因为如果直接用相等来判断的话，必须两个元素完全重合才行，我们需要的是碰到边缘就算迟到，所以用两个数值相减小于等于来做。然后判断当头部与食物发生碰撞时，将蛇的身体部分克隆一块出来放到蛇的身体里面，并让食物的位置重新刷新(适用克隆为偷懒方法，此偷懒方法仅适用于当小蛇开局自带一个身体的时候，如果小蛇开局不自带身体的话，我们无法克隆已有身体，只能通过createElement去新创建一个身体块出来并添加className后再添加到父元素中去才行)。下面我们把逻辑转换为代码
var dl=snake_x; var dt=snake_y; var fl=fd.style.left; var ft=fd.style.top; var dv=document.querySelectorAll("#snake div"); var sk=document.getElementById("snake"); var a2=Number(fl.substring(0,fl.indexOf("px"))); var b2=Number(ft.substring(0,ft.indexOf("px"))); if(Math.abs(dl-a2)<=60&&Math.abs(dt-b2)<=60){ fd.style.left=Math.random()*1000+"px"; fd.style.top=Math.random()*800+"px"; sk.appendChild(dv[1].cloneNode()); boxs = document.querySelectorAll(".box"); }
其中那一大长串的substring的方法是因为获取到的left与top的值的格式是例如”200px”这样的数组，无法进行数学运算，所以要把px给截掉，并将剩下的字符串”200”转换成number类型才可以进行数学运算。
这样一个简单的贪吃蛇就做好啦~
啥？你问我什么什么类似碰到自己会死这样更多的规则机制咋没写，肯定是因为我懒啊！我连createElement都懒得用直接克隆一个出来了，咋会勤快到把剩下这么多的机制补全呢哈哈。基础机制我已经写出来了，各种奇奇怪怪的机制还是留给小伙伴们自由发挥吧~
PS:大家完全可以把头部的背景图片改成你小伙伴的照片，再把食物改成一些你想让ta吃的东西，可以拿来恶搞啊哈哈哈
到此这篇关于JavaScript写个贪吃蛇小游戏(超详细)的文章就介绍到这了,更多相关js 贪吃蛇内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: