童年回忆——捕鱼达人（内含源码inscode一键运行）

朱雀 2023-10-14 15:40 127阅读 0赞

# 前言 #

![在这里插入图片描述][0422b4369a3549b3a39da19588ab88f4.png]  
「作者主页」：[雪碧有白泡泡][Link 1]  
「个人网站」：[雪碧的个人网站][Link 2]  
「推荐专栏」：

> ★[java一站式服务][java] ★  
> ★ [React从入门到精通][React]★  
> ★[前端炫酷代码分享][Link 3] ★  
> ★ [从0到英雄，vue成神之路][0_vue]★  
> ★ [uniapp-从构建到提升][uniapp-]★  
> ★ [从0到英雄，vue成神之路][0_vue 1]★  
> ★ [解决算法，一个专栏就够了][Link 4]★  
> ★ [架构咱们从0说][0]★  
> ★ [数据流通的精妙之道][Link 5]★  
> ★[后端进阶之路][Link 6]★

![请添加图片描述][c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]

### 文章目录 ###

*  前言
 *  认识一下inscode
 *  先看运行效果
 *   *   *  看查源码内容
         *  获取项目
 *  项目结构
 *   *  核心逻辑fishjoy.js
 *  小结

# 认识一下inscode #

![在这里插入图片描述][ceb7297d53444c67ac900201cc3b721f.png]  
CSDN最新推出的Inscode服务是一个在线编程工具，旨在为开发者提供一个便捷的编写、运行和分享代码的环境，让开发者无需在本地搭建编程环境，即可快速编写和运行代码。

Inscode支持多种编程语言，包括Java、Python、C++等，同时也支持编写HTML、CSS和JavaScript代码。它提供了完整的运行环境，让代码在网页上直接运行并输出结果，即时调试，方便快捷。同时，Inscode还提供了分享功能，可以轻松地将代码分享给其他人。

使用Inscode，只需访问其网站[https://inscode.csdn.net/][https_inscode.csdn.net]  
个人主页：[why\_does\_it\_work][why_does_it_work]

# 先看运行效果 #

![在这里插入图片描述][22c242737a63478287cee5392fa2c005.png]  
这里可以直接**看查源码内容**，**刷新**，最后一个是**放大跳转网页**

### 看查源码内容 ###

![在这里插入图片描述][40da2e09d90f49f1a4704a5481bf9f6a.png]

### 获取项目 ###

[点击链接][Link 7]  
![在这里插入图片描述][0e8f8bdae09445b0af9cc61638841edb.png]  
![在这里插入图片描述][5394dc9f8789478082f4784f04710365.png]

# 项目结构 #

![在这里插入图片描述][99894900120c4845bab70f9b6219b0af.png]

> 1.  第一个脚本文件是"**quark.base-1.0.0.alpha.min.js**“，它是一个名为”**quark**"的JavaScript框架的核心文件。这个框架提供了一些基本的功能和工具，以方便开发者进行Web应用程序的开发。
> 2.  下一个被引入的脚本文件是"**R.js**“，它可能是一个自定义的JavaScript文件，用于管理游戏中的资源，例如图片和声音文件。这个文件可能定义了一个”**R**"对象，其中包含了游戏中使用的所有资源的引用。
> 3.  "**Utils.js**"是一个自定义的JavaScript文件，它可能包含一些通用的功能函数或工具函数，用于游戏的实现。这些函数可能包括一些常用的数学计算、碰撞检测等功能。
> 4.  "**fishjoy.js**“是游戏的核心逻辑代码文件。它可能包含了游戏的初始化设置、主循环逻辑、用户交互处理等内容。这个文件可能定义了一个名为”**FishJoy**"的对象，其中包含了游戏的各种逻辑和状态。
> 5.  "**FishManager.js**“是一个自定义的JavaScript文件，它可能是用于管理和控制游戏中的鱼类对象的文件。这个文件中可能定义了一个名为”**FishManager**"的对象，用于创建、更新和销毁游戏中的鱼类对象。
> 6.  "**FishGroup.js**“是一个自定义的JavaScript文件，它可能是用于创建和管理游戏中的鱼群的文件。这个文件中可能定义了一个名为”**FishGroup**"的对象，用于创建、更新和销毁游戏中的鱼群。
> 7.  "**Fish.js**“是一个视图文件，它可能定义了一个名为”**Fish**"的视图类，用于显示游戏中的鱼类对象。这个类可能包含了一些方法和属性，用于控制鱼的运动和动画效果。
> 8.  "**Cannon.js**“是一个视图文件，它可能定义了一个名为”**Cannon**"的视图类，用于显示游戏中的炮台对象。这个类可能包含了一些方法和属性，用于控制炮台的角度和发射子弹。
> 9.  "**Bullet.js**“是一个视图文件，它可能定义了一个名为”**Bullet**"的视图类，用于显示游戏中的子弹对象。这个类可能包含了一些方法和属性，用于控制子弹的运动和碰撞检测。
> 10. "**Num.js**“是一个视图文件，它可能定义了一个名为”**Num**"的视图类，用于显示游戏中的分数和数字等信息。这个类可能包含了一些方法和属性，用于更新和显示分数。
> 11. "**Player.js**“是一个视图文件，它可能定义了一个名为”**Player**"的视图类，用于显示游戏中的玩家信息。这个类可能包含了一些方法和属性，用于更新和显示玩家的信息。  
>     ![在这里插入图片描述][ba89366e33cc4d558b3ef78b618ebffc.png]

## 核心逻辑fishjoy.js ##

![在这里插入图片描述][5875379c3be1420b8cc057fe3a3aa29a.png]

**具体代码**

这段代码是一个立即执行函数，主要用于初始化一个名为game的对象，设置游戏的参数和加载资源等操作。

> 1.  在window.onload事件回调函数中，调用game.load()方法加载游戏资源。
> 2.  定义一个命名空间ns，并将其赋值给game对象的一个属性。
> 3.  初始化game对象的一些属性，如container（游戏容器）、width（游戏宽度）、height（游戏高度）、fps（帧率）等。
> 4.  game.load()方法用于加载游戏资源，其中使用了Q.js引擎中的ImageLoader类。
> 5.  game.onLoadLoaded()方法在资源加载过程中被调用，用于显示加载进度。
> 6.  game.onLoadComplete()方法在资源加载完成后被调用，初始化游戏。
> 7.  game.init()方法用于初始化游戏，创建舞台、添加事件监听器、初始化UI界面等操作。
> 8.  game.initUI()方法用于初始化游戏界面元素，包括背景图、鱼的容器、底部工具栏等。
> 9.  game.initPlayer()方法用于初始化玩家对象。
> 10. game.update()方法在每一帧更新游戏，包括更新帧数和鱼的位置等。
> 11. game.testFish()方法用于测试创建鱼。
> 12. game.testFishDirection()方法用于测试创建具有不同方向的鱼。
> 13. game.testFishALL()方法用于测试创建所有类型的鱼。
> 14. game.showFPS()方法用于显示帧率。
> 15. game.hideNavBar()方法用于隐藏导航栏。  
>     ![在这里插入图片描述][f6913f872f564202aa7a1bc470413587.png]

# 小结 #

**捕鱼达人是一款非常受欢迎的休闲游戏，通过使用HTML编写的捕鱼达人小游戏可以让玩家在浏览器中体验到捕鱼的乐趣。**

游戏主要包括以下几个要点：

> 1.  游戏界面设计：通过HTML和CSS，可以设计出游戏界面，包括渔场、海洋背景、鱼群等元素。可以使用HTML的div标签来创建渔场和渔网，并使用背景图片增加视觉效果。
> 2.  鱼类的生成：可以使用HTML的img标签来插入鱼的图片，并设置其动画效果，使鱼在渔场中移动。可以使用JavaScript控制鱼的生成和移动，使其在渔场中自由游动。
> 3.  捕鱼操作：可以使用HTML的canvas标签创建画布，通过JavaScript获取鼠标点击事件，并在点击位置创建渔网。点击后可以计算鱼和渔网的位置关系，判断是否捕捉到鱼，并根据捕鱼的成功或失败给玩家加分或扣分。
> 4.  分数统计：可以使用JavaScript来实现分数的统计和显示，每次成功捕鱼后可以更新分数，并将分数显示在游戏界面上。

**通过使用HTML、CSS和JavaScript来编写捕鱼达人小游戏，可以让玩家在浏览器中进行捕鱼游戏，提供了一个简单、便捷且有趣的游戏体验。**

![在这里插入图片描述][61fe7fb7c15e42d9bf63a40afe8d5df4.png]

[0422b4369a3549b3a39da19588ab88f4.png]: https://img-blog.csdnimg.cn/0422b4369a3549b3a39da19588ab88f4.png
[Link 1]: https://blog.csdn.net/Why_does_it_work?spm=1011.2415.3001.5343
[Link 2]: https://sprite.inscode.cc/
[java]: https://blog.csdn.net/why_does_it_work/category_12379581.html
[React]: http://t.csdn.cn/69y5b
[Link 3]: https://blog.csdn.net/why_does_it_work/category_12378617.html
[0_vue]: http://t.csdn.cn/X1kpw
[uniapp-]: https://blog.csdn.net/why_does_it_work/category_12363697.html
[0_vue 1]: https://blog.csdn.net/why_does_it_work/category_12376654.html
[Link 4]: https://blog.csdn.net/why_does_it_work/category_12381051.html
[0]: https://blog.csdn.net/why_does_it_work/category_12381055.html
[Link 5]: https://blog.csdn.net/why_does_it_work/category_12381058.html
[Link 6]: https://blog.csdn.net/why_does_it_work/category_12397959.html?spm=1001.2014.3001.5482
[c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]: https://img-blog.csdnimg.cn/c7f3e6b8a7624a9eabbea77dbcbca119.jpeg
[ceb7297d53444c67ac900201cc3b721f.png]: https://img-blog.csdnimg.cn/ceb7297d53444c67ac900201cc3b721f.png
[https_inscode.csdn.net]: https://inscode.csdn.net/
[why_does_it_work]: https://inscode.csdn.net/@why_does_it_work
[22c242737a63478287cee5392fa2c005.png]: https://img-blog.csdnimg.cn/22c242737a63478287cee5392fa2c005.png
[40da2e09d90f49f1a4704a5481bf9f6a.png]: https://img-blog.csdnimg.cn/40da2e09d90f49f1a4704a5481bf9f6a.png
[Link 7]: https://inscode.csdn.net/@why_does_it_work/HTML-CSS-JS_35
[0e8f8bdae09445b0af9cc61638841edb.png]: https://img-blog.csdnimg.cn/0e8f8bdae09445b0af9cc61638841edb.png
[5394dc9f8789478082f4784f04710365.png]: https://img-blog.csdnimg.cn/5394dc9f8789478082f4784f04710365.png
[99894900120c4845bab70f9b6219b0af.png]: https://img-blog.csdnimg.cn/99894900120c4845bab70f9b6219b0af.png
[ba89366e33cc4d558b3ef78b618ebffc.png]: https://img-blog.csdnimg.cn/ba89366e33cc4d558b3ef78b618ebffc.png
[5875379c3be1420b8cc057fe3a3aa29a.png]: https://img-blog.csdnimg.cn/5875379c3be1420b8cc057fe3a3aa29a.png
[f6913f872f564202aa7a1bc470413587.png]: https://img-blog.csdnimg.cn/f6913f872f564202aa7a1bc470413587.png
[61fe7fb7c15e42d9bf63a40afe8d5df4.png]: https://img-blog.csdnimg.cn/61fe7fb7c15e42d9bf63a40afe8d5df4.png