目录
前言
快来看! 十八岁花季少女重出江湖!一举拿下一条贪吃蛇!贪吃蛇可以说是JavaScript的必学关卡啦,但是作为小白来无从下手啊!今天我就用这篇博客来给我的宝贝们讲解一下怎么用JavaScript实现贪吃蛇!先给大家展示一下效果!
这是整个程序的视频链接 原生js贪吃蛇游戏实战开发_哔哩哔哩_bilibili ,只是视频比较长但是讲解的还是很详细的;我自己的多添加了一个难度的设置,根据不同的难度的蛇运动的速度就会不同。我觉得文字始终是没有视频讲解的更清楚的,所以我简述实现过程,但是给大家详细讲解一下控制蛇的速度。
实现思想
作为小白都想着它是整体移动的,但是!我们需要把蛇的每个结构分开,就是蛇不是一个整体,分为蛇头、蛇身、蛇尾。而我们的游戏界面并不是一个空白,它是由N个小个子组成的,而蛇的每个部分就是在里面的一个格子里面。如下图所示,每一个部分就是一个格子包括蛇和食物都是这样子的。
蛇和食物是怎么产生的?
我们生成每一个部分都需要构建一个20*20的小方块,可以转食物、蛇头、蛇身。同时需要出传递一个参数控制生成的样式,这个在css里面构建就可以了。我们同时在整个页面创建了一个新的坐标系,一个坐标的长度和宽度都为20px。
蛇是怎么构成的?
蛇是通过链表实现的,在构建蛇的时候就搭建了蛇的链式结构。蛇的链式结构如下图所示:
蛇是怎么移动的?
我们已经知道蛇是通过链表组成,所以两个部分之间是必有联系的。我们需要得到蛇头的下一个位置,让蛇头的位置更新。原来蛇头的位置创建一个新的方块,放在原来蛇头位置,与此同时删掉最后一个方块并更新链表。如下图所示:
蛇是怎么吃食的?
将食物的坐标和蛇头即将去的下一个位置的坐标进行对比。如果是相同的,食物更新坐标(注意食物的坐标不能出现在蛇身上),同时不需要删除原来的蛇尾,只需要添加新的身体即可,这样子蛇就会变长。
怎么判断蛇die?
蛇死掉就是两种情况:撞墙和撞自己。
判断是不是撞墙了?根据蛇头要去的下一个位置就可以知道。下一个位置为:(列数-1)或者(行数-1),此时蛇都是撞墙的情况。即可判断为蛇死掉了。为什么列数和行数需要-1,因为是以坐标的左上角去定的位置,蛇头本身有20px的宽高,不减就会进墙里面。
判断是不是撞自己?我们在初始化的时候需要一个数组存储蛇每个部分的位置,此时只需要将数组和蛇即将去的下一个位置进行对比,如果是蛇的身体,说明撞上了,即蛇死了。
控制蛇的速度
我这里定义了一个全局变量fast,把定时器的固定速度改为fast。在进入游戏的时候,我们需要点击不同盒子来控制fast的值,值越大越慢。我的设置如下所示:
想法是很简单的,但是需要注意的是,点击事件是异步进程,会放在任务队列里面,所以我们不能把fast赋值后的判断放在click事件外面。否则就fast就会一直处于初始值,以至于无法改变速度。(后面有整体代码)
for (var i = 0; i < difficulty_spans.length; i++) {
var index;
difficulty_spans[i].setAttribute('index', i);
difficulty_spans[i].addEventListener('click', function () {
difficulty.style.display = 'none';
startBtn.parentNode.style.display = 'block';
index = this.getAttribute('index');
//必须把判断fast写在点击事件里面
if (index == 0) {
fast = 300;
} else if (index == 1) {
fast = 200;
}
else {
fast = 100;
}
});
//不能放在这个位置
}
程序全代码
因为代码比较长,我就放在网盘里面了,需要的小伙伴自行下载。
链接:https://pan.baidu.com/s/1lRe14mblOCmHbFxzA_aHbg
提取码:zmty
总结
学习的过程总是痛苦的,但是未来总是光明的。贪吃蛇这个项目就是写完一遍以后就觉得不是很难了,一点点消化知识,学到就是赚到。我们一起雕刻自己叭~