金髪DEV

最近はモバイルアプリの企画・開発に携わっていたりします

Canvasでモノを落っことしたらバウンドするみたいな感じ。

世間で流行っているFlappy Bird的なものをHTML5で作ろうとしたら
意外と動きがうまくつけられなくて「シュン…」となり
落下速度の感じがうまくいかないんだなーと思ったので
まずはモノが落ちる感じをリアルに表現してみたくなり書いてみました。

box2d.jsとか使えば簡単にできるのかな。まだ使ったことないです。

HTML(index.html)

<!doctype html>
<html lang="ja-JP">
<head>
	<meta charset="UTF-8">
</head>
<body style="background:#666">
<canvas id="myCanvas" width=320 height=320></canvas>
<script src="flappy.js"></script>
</body>
</html>


JavaScript(bound.js)

//鳥オブジェクト
var tori = {
	x:135,
	y:30,
	w:50,
	h:50
};

//移動速度
var vx,vy;
//現在時間、経過時間、前回の時間
var ct,dt,prevtime;
//加速度
var ga = 2000;
//固さ
var hardness = 8;

//クリックを許可する
var clickFlg = true;
var start = false;

window.onload = function(){
	canvas = document.getElementById("myCanvas");
	ctx = canvas.getContext("2d");

	ctx.fillStyle = "skyblue";
	ctx.fillRect(0,0,640,960);
	ctx.fillStyle = "brown";
	ctx.fillRect(0,300,320,20);
	toriDraw(tori.x,tori.y,tori.w,tori.h);
	vx = 0;
	vy = 0;

	canvas.addEventListener("mousedown",function(){
		if(clickFlg == true){
			clickFlg = false;
			prevtime = (new Date()).getTime();
			setInterval(function(){
			ct = (new Date()).getTime();
			dt = ct - prevtime;
			vy += ga*dt/1000;
			tori.y += vy*dt/1000;
			if( tori.y+tori.h > 300 ){
				tori.y = 300-tori.h;
				vy = -vy*hardness/10;
			}else if( tori.y < 0 ){
				tori.y = 0;
				vy = -vy;
			}
			ctx.fillStyle = "skyblue";
			ctx.fillRect(0,0,320,300);
			toriDraw(tori.x,tori.y,tori.w,tori.h);
			prevtime = ct;
			console.log("ct:"+ct+" dt:"+dt+" prevtime:"+prevtime+" vy:"+vy+" tori.y:"+tori.y);
		},30);
	}
	})

}

function toriDraw(x,y,w,h){
	ctx.fillStyle = "black";
	ctx.fillRect(x,y,w,h);
}


こんな感じになりました。

次はクリックしたらジャンプできるようにしよう。