tinyHeart

一、项目描述
使用画布canvas绘制
二、项目过程
1、准备工作
html布局，创建画布，页面加载初始化,绘制背景background.js
2、绘制海葵ane.js
绘画直线过程beginPath()->moveTo()->lineTo()->stroke();
3、绘制果实
使用到的API：drawImage()
3.1 绘制静态果实，显示在海葵顶端
3.2 绘制动态果实（果实上浮），改变果实的y坐标可以实现上浮。
3.3 监视果实数量fruitMoint，如果果实数量小于15，就发出果实。发出果实sendFruit()的原理：每个果实都有一个状态alive=true或false。如果检测到果实是false休眠状态，就发出一个果实。
3.4 设置黄色果实和蓝色果实
4、画大鱼
使用到的API:
translate();
rotate();
Math.atan2(y,x);//得到大鱼的旋转角度
5、大鱼跟随鼠标移动
lerpDistance()大鱼趋向于鼠标
lerpAngle()大鱼趋向于与鼠标的夹角
5.1 大鱼方向不变移动
5.2 大鱼可以随着鼠标旋转移动
6、大鱼吃果实，碰撞检测
calLength();计算大鱼和果实之间的距离的平方。
原理：计算大鱼和果实之间的距离。
7、画小鱼
7.1 使小鱼随着大鱼移动
lerpDistance()
7.2 使小鱼跟着妈妈旋转
lerpAngle()
8、小鱼动画
8.1 眨眼睛
8.2 摇动尾巴
8.3 身体变色
9、大鱼喂小鱼
当大鱼碰撞到小鱼，小鱼满血，回到第一帧。
10、大鱼动画
10.1 摇动尾巴
10.2 眨眼睛
10.3 身体升级变色
每次碰撞一个食物，mom/momBodyCount++,通过序列帧来改变身体颜色。
11、游戏分值计算
12、添加特效
12.1 添加大鱼吃食物的圈圈特效wave.js
12.2 添加大鱼喂食小鱼的圈圈特效halo.js
13、海葵摆动
实时绘制的方法。
二次贝塞尔曲线+正弦函数
14、果实在成长过程中随海葵摆动
15、 漂浮物
三、遇到的问题
1、z-index:1;
css样式z-index设置元素的堆叠顺序。值大的显示在值小的前面。
2、requestAnimFrame();根据机器的性能来指定间隔多长时间会指向下一帧，智能计算。有一个现象就是会导致会有一个动态的fps（frame per second）。不同的浏览器需要配置。
3、背景图片显示不出来的原因：
a.在gameloop()函数中没有调用绘制背景函数drawBackground();
b.图片路径有问题
c.检查变量名是否都对
4、benginPath()：开始路径，没有参数，表示要开始画路径了。
closePath():形成一个闭合的路径
strokeStyle="颜色参数值"
stroke():绘制定义的路径，只有有这个接口，才能绘画出来
lineWidth：返回当前线条的宽度
lineCap：设置结束端样式
globalAlpha:设置透明度
总结：一条线段的完整画法必要步骤：
beginPath->moveTo()->lineTo()->stroke()
5、ctx2.save();
ctx2.restore();
这两个API的作用是在它俩之间的样式只在它俩之间起作用。出了它俩之间，其它样式是会恢复的。
6、绘制大鱼时，translate()
当传入参数translat（x,y)时，就相当于把(x,y)当作(0,0)点。
7、鼠标监听e.offsetX,e.layerX
8、运行后，长时间不去处理，果实会变得很大。
原因是果实长大是与deltaTime相关联，deltaTime是两帧之间的时间。可以规定一下，当两帧的时间差大于40的时候，就使deltaTime=40;这样就没有果实变得巨大这种诡异的事情出现了。
9、小鱼的眼睛看不到了
ctx1.drawImage();画出的效果和执行先后有关，先执行的在下面，后执行的在上面。
10、海葵摆动，添加二次贝塞尔曲线后，海葵不出现了。
答：原因可能是：
(1)代码没有写对，我遇到的错误是Math.random()没有写括号。
11、海葵出现了，在Myeclipse中可以刷新出小鱼、果实等，在浏览器里不可以。
答：因为海葵行坐标变为了headx[i],海葵头部的纵坐标变为了heady[i],所以要修改对应的果实出生坐标。在fruit.js中把原本的this.x[i]=ane.x[aneID]改为this.x[i]=ane.headx[anexID],纵坐标也要有相应的修改。奇葩的是，我只把x改为了headx，括号没动，浏览器就刷新不出来果实和小鱼了，把[aneID]删掉重新写一遍，就可以刷新出来了。现在还非常困惑。
四、自己添加功能
1、添加暂停、开始、重新开始按钮
2、给游戏添加背景音乐
3、文件title左边设置一个小图标

titleFish.png

  <link rel="icon" href="pic.ico" type="image/x-icon"/>