K8凯时国际官方网站H5游戏开发h5游戏网站源码HTML5+Canvas实现酷炫 返回列表

　　首先，一个游戏最重要的就是动画，怎么让元素动起来呢？一帧一帧的来渲染这个元素，而且这个元素每一帧的位置都不一样，我们的眼睛看到的就是动画了。OK，先来介绍requestAnimationFrame这个函数。

　　简单举个例子吧：setInterval(myFun,1);意思是隔一毫秒执行一个myFun函数，但是这样就有一个问题了，比如我myFun函数里面绘制的东西比较耗时，而1ms之内还没有完全绘制出来，但是这段代码强制1ms之后又开始绘制下一帧了，所以就会出现丢帧的问题，而如果时间设置太长，就会出现视觉卡顿的问题。

　　requestAnimationFrame(myFun);如果我们这样写，又是什么意思呢？意思是根据一定的时间间隔，会自动执行myFun函数来进行绘制。这个”一定的时间间隔”就是根据浏览器的性能或者网速快慢来决定了，总之，它会保证你绘制完这一帧，才会绘制下一帧，保证性能的同时，也保证动画的流畅。

　　下面我们就开始绘制游戏中出现的东西，顺便看看都用到了哪些有趣的API函数。go！go！go！

　　背景是一张图，而海葵是一个类，它有x坐标，y坐标，个数等等属性，有初始化init和draw方法。

　　果实也是一个类，他的属性有：坐标、类型（和蓝色）、大小、状态（显示还是隐藏）、速度（向上漂浮的速度）等等属性；他的方法有：初始化init、出生born和绘制draw。

　　大鱼和小鱼都是一个类，它的属性有：坐标、旋转角度、尾巴摆动时间间隔、眨眼睛时间间隔、身体图片数组….等等

　　lerpAngle用来计算大鱼每一帧向鼠标旋转的角度。定义这两个函数，让大鱼动起来比较平滑。

　　绘制小鱼跟大鱼是一样的，不做详述。但是需要注意的是绘制小鱼的时候有个判断，当小鱼的颜色变白的时候，游戏结束。

　　大鱼吃果实是根据距离来判断定的，如果大鱼和果实的距离小于30，则让果实消失，并且出现白色圆环，并且分值有一定的变化。

　　首先，k8凯发官方app下载我们定义一个waveObject类，它的属性有：坐标、数量、半径、使用状态。它的方法有：初始化、绘制和出生。

　　一帧一帧的画每一个圆，圆的半径逐渐增大，透明度逐渐减小，直到半径大于60的时候，把状态设为false，让其回归物体池中。

　　这里又用到了一个新的方法：ctx1.arc(x,y,r,deg);//画圆，x,y是中心圆点，r是半径，deg是角度，360度就是一个整圆。

　　大鱼喂小鱼同上，不再详述，这里喂小鱼之后，大鱼身体变白，小鱼随果实数量相应增多，另外需要注意的是，此时产生圆圈的坐标是小鱼的坐标。k8凯发官方app下载

　　定义一个数据类，它的属性有：吃到的果实数量、倍数、总分、力量值、游戏状态（是否结束）等；方法有：初始化、绘制分数。