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

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

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

View Code

转载于:https://www.cnblogs.com/cmmsuju/p/6940634.html

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

慕课网上的星级评分--学习视频后模仿实现
1.本人观看了慕课网上的星级评分视频,课程免费,老师讲的特别棒!视频链接:https://www.imooc.com/learn/842 2.在学习完视频后找到了一位大神手敲的代码,在他的Github ...
关于指针，可能是网上最详细的讲解了
指针是C语言中广泛使用的一种数据类型. 运用指针编程是C语言最主要的风格之一.利用指针变量可以表示各种数据结构: 能很方便地使用数组和字符串: 并能象汇编语言一样处理内存地址,从而编出精练而高效的程序 ...
网上课程之实例讲解(2)
每一课分为9小节:Tip, Listening, Vocabularies, Review Questions, Listening with Text on Display, Translation ...
用HTML 5实现爱心小鱼的游戏
本游戏的示例来源于果壳网,用鼠标可以控制大鱼吃果实,然后用大鱼将果实喂养给小鱼. 演示效果如下: HTML代码如下: <!DOCTYPE html> <html lang=" ...
自定义View 仿QQ运动步数进度效果
1. 概述我记得QQ之前是有一个,运动步数的进度效果,今天打开QQ一看发现没有了.具体效果我也不清楚了,我就按照自己大概的印象写一下,这一期我们主要是熟悉Paint画笔的使用: 2. 效果 ...
Maven mirrorOf配置
问题描述: 今天在公司准备搭建一个springboot+activiti的框架,通过pom.xml中引入相关依赖,发现activiti相关的依赖始终无法下载.在中央仓库查找发现这个依赖也存在啊,于是就 ...
慕课网--网上商城mmall项目---部署手记
1.先在服务器部署好java,maven,nodejs环境. 2.然后安装nginx,tomcat,vsftp,git(一般默认会有)等软件 , 其中vsftp安装过程参照我上一篇文章. 3.在慕课网 ...
感受-App接口开发课程讲解和总结
1.背景今天有幸给学弟学妹们上了一节课,课程内容-- app接口开发.算起来在学校玩程序和软件已经有一年的时间了,这一年里学习到了很多东西,从接触编程语言到会做安卓软件 ,再到会写网站,付出了很 ...
a*算法matlab代码_NSGAII多目标优化算法讲解（附MATLAB代码）
小编今天为大家讲解NSGA-II多目标优化算法,提到多目标优化,大家可能第一个就想到NSGA-II算法,今天小编就带领大家解开NSGA-II的神秘面纱. NSGA-II全称是快速非支配排序遗传算法,这 ...

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

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

最新文章

热门文章