网页游戏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.οnlοad=game;//初始化游戏

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

function init () {
        can1=document.getElementById('canvas1');//fishes,dust,UI,circle
	can2=document.getElementById('canvas2');//background,ane,fruits
	cxt1=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 point
	this.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. 其他--设计到游戏策划

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