JavaScript写个贪吃蛇小游戏的示例分析
小编给大家分享一下JavaScript写个贪吃蛇小游戏的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
在宿城等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站制作、网站建设 网站设计制作定制网站,公司网站建设,企业网站建设,品牌网站建设,成都全网营销,外贸网站制作,宿城网站建设费用合理。
贪吃蛇大家都玩过,但你会制作嘛?听起来好像很难的样子,其实非常的简单,话不多说直接上代码
我们先把dom结构写出来
其中,content为整个布局的大盒子,snake就是蛇,里面的box就是他的身体,为了区分头部我们给第一个box加了个head名字用于区分,下面我们再把css加上
我们给蛇的每一节的宽高设置为60像素,并给了一个定位,因为如果不加定位的话无法让他脱离文档流(在页面中飘起来),而且后续也无法通过left和top来判断他的坐标.
好的这样我们就得到了一条可爱的小蛇(然鹅并没有看出来哪里可爱- -)。什么?你问我他的头哪去了,很简单,在给元素加了定位以后后面的元素会覆盖掉前面的元素,所以只是头部和身体重叠了你看不到而已。
随后咱们得让这条蛇动起来是吧,那么我们怎么让他动起来呢?原理很简单,我们可以设置一个定时器,每过一个时间就让他动一下,而怎么让他动呢,只需要设置一个数值,让这个值每动一下就+=60,然后通过判断是上下动还是左右动,来给元素的left与top赋值。我们把逻辑写成代码,就出来了如下的代码
上述代码中,我们给小蛇的初始位置的x和y的坐标都设置为0,并且默认初始向右走,通过键盘上方向键的输入,来改变他的方向。其中,难点在于
for(var i = boxs.length - 1; i > 0 ; i --){ boxs[i].style.left = boxs[i - 1].style.left; boxs[i].style.top = boxs[i - 1].style.top; } boxs[i].style.left = snake_x + "px"; boxs[i].style.top = snake_y + "px";
这一块代码,这块代码的目的是让后面的元素跟着前面的走,也就是让蛇的每一块身体都跟着上一块去运动,然后最后再给头部设置为snake_x和snake_y当前的值即可,这样就形成了第一块(头部)坐标为snake_x,snake_y
实时变化的值,第二块为第一块之前的值,第三块为第二块之前的值。。。以此类推就得到了一个身体跟着头部走的效果
但是当你把代码输进去以后一运行会发现,这条小蛇过于顽皮,以至于走到边界以后还会无限的向前走,那这不行啊,总不能让蛇跑了不是,所以得给小蛇加上一个边界
var snake_x_max = document.documentElement.clientWidth ; var snake_y_max = document.documentElement.clientHeight; if(snake_x > snake_x_max){ snake_x = 0; } if(snake_x < 0){ snake_x = snake_x_max; } if(snake_y > snake_y_max){ snake_y = 0; } if(snake_y < 0){ snake_y = snake_y_max; }
这里我们设置x和y的最大值为当前窗口的宽高,然后通过if语句进行判断,如果当前坐标大于了最大值,就讲当前坐标归0,如果小于0的话(也就是跑到了左边的边界),就将当前坐标设置为最大值,这样就可以得到一个边界啦
你以为这样就完事啦?nonono,没有食物吃的蛇怎么能叫做贪吃蛇呢,那是没有灵魂哒。下面我们开始制作食物(不能让蛇饿着是吧)。
然后给他加个css
#food{ width: 60px; height: 60px; position: absolute; background: greenyellow; }
然后再绑定一下元素并将他的left和top值设为范围内随机数,这样可以做到随机位置生成
var fd=document.getElementById("food"); fd.style.left=Math.random()*snake_x_max+"px"; fd.style.top=Math.random()*snake_y_max+"px";
好的这样我们就得到了一个随机生成的食物
不过我们的小蛇好像对食物并没有什么兴趣呢,路过以后并不会吃掉,所以我们得给他加一个碰撞检测吧,碰撞检测的逻辑很简单,只需要让食物的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类型才可以进行数学运算。
以上是“JavaScript写个贪吃蛇小游戏的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文名称:JavaScript写个贪吃蛇小游戏的示例分析
文章源于:http://myzitong.com/article/joscsc.html