WebゲームHTML 5-愛の魚の実現過程

4080 ワード

先端関連

github: https://github.com/miyiyiy/tinyHeart
1.ページ結果の作成と背景の描画

全体的なフレームワークの構築
id='allcanvas'内に2つのキャンバスが作成され、ラベルはHTML 5の新しいラベルです.
canvasごとに背景パターンとアニメーションパターンを描きます.
var can 1,can 2//2キャンバス
var ctx 1,ctx 2//2枚のブラシ
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

ここで静的なヒマワリを描くことに成功しました.次に、ベッセル曲線を使用してヒマワリを描画するアニメーションには、3つの点根点、制御点と終点があり、根点と制御点は変わらず、終点は変化し、正弦波で変化する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

3.果実の描画
無から有へ速度が違う
2つの状態:アクティブ、非アクティブ
果実:大きくなってから成熟してからヒマワリから落ちるまで.果実の個数範囲は、ヒマワリが占有されているかどうかを判断し、占有されていると、果実は成長しない.
果実はヒマワリに従って揺れる.
成長ヒマワリのIDを記録し、成長過程における果実位置はヒマワリのheadxとheady値である.
コードはgithubの上を参照
4.大きな魚の描画
体、しっぽ、目を描く
使用するAPI:translate()rotate(); Math.atan 2(y,x)/どうせ切って、PIから-PIまで;
大きな魚の状態は7種類あり、マウスに合わせて移動します
大きな魚と果実の間に衝突検出が必要:大きな魚と果実の距離を検出し、距離が近い場合、果実が食べられ、すなわち果実が消える
cxt1.clearRect(0,0,canWidth,canHeight);//パネルをクリアし、大きな魚や小さな魚は繰り返し描きません
5.小魚の描画
小さな魚の絵は大きな魚に似ている.
6.浮遊物
ランダムに生成し、透明度を設定し、海藻のように揺れます.
7.その他--ゲームの企画にデザインする
大きい魚は小さい魚に特効の大きい魚の小さい魚はしっぽを振って大きい魚の小さい魚はまばたきして大きい魚の小さい魚の体は白くなりますゲームの点数の計算

AngularJSエッセイday 1

ACMclubソートシーケンスの決定