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

No:2054

2175

←

Prev Next

→

Outer Space Simulator
Developer User3025｜Date and time 23/6/19 22:48:09
Build time 71.897 sec｜Game capacity 5.333KB｜

Script

宇宙空間シミュレーター

宇宙空間シミュレーターは、宇宙船を操作してアステロイドとの衝突を回避するゲームです。スマホで操作する場合は、画面をタッチして方向を指定します。宇宙船を操作するには、左右キー（←→）または上下キー（↑↓）を使用します。アステロイドの数は10個、サイズは50です。衝突すると「ゲームオーバー！」とアラートが表示されます。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>宇宙空間シミュレーター</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css">
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>宇宙空間シミュレーター</h1>
	<canvas id="gameCanvas"></canvas>
	<script type="text/javascript">
		const canvas = document.getElementById("gameCanvas");
		const ctx = canvas.getContext("2d");

// 宇宙船の初期値
		let spaceshipX = canvas.width/2;
		let spaceshipY = canvas.height/2;
		let spaceshipSpeed = 5;

// 絵文字画像
		const spaceshipImg = document.createElement("img");
		spaceshipImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/flying-saucer_1f6f8.png";
		const asteroidImg = document.createElement("img");
		asteroidImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/meteor_2604.png";

// アステロイド
		let asteroidPositions = [];
		const asteroidNum = 10;
		const asteroidSize = 50;

for (let i = 0; i < asteroidNum; i++) {
			const asteroidX = Math.random() * canvas.width;
			const asteroidY = Math.random() * canvas.height;
			asteroidPositions.push({x: asteroidX, y: asteroidY});
		}

// ゲームループ
		function gameLoop() {
			ctx.clearRect(0,0,canvas.width,canvas.height);
			drawSpaceship();
			moveSpaceship();
			drawAsteroids();
			collisionDetection();
			requestAnimationFrame(gameLoop);
		}

// 宇宙船描画
		function drawSpaceship() {
			ctx.drawImage(spaceshipImg, spaceshipX, spaceshipY, 50, 50);
		}

// 宇宙船移動
		function moveSpaceship() {
			if (keydown.left) {
				spaceshipX -= spaceshipSpeed;
			}
			if (keydown.right) {
				spaceshipX += spaceshipSpeed;
			}
			if (keydown.up) {
				spaceshipY -= spaceshipSpeed;
			}
			if (keydown.down) {
				spaceshipY += spaceshipSpeed;
			}
			// 画面外に出たら反対側から出る
			if (spaceshipX > canvas.width) {
				spaceshipX = 0;
			}
			if (spaceshipX < 0) {
				spaceshipX = canvas.width;
			}
			if (spaceshipY > canvas.height) {
				spaceshipY = 0;
			}
			if (spaceshipY < 0) {
				spaceshipY = canvas.height;
			}
		}

// アステロイド描画
		function drawAsteroids() {
			for (let i = 0; i < asteroidNum; i++) {
				ctx.drawImage(asteroidImg, asteroidPositions[i].x, asteroidPositions[i].y, asteroidSize, asteroidSize);
			}
		}

// 衝突判定
		function collisionDetection() {
			for (let i = 0; i < asteroidNum; i++) {
				const dx = spaceshipX - asteroidPositions[i].x;
				const dy = spaceshipY - asteroidPositions[i].y;
				const distance = Math.sqrt(dx*dx + dy*dy);
				if (distance < 50) {
					alert("ゲームオーバー！");
				}
			}
		}

// スマホ対応
		let touchX = null;
		let touchY = null;
		canvas.addEventListener("touchstart", function(e) {
			touchX = e.touches[0].clientX;
			touchY = e.touches[0].clientY;
			e.preventDefault();
		}, false);
		canvas.addEventListener("touchmove", function(e) {
			if (touchX === null || touchY === null) {
				return;
			}
			const newX = e.touches[0].clientX;
			const newY = e.touches[0].clientY;
			const diffX = touchX - newX;
			const diffY = touchY - newY;
			if (Math.abs(diffX) > Math.abs(diffY)) {
				// 横移動
				if (diffX > 0) {
					keydown.left = true;
					keydown.right = false;
				} else {
					keydown.left = false;
					keydown.right = true;
				}
			} else {
				// 縦移動
				if (diffY > 0) {
					keydown.up = true;
					keydown.down = false;
				} else {
					keydown.up = false;
					keydown.down = true;
				}
			}
			touchX = newX;
			touchY = newY;
			e.preventDefault();
		}, false);
		canvas.addEventListener("touchend", function(e) {
			touchX = null;
			touchY = null;
			keydown.up = false;
			keydown.down = false;
			keydown.left = false;
			keydown.right = false;
			e.preventDefault();
		}, false);

// キーボード対応
		const keydown = {};
		document.addEventListener("keydown", function(e) {
			if (e.keyCode === 37) { // left arrow
				keydown.left = true;
				keydown.right = false;
			}
			if (e.keyCode === 38) { // up arrow
				keydown.up = true;
				keydown.down = false;
			}
			if (e.keyCode === 39) { // right arrow
				keydown.left = false;
				keydown.right = true;
			}
			if (e.keyCode === 40) { // down arrow
				keydown.up = false;
				keydown.down = true;
			}
			e.preventDefault();
		}, false);
		document.addEventListener("keyup", function(e) {
			if (e.keyCode === 37) { // left arrow
				keydown.left = false;
			}
			if (e.keyCode === 38) { // up arrow
				keydown.up = false;
			}
			if (e.keyCode === 39) { // right arrow
				keydown.right = false;
			}
			if (e.keyCode === 40) { // down arrow
				keydown.down = false;
			}
			e.preventDefault();
		}, false);

gameLoop();
	</script>
</body>
</html>

<strong>宇宙空間シミュレーター</strong>は、宇宙船を操作してアステロイドとの衝突を回避するゲームです。スマホで操作する場合は、画面をタッチして方向を指定します。宇宙船を操作するには、左右キー（←→）または上下キー（↑↓）を使用します。アステロイドの数は10個、サイズは50です。衝突すると「ゲームオーバー！」とアラートが表示されます。