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. 其他--设计到游戏策划
大鱼喂小鱼特效
大鱼小鱼摇尾巴
大鱼小鱼眨眼睛
大鱼小鱼身体变白
游戏分值计算