首页 > 代码库 > 关于慕课网上爱心小鱼的讲解

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

大家好!我是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

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