JavaScript实现猫吃鱼小游戏

Posted 2022-03-10 qq59c60c7350339

贪吃猫小游戏

作为一名前端人员，撸猫我决定使用面向对象的方式书写贪吃猫小游戏，灵感来自有贪食蛇小游戏。
我们可以把整个游戏看成是一个游戏类，游戏类可以有各种各样的属性。
我们可以把贪吃猫中的猫作为一个属性，还有地图属性、食物属性、障碍物属性。
我们可以把猫当做一个"猫"类，有数组属性、有方向属性、有增长方法、有移动方法。
可以把地图看成一个地图类，有行属性、有列属性、有宽度属性 （总宽）、有高度属性  （总高）。
有一个数组属性，数组中存放的是每一个小方格。
可以把食物看成一个食物类，有一个x属性，有一个y属性，img属性。
可以把障碍物看成是一个类，有一个数组属性

Map.js

当我们渲染实物和地图的时候，进入map.js用来渲染地图，map最终需要渲染在页面中，所以我们要用到一个dom元素this.dom = document.createElement("div")，然后我们要填充方法，我们的每一步相当于一个小格子，我们应该从每一行开始创建，然后再创建每一列，将创建的元素追加dom中和数组中，然后再进行上树操作，使其进行上树操作document.body.appendChild(this.dom)。

Game.js

然后为了地图和食物进行关联，我们在Game.js中定义了渲染地图和渲染食物的方法。Game.js还要定义检测是否超过边界的判断、游戏结束的方法、检测猫是否吃到食物鱼、重置食物的方法以及检测猫是否撞到障碍物的等一系列操作。

Cat.js

然后我们渲染猫在地图中，Cat.js中猫的身体就是由多个食物组成的，我们要定义猫移动的方法和移动的方向。而且我们还要判断用户按下的方向是否合理才进行设置操作。

Food.js

food.js定义x、y、img以及重置食物时对应的x和y。

Block.js

如果我们想要更改障碍物的位置，我们可以在Block.js中去设置。

html

html就是将所有js进行关联到一起

总结

项目就简单的写了一下，还有很多地方没有完善，后期有时间会进行简单的完善，我在代码中写了很多注释，有利于看的人方便阅读和理解，由于个人比较菜，很多地方写的不是很多，请各位大佬多多指教。

最终完成的效果图如下:

最后

扫码关注公众号【前端每日技巧】，写作不易，希望能点赞