Click here for free DL of the app version that can save data.

No:472

172

←

Prev Next

→

Shot
Developer User3044｜Date and time 23/6/14 19:39:49
Build time 49.372 sec｜Game capacity 3.285KB｜

Script

射的ゲーム

矢印キーで狙いを定め、スペースキーで射的をするゲームです。

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>射的ゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			border: 2px solid black;
		}
	</style>
</head>
<body>
	<h1>射的ゲーム</h1>
	<p>矢印キーで狙いを定め、スペースキーで射的をするゲームです。</p>
	<canvas id="target" width="300" height="200"></canvas>
	<script>
		// ゲームオブジェクトの定義
		var game = {
			score: 0,
			startTime: 0,
			endTime: 0,
			duration: 30, // in seconds
			canvas: document.getElementById("target"),
			ctx: document.getElementById("target").getContext("2d"),
			target: {
				radius: 20,
				x: 0,
				y: 0
			},
			arrow: {
				x: 0,
				y: 0
			},
			drawTarget: function() {
				this.ctx.beginPath();
				this.ctx.arc(this.target.x, this.target.y, this.target.radius, 0, 2 * Math.PI);
				this.ctx.fillStyle = "#FF0000";
				this.ctx.fill();
				this.ctx.closePath();
			},
			drawArrow: function() {
				this.ctx.beginPath();
				this.ctx.moveTo(this.arrow.x, this.arrow.y);
				this.ctx.lineTo(this.target.x, this.target.y);
				this.ctx.strokeStyle = "#000000";
				this.ctx.stroke();
				this.ctx.closePath();
			},
			updateScore: function() {
				this.score++;
				document.getElementById("score").innerHTML = this.score;
			}
		};

// キーイベントのリスナーの定義
		window.addEventListener("keydown", function(event){
			switch (event.keyCode) {
				case 37: // 左矢印
					if (game.arrow.x > 0) game.arrow.x -= 5;
					break;
				case 38: // 上矢印
					if (game.arrow.y > 0) game.arrow.y -= 5;
					break;
				case 39: // 右矢印
					if (game.arrow.x < game.canvas.width) game.arrow.x += 5;
					break;
				case 40: // 下矢印
					if (game.arrow.y < game.canvas.height) game.arrow.y += 5;
					break;
				case 32: // スペース
					var distance = Math.sqrt(Math.pow(game.arrow.x - game.target.x, 2) + Math.pow(game.arrow.y - game.target.y, 2));
					if (distance < game.target.radius) {
						// ターゲットに当たった場合
						game.updateScore();
						game.target.x = Math.floor(Math.random() * game.canvas.width);
						game.target.y = Math.floor(Math.random() * game.canvas.height);
						game.arrow.x = game.canvas.width / 2;
						game.arrow.y = game.canvas.height;
					}
					break;
			}
		}, false);

// ゲームの初期化
		game.target.x = Math.floor(Math.random() * game.canvas.width);
		game.target.y = Math.floor(Math.random() * game.canvas.height);
		game.arrow.x = game.canvas.width / 2;
		game.arrow.y = game.canvas.height;

// ゲームループの定義
		function loop() {
			var currentTime = new Date().getTime();
			if (game.startTime == 0) game.startTime = currentTime;
			if (currentTime - game.startTime >= game.duration * 1000) {
				// ゲーム終了
				game.endTime = currentTime;
				alert("Game over! Your score is " + game.score + ".");
			} else {
				// 描画
				game.ctx.clearRect(0, 0, game.canvas.width, game.canvas.height);
				game.drawTarget();
				game.drawArrow();
				// 次のループ
				window.requestAnimationFrame(loop);
			}
		}

// ゲームループの開始
		window.requestAnimationFrame(loop);
	</script>
	<p>Score: <span id="score">0</span></p>
</body>
</html>