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

No:8075

4245

←

Prev Next

→

Space game that you make
Developer anonymous｜Date and time 70/1/1 10:08:16
Build time unknown sec｜Game capacity 4.096KB｜

Script

Sure! Here's a sample space game implemented as a single HTML file using JavaScript. The game is played on a smartphone and includes some pictograms for a visual experience. Simply copy the code below and save it as an HTML file to play the game.

Score: 0

This game is a simple space game where the player controls a spaceship using the left and right arrow keys on their smartphone. The objective is to avoid the asteroids (represented by 🌑) falling from the top of the screen while collecting stars (represented by ⭐) for points. The game ends if the spaceship collides with an asteroid. Note: The game loop here is implemented using `setInterval` to continuously create asteroids and move them down the screen. For more complex games, it's recommended to use more advanced game development frameworks like Phaser or PixiJS.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
	<title>Space Game</title>
</head>
<body>
	<script>
		// Pictograms
		const spaceship = "🚀";
		const asteroid = "🌑";
		const star = "⭐";

// Game logic
		let score = 0;
		let isGameOver = false;

function startGame() {
			document.getElementById("score").innerHTML = `Score: ${score}`;
			createSpaceship();
			moveSpaceship();

// Create asteroids at specific intervals
			setInterval(() => {
				if (!isGameOver) {
					createAsteroid();
				}
			}, 1000);
		}

function createSpaceship() {
			const spaceshipEl = document.createElement("div");
			spaceshipEl.innerHTML = spaceship;
			spaceshipEl.classList.add("spaceship");
			document.body.appendChild(spaceshipEl);
		}

function moveSpaceship() {
			document.addEventListener("keydown", (event) => {
				const spaceshipEl = document.querySelector(".spaceship");
				let leftPosition = spaceshipEl.offsetLeft;

if (event.key === "ArrowLeft" && leftPosition > 0) {
					spaceshipEl.style.left = `${leftPosition - 10}px`;
				} else if (event.key === "ArrowRight" && leftPosition < window.innerWidth - 40) {
					spaceshipEl.style.left = `${leftPosition + 10}px`;
				}
			});
		}

function createAsteroid() {
			const asteroidEl = document.createElement("div");
			asteroidEl.innerHTML = asteroid;
			asteroidEl.classList.add("asteroid");
			const randomPosition = Math.floor(Math.random() * window.innerWidth);
			asteroidEl.style.left = `${randomPosition}px`;
			document.body.appendChild(asteroidEl);

moveAsteroid(asteroidEl);
		}

function moveAsteroid(asteroidEl) {
			let position = 0;
			const asteroidInterval = setInterval(() => {
				position += 10;
				asteroidEl.style.top = `${position}px`;

const spaceshipEl = document.querySelector(".spaceship");
				const asteroidTop = asteroidEl.offsetTop;
				const asteroidLeft = asteroidEl.offsetLeft;
				const asteroidRight = asteroidLeft + 40;
				const spaceshipTop = spaceshipEl.offsetTop;
				const spaceshipLeft = spaceshipEl.offsetLeft;
				const spaceshipRight = spaceshipLeft + 40;

// Check collision
				if (
					spaceshipTop < asteroidTop + 40 &&
					spaceshipTop + 40 > asteroidTop &&
					spaceshipLeft < asteroidRight &&
					spaceshipRight > asteroidLeft
				) {
					clearInterval(asteroidInterval);
					gameOver();
				}

// Remove asteroid once it goes beyond the screen
				if (position > window.innerHeight) {
					clearInterval(asteroidInterval);
					score++;
					document.getElementById("score").innerHTML = `Score: ${score}`;
					asteroidEl.remove();
				}
			}, 20);
		}

function gameOver() {
			isGameOver = true;
			alert(`Game Over! Score: ${score}`);
			document.querySelector(".spaceship").remove();
			const allAsteroids = document.querySelectorAll(".asteroid");
			allAsteroids.forEach((asteroid) => asteroid.remove());
			score = 0;
			isGameOver = false;
			startGame();
		}

// Start the game
		startGame();
	</script>
	<h1 id="score" style="position: fixed; top: 10px; left: 10px;">Score: 0</h1>
	<style>
		.spaceship {
			font-size: 40px;
			position: absolute;
			bottom: 10px;
			left: 50%;
			transform: translateX(-50%);
		}

.asteroid {
			font-size: 40px;
			position: absolute;
			top: 0;
		}
	</style>
</body>
</html>
```

Note: The game loop here is implemented using `setInterval` to continuously create asteroids and move them down the screen. For more complex games, it's recommended to use more advanced game development frameworks like Phaser or PixiJS.