锐客网

  1. 首页 > 睿知 > it技术 > >

JavaScript实现猫吃鱼小游戏

IT知识javascript

知识为进步之母,而进步又为富强之源泉。这篇文章主要讲述JavaScript实现猫吃鱼小游戏相关的知识，希望能为你提供帮助。



贪吃猫小游戏作为一名前端人员，撸猫我决定使用面向对象的方式书写贪吃猫小游戏，灵感来自有贪食蛇小游戏。
我们可以把整个游戏看成是一个游戏类，游戏类可以有各种各样的属性。
我们可以把贪吃猫中的猫作为一个属性，还有地图属性、食物属性、障碍物属性。
我们可以把猫当做一个"猫"类，有数组属性、有方向属性、有增长方法、有移动方法。
可以把地图看成一个地图类，有行属性、有列属性、有宽度属性 （总宽）、有高度属性   （总高）。
有一个数组属性，数组中存放的是每一个小方格。
可以把食物看成一个食物类，有一个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【JavaScript实现猫吃鱼小游戏】然后我们渲染猫在地图中，Cat.js中猫的身体就是由多个食物组成的，我们要定义猫移动的方法和移动的方向。而且我们还要判断用户按下的方向是否合理才进行设置操作。



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



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



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



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



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

    推荐阅读


    上一篇：7.利用MySQL Router构建读写分离MGR集群 | 深入浅出MGR

    下一篇：90%的转型企业需要“零信任”