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

No:1991

1460

←

Prev Next

→

Shooting and defeating the enemy with a gun
Developer User3455｜Date and time 23/6/19 16:50:45
Build time 32.337 sec｜Game capacity 2.372KB｜

Script

敵を倒せ！

このゲームは、敵の位置がランダムに変化し、銃で敵を倒すことでスコアが加算されます。スマホでの操作も可能で、画面内をタップすることで銃の発砲ができます。また、絵文字を多めに使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<html>
<head>
	<title>敵を倒せ！</title>
	<style>
		canvas { 
			border: 1px solid black;
			display: block;
			margin: auto;
		}
	</style>
</head>
<body>
	<h1>敵を倒せ！</h1>
	<canvas id="gameCanvas" width="400" height="400"></canvas>

// 敵の初期表示位置
		var enemyX = Math.random() * canvas.width;
		var enemyY = Math.random() * canvas.height;

// 銃の初期表示位置
		var gunX = canvas.width / 2;
		var gunY = canvas.height * 0.9;

// 銃の移動
		canvas.addEventListener('mousemove', function(event) {
			gunX = event.clientX - canvas.offsetLeft;
		});

// 銃の発砲
		var isFiring = false;
		canvas.addEventListener('mousedown', function(event) {
			isFiring = true;
		});
		canvas.addEventListener('mouseup', function(event) {
			isFiring = false;
		});

// スコアの初期値
		var score = 0;

// メインループ
		function mainLoop() {
			// 背景の描画
			context.fillStyle = "#eeeeee";
			context.fillRect(0, 0, canvas.width, canvas.height);

// 敵の描画
			context.fillStyle = "#ff0000";
			context.beginPath();
			context.arc(enemyX, enemyY, 10, 0, 2 * Math.PI);
			context.fill();

// 銃の描画
			context.fillStyle = "#000000";
			context.beginPath();
			context.moveTo(gunX - 10, gunY);
			context.lineTo(gunX + 10, gunY);
			context.lineTo(gunX, gunY - 20);
			context.closePath();
			context.fill();

// 銃の発砲判定
			if (isFiring) {
				var distance = Math.sqrt((gunX - enemyX) * (gunX - enemyX) + (gunY - enemyY) * (gunY - enemyY));
				if (distance < 30) {
					score ++;
					enemyX = Math.random() * canvas.width;
					enemyY = Math.random() * canvas.height;
				}
			}

// スコアの描画
			context.fillStyle = "#000000";
			context.font = "20px Arial";
			context.fillText("Score: " + score, 10, 30);

// メインループ再帰
			requestAnimationFrame(mainLoop);
		}

// メインループの実行
		mainLoop();
	</script>
</body>
</html>