使用Vue实现贪吃蛇

260 阅读2分钟

我正在参加掘金社区游戏创意投稿大赛个人赛,详情请看:游戏创意投稿大赛

前言

之前学完JavaScript后,我便写了一个贪吃蛇来练练手。都是自己瞎琢磨,代码倒是写的挺多的,但bug就更多了,最后干脆就直接放弃了。前几天写个人博客,突然想到了这个远古项目,就改了“亿点点”(也就重新写了一下),放到博客上去了。

写这篇文章的时候,我还特意去看了一遍源码,看完之后,我只能说“真不愧是我啊”,就挺离谱的,本来就没什么注释,还都写在一堆,就很乱,幸好我看着想起来了一些,不然还不一定能看懂。最离谱的是我那个蛇的移动,我给蛇的每一个节点都弄了个方向,通过判断每一节的方向改变对应的节点的left和top,比如说向右移动,那节点的left加上节点的宽。。。,还有转弯的时候,写得特别复杂。

还是来看看我重写的吧

游戏规则

  • 使用w/arrowUp,a/arrowLeft,s/arrowDown与d/arrowRight控制贪吃蛇向上,向左,向上与向右
  • 贪吃蛇每吃10个鼠鼠便会膨胀,速度加快,殊不知欲望是无止境的,等待它的只有死亡
  • 贪吃蛇从吃第一只鼠鼠开始,每30s要吃一个,不然gameOver

游戏截图

image-20220423231039296.png

游戏地址

注意: 使用电脑玩,还没做手机适配

www.dz8545.xyz/#/main/snak…

远古版本

image-20220423231217221.png

虽然丑了一点,但基本功能都差不多实现了,就是bug多了一点

总结

感觉我的审美还是不太行,页面做的还是有点难看。希望下次写,能更好看,实现更多有趣的功能。加油!