HTML5“爱心鱼”游戏总结

Posted 2020-07-30

html5“爱心鱼”游戏总结

目录

1.页面搭建

2.画蓝色的海洋

3.画随海水摆动的漂浮物

4.画随海水摆动的海葵

5.画静态的大鱼

6.鼠标控制大鱼的游向

7.给大鱼加基本动画（眼睛眨动，尾巴不停的摇摆）

8.画静止的小鱼

9.小鱼跟随大鱼游动

10.给小鱼加基本动画（眼睛眨动，尾巴不停的摇摆）

11.画果实

12.大鱼吃果实、大鱼喂小鱼

13.特效（大鱼吃果实产生白色涟漪，大鱼喂小鱼产生橙色涟漪）

14.游戏分值计算和小鱼生命值判断

15.游戏开始前的处理

16.游戏结束后的处理

　　游戏演示：点击这里

　　源代码：   点击这里

　　本文是对用HTML5开发的“爱心鱼”游戏总结，主要涉及的知识点有：HTML5 canvas API、轮播序列帧动画、“物体池”、碰撞检测、JS中的Math对象、setInterval()、贝塞尔曲线、模块化开发、面向对象编程思想。

页面搭建