网页游戏HTML5--爱心鱼实现过程

github: https://github.com/miyiyiy/tinyHeart

1. 页面结果搭建和背景绘制

<div class='all_bg'>        <div id='allcanvas'><canvas id='canvas1' width="800" height="600"></canvas><canvas id='canvas2' width="800" height="600"></canvas></div></div>

建立整体的框架结构

在id='allcanvas'内建立两个画布<canvas>,<canvas> 标签是 HTML 5 中的新标签。

连个canvas分别画背景图案和动画图案。

var can1,can2//两个画布

var ctx1,ctx2//两个画笔

利用z-index来定义画布的前后

document.body.onload=game;//初始化游戏

function game () {init();lastTime=Date.now();//上次时间deltaTime=0;//时间间隔gameloop();//刷新界面}

function init () {        can1=document.getElementById('canvas1');//fishes,dust,UI,circlecan2=document.getElementById('canvas2');//background,ane,fruitscxt1=can1.getContext('2d');cxt2=can2.getContext('2d');canWidth=can1.width;canHeight=can1.height;}

小鱼的走动，利用位移来形成小鱼的走动，这种走动利用一帧帧的刷新

window.requestAnimFrame(gameloop);//setInterval, setTimeout刷新
配置如下：

window.requestAnimFrame = (function() {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {return window.setTimeout(callback, 1000 / 60);};})();

//时间设置

var now=Date.now();deltaTime=now-lastTime;lastTime=now;

定义背景图片并加载

var bgPic=new Image();bgPic.src='./src/background.jpg';function drawbackground () {cxt2.drawImage(bgPic,0,0,canWidth,canHeight);}

2. 绘制海葵

beginPath()、closePath()、strokeStyle()、stroke()、lineWidth()、lineCap;//绘制函数

先设置静态海葵

var aneObj=function(){this.x=[];this.y=[];this.len=[];}aneObj.prototype.num=50;aneObj.prototype.draw=function(){//beginPath,moveTo,lineTo,stroke,strokeStyle,lineWidth;//globalAlpha画板的透明度ctx2.save()//海葵的样式，透明度等等ctx2.restore();}aneObj.prototype.init=function(){        for(var i=0;i<this.num;i++)        {                this.x[i]=i*17+Math.random()*20;//间距                this.len[i]=200+Math.random()*50;        }}

在此静态的海葵就绘制成功。再然后利用贝塞尔曲线来绘制海葵的动画
有三个点根部点，控制点和终点，根部点和控制点不变、终点进行变化利用正弦进行变化
control point、start point、end point(sin)
将上述代码变化如下：

var aneObj=function () {//startpoint control point, end pointthis.rootx=[];this.headx=[];this.heady=[];this.alpha=0;//角度this.amp=[];//振幅};aneObj.prototype.num = 50;aneObj.prototype.init=function () {for(var i=0;i<this.num;++i){this.rootx[i]=i*16+Math.random()*20;this.headx[i]=this.rootx[i];this.heady[i]=canHeight-(200+Math.random()*50);this.amp[i]=Math.random()*50+50;}};aneObj.prototype.draw=function () {this.alpha+=deltaTime*0.0008;//var l=Math.sin(this.alpha);cxt2.save();cxt2.globalAlpha=0.6;cxt2.lineWidth=20;cxt2.lineCap='round';cxt2.strokeStyle='#3b154e';for(var i=0;i<this.num;++i){cxt2.beginPath();cxt2.moveTo(this.rootx[i],canHeight);this.headx[i]=this.rootx[i]+l*this.amp[i];//当前海葵的头部坐标cxt2.quadraticCurveTo(this.rootx[i],canHeight-100,this.headx[i],this.heady[i]);cxt2.stroke();}cxt2.restore();};

3.果实绘制
从无到有，速度有所不同
两种状态：活跃、不活跃
果实：从长大到成熟再到从海葵上脱落。果实个数范围，判断海葵是否被占用，被占用，就不会再增长果实。
果实随着海葵摆动。
记录生长海葵的ID，成长过程中的果实位置为海葵的headx和heady值
代码见github上面


4.大鱼绘制
画身子，尾巴，眼睛
使用的API： translate(); rotate(); Math.atan2(y,x)//反正切，PI到-PI;
大鱼的状态有7种，并随鼠标移动
大鱼和果实之间需要碰撞检测：检测大鱼和果实的距离，距离很近时，果实被吃掉，即果实消失


cxt1.clearRect(0,0,canWidth,canHeight);//清除画板，大鱼和小鱼不重复画


5.小鱼绘制
小鱼的绘制与大鱼类似


6. 漂浮物

随机生成，并设置透明度，并随海藻一样进行摆动

7. 其他--设计到游戏策划

大鱼喂小鱼特效
大鱼小鱼摇尾巴
大鱼小鱼眨眼睛
大鱼小鱼身体变白
游戏分值计算