JavaScript:ゆらゆらした動き

シューティングゲームなどでの敵の動きは、ただまっすぐに直進するだけでは単調だ。
sinやcosなどを使うとゆらゆらした動きが再現できる。

JavaScriptのゲームエンジンenchant.jsを使っている。

ソースコード

HTML部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>enchant.js基本03</title>
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="game.js"></script>
<style type="text/css">
	body{ margin: 0;}
</style>
</head>
<body>
</body>
</html>

JavaScript部分

// -------------------------------------------------------------------------
//  enchant.js基本03: キーボードで動かしてみる
// 					created at 2013-06-11 on MRGARITA.NET
// -------------------------------------------------------------------------
enchant();
window.onload = function(){
	var game = new Game(320, 320);
	game.rootScene.backgroundColor = "#ffcc00";
	game.fps = 30;
	game.preload("player.png");
	game.preload("teki.png");
	
	game.onload = function(){
		// プレイヤー
		var player = new Sprite(64, 64);
		player.image = game.assets["player.png"];
		player.x = player.y = 120;
		player.addEventListener("enterframe", function(){
			// キーボードによる移動
			var input = game.input;
			if(input.left) player.x -= 4;
			if(input.right) player.x += 4;
			if(input.up) player.y -= 4;
			if(input.down) player.y += 4;
			// 当たり判定
			if(player.within(teki)) game.rootScene.removeChild(player);
		});
		// 敵
		var teki = new Sprite(64, 64);
		teki.image = game.assets["teki.png"];
		teki.x = 320;
		teki.y = Math.random() * 320;
		teki.speed = 1;
		teki.addEventListener("enterframe", function(){
			teki.x -= teki.speed;
			teki.y = teki.y + 4 * Math.sin(game.frame / 10);	// ゆらゆらした動き
			if(teki.x < 0){
				teki.x = 340;
				teki.y = Math.random() * 320;
				teki.speed ++;
				if(teki.speed > 25) teki.speed = 1;
			}
		});
		game.rootScene.addChild(player);
		game.rootScene.addChild(teki);
	}
	game.start();
}

今回は、敵が画面の右から左にゆらゆらと移動するため敵のy座標の計算にsinを使っている。

teki.y = teki.y + 4 * Math.sin(game.frame / 10);

game.frameはenchant.jsでは、フレームカウント数である。

game.fps = 30;

の設定により、一秒間に30ずつgame.frameの値が増えていく。
これを利用してsinの引数にしている。game.frameを使わなくても自分でフレーム毎にカウントする変数を作るなどしてsinの引数に使えば同じように動作する。10で割ったり4を掛けたりしているのは、適当にそれらしい動きになっただけで、値を変えてみれば、大きな弧を描いたりもすると思う。わたしも数学は得意ではないので、あまり気にせずやってみることが大切なのではないかと思う。
数学が得意だから面白いゲームが作れるわけでもないし。

コメント

タイトルとURLをコピーしました