开始之前大家最好掌握前端最基本的一些语法如:html、css、javascript等课程知识点。
好吧!!!因为开发前端的东西无须安装任何开发工具,就算啥也不懂也没关系,那么赶紧瓜子花生板凳准备好快跟着老师来体验一下编程的魅力吧!:)
真实效果图如下:
![d734fed5f4cd99720a669b75d48ffb65.png](https://i-blog.csdnimg.cn/blog_migrate/597f1203361a2ed72a00967dc3f587e7.jpeg)
程序思维
开发的大概思路是首先在Body中定义一个div作为容器,然后使用样式定义界面游戏场景,角色(贪吃蛇)以及食物,然后编写javascript脚本对游戏地图,角色以及食物进行初始化的渲染,再编写move函数完成蛇身移动,蛇身在移动的过程当中判断蛇头和蛇身是否重叠,促使蛇身增长,假如蛇头在移动的过程当中碰到身体的其它部位,或者超出地图编写视作游戏结束Game Over,当蛇身长度达到某个长度值我们可以设置通关条件可以增加移动速度。
废话不多说直接按步骤撸代码!!!
第一步:编写游戏地图/贪吃蛇/食物样式
![378f9d7c9540923611ec3265aad230a9.png](https://i-blog.csdnimg.cn/blog_migrate/94836ce787f210e6d1eb2c79ba3e1911.jpeg)
![d82266dd6a9ecb413bb110f1bd083da7.png](https://i-blog.csdnimg.cn/blog_migrate/1666adc71538259b809597793dc45e96.jpeg)
第二步:定义初始化数据(并定义功能函数)
![259ca7ff2c45bab7d61cfce87c4a82e4.png](https://i-blog.csdnimg.cn/blog_migrate/f842a15f45e1ab0e41f4d3ccc818512c.jpeg)
第三步:创建地图(函数)
![35e4a7740526acc3ad47276223470648.png](https://i-blog.csdnimg.cn/blog_migrate/f53e4ff4387cefd9c9f8179279401ce4.jpeg)
第四步:创建/擦除蛇身(函数)
![af60a016ad2d6ca9c1df53ca84090a20.png](https://i-blog.csdnimg.cn/blog_migrate/e5e28347493a7950981e5cf3a439d67f.jpeg)
![50c2320750e09d8e9d4e675417774332.png](https://i-blog.csdnimg.cn/blog_migrate/7f0826193f578caed350dba0542db838.jpeg)
第五步:蛇身移动(函数)
![e9e59e73eb494c43d9722368e65a1272.png](https://i-blog.csdnimg.cn/blog_migrate/55891a874165231059fb64f6cfe614e8.jpeg)
![06c0275bd25081bb8597fb63572974cc.png](https://i-blog.csdnimg.cn/blog_migrate/43b59a398a6059c3bb695e421f6d6e42.jpeg)
![ed8f0fe23fcf9777d083e1647ee08ec8.png](https://i-blog.csdnimg.cn/blog_migrate/68e9c4ebaf5a020177d6560730666052.jpeg)
第五步中调用的函数:吃到食物(函数)
![554da4040a01a81ded54a6d31133cbe9.png](https://i-blog.csdnimg.cn/blog_migrate/8fa82facdc2441afda5d5525846be4cf.jpeg)
![06544a7911fef75c20c6f0453a989657.png](https://i-blog.csdnimg.cn/blog_migrate/8d85caf42a3cab3bad95b7b59725df37.jpeg)
由于是否吃到食物和控制方向函数都是蛇身移动过程当中需要反复调用,所以最后单独写成了独立函数在蛇身移动函数中调用,好了代码到此结束!最后大家可以来试试啦!
如果有小伙伴在编写代码过程当中碰到问题欢迎大家添加关注私信我来咨询,或找我获取录制的经典小游戏之贪吃蛇游戏录制的视频和代码。
或点击下面的“了解更多”,进入在线视频链接进行学习。好了感谢大家的观看再见!