关于慕课网上爱心小鱼的讲解

Posted 2020-09-21

大家好！我是super喵二，这两个游戏是我学了h5之后，开始做的。主要是参照了慕课网的视频 ：话不多说，先讲思路吧：

1.爱心小鱼（这个小游戏是看着视频敲的，之前不是太熟悉的时候）：先上图

一、当然是需要两个canvas啦：

看图分析就是一个canvas用于画背景，芦苇，和果实

另一个canvas画鱼，记录分数，以及产生的水圈

二、绘制：

芦苇：定义一个芦苇类，包含芦苇根的位置，以及芦苇的高度，和透明值，在芦苇类上定义初始化与绘制方法，主要注意取好芦苇与芦苇宽度之间的随机值，以及芦苇高度的变化，重要的是芦苇来回摆动的振幅大小的取法：取一个振幅随机值，然后画芦苇的头部的位置时可乘上振幅的变化。

View Code

果实：定义一个果实类，属性主要包括果实颜色，存活状态（boolen值），果实大小，果实速度，以及果实才开始生长的位置。主要方法包含：初始化，绘制，出生，死亡，及画面上果实数量的监视。绘画时主要用到的

context.drawImage(img,x,y,width,height);//在画布上定位图像，并规定图像的宽度和高度。当然果实的位置会变化，所以x,y,width,height是随每一帧变化的，主函数中定义了帧变化的时间

View Code

大鱼：定一个大鱼类，包含坐标的变化，角度的变化，鱼眼睛，尾巴，以及身体的绘制。注意鱼眼睛与尾巴是不停变化的，而且变化速度相对每一帧较快，所以分别需要设置眼睛与尾巴的帧，角度的变化主要是引入了一个角度，距离变化的公用js，这里就不细说了。

View Code

小鱼同上：（小鱼多了身体颜色的变化）

View Code

碰撞检测函数：（大鱼与果实，小鱼与大鱼）：当大鱼吃掉果实（蓝色与黄色分数倍数变化），大鱼喂给小鱼，分数增加。

View Code

分数的变化（以及gameover），大鱼吃到果实后出现圆圈，大鱼喂给小鱼出现圆圈，相对简单，这里就不细说，上代码吧：

View Code

View Code

View Code

最重要的主函数来了：（其它函数大概分析之后，在主函数里new对象时就easy了）：

View Code