STG games like Touhou Project's game

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

No:1406

182

←

Prev Next

→

STG games like Touhou Project
Developer ゲーミングパンダ｜Date and time 23/6/18 14:07:04
Build time 39.959 sec｜Game capacity 3.557KB｜

Script

を作成しました。

Score: 0

このゲームは、プレイヤーが自機を操作し、敵の弾や敵本体を避けながら敵を撃破するシューティングゲームです。プレイヤーが敵の弾に当たるか、敵本体と接触するとゲームオーバーとなります。スマホでもキーボードではなく画面上で操作できます。絵文字を使ってキャラクターを表現しています。

←

Prev　Next

→ 　

Back　

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

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

を作成しました。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Touhou STG Game</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>
	<div id="score">Score: 0</div>
	
	<script>
		// キャンバスの初期化
		let canvas = document.getElementById("gameCanvas");
		canvas.width = window.innerWidth * 0.8;
		canvas.height = window.innerHeight * 0.8;
		let ctx = canvas.getContext("2d");
		
		// スコアの初期化
		let score = 0;
		let scoreDisplay = document.getElementById("score");
		
		// キャラクターの初期化
		let player = {
			x: canvas.width / 2,
			y: canvas.height - 50,
			radius: 10,
			color: "blue"
		};
		
		let bullets = [];
		let enemies = [];
		
		// ユーザーの操作
		document.addEventListener("keydown", function(event) {
			if(event.keyCode == 37 && player.x > player.radius) {
				player.x -= 10;
			} else if(event.keyCode == 39 && player.x < canvas.width - player.radius) {
				player.x += 10;
			} else if(event.keyCode == 32) {
				fireBullet();
			}
		});
		
		// 弾の発射
		function fireBullet() {
			let bullet = {
				x: player.x,
				y: player.y - player.radius,
				radius: 5,
				color: "red",
				speed: -10
			};
			bullets.push(bullet);
		}
		
		// 敵の作成
		function createEnemy() {
			let enemy = {
				x: Math.random() * canvas.width,
				y: -20,
				radius: 10,
				color: "green",
				speed: Math.random() * 5
			};
			enemies.push(enemy);
			setTimeout(createEnemy, Math.random() * 3000);
		}
		createEnemy();
		
		// ゲームループ
		function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			// 自機の描画
			ctx.beginPath();
			ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
			ctx.fillStyle = player.color;
			ctx.fill();
			
			// 弾の描画と当たり判定
			for(let i = 0; i < bullets.length; i++) {
				let bullet = bullets[i];
				ctx.beginPath();
				ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
				ctx.fillStyle = bullet.color;
				ctx.fill();
				
				bullet.y += bullet.speed;
				
				// 敵との当たり判定
				for(let j = 0; j < enemies.length; j++) {
					let enemy = enemies[j];
					let dx = bullet.x - enemy.x;
					let dy = bullet.y - enemy.y;
					let distance = Math.sqrt(dx*dx + dy*dy);
					if(distance < bullet.radius + enemy.radius) {
						bullets.splice(i, 1);
						enemies.splice(j, 1);
						score += 10;
						scoreDisplay.innerHTML = "Score: " + score;
						break;
					}
				}
			}
			
			// 敵の描画と当たり判定
			for(let i = 0; i < enemies.length; i++) {
				let enemy = enemies[i];
				ctx.beginPath();
				ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
				ctx.fillStyle = enemy.color;
				ctx.fill();
				
				enemy.y += enemy.speed;
				
				let dx = player.x - enemy.x;
				let dy = player.y - enemy.y;
				let distance = Math.sqrt(dx*dx + dy*dy);
				if(distance < player.radius + enemy.radius) {
					alert("Game Over!");
					location.reload();
				}
			}
			
			window.requestAnimationFrame(gameLoop);
		}
		gameLoop();
	</script>
</body>
</html>