AI game creator

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

No:2088

758

←

Prev Next

→

DOOM
Developer User1006｜Date and time 23/6/20 3:30:56
Build time 54.215 sec｜Game capacity 4.001KB｜

Script

This program is designed to、It is a simple shooting game named DOOM. You control the player.、While defeating enemies moving on the screen、Score. Players can move left and right and、You can fire bullets by pressing the space key. If you hit an enemy with a bullet、One point is added to the score. When the enemy reaches the bottom of the screen、Players life will decrease. Aim for a high score by repeatedly scoring.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>DOOM</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
		}

canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas id="game"></canvas>
	<script>
		const canvas = document.getElementById("game");
		const context = canvas.getContext("2d");

const playerSize = 40;
		const enemySize = 20;
		const bulletSize = 10;

const player = {
			x: canvas.width / 2 - playerSize / 2,
			y: canvas.height - playerSize,
			speed: 10
		};

const enemies = [];
		let score = 0;

function addEnemy() {
			enemies.push({
				x: Math.random() * (canvas.width - enemySize),
				y: -enemySize,
				speed: Math.random() * 5 + 1
			})
		}

function drawPlayer() {
			context.fillStyle = "yellow";
			context.fillRect(player.x, player.y, playerSize, playerSize);
		}

function drawEnemies() {
			context.fillStyle = "red";
			enemies.forEach(enemy => {
				context.fillRect(enemy.x, enemy.y, enemySize, enemySize);
			})
		}

function moveEnemies() {
			enemies.forEach(enemy => {
				enemy.y += enemy.speed;
				if (enemy.y > canvas.height) {
					enemies.splice(enemies.indexOf(enemy), 1);
				}
			})
		}

function drawBullet(bullet) {
			context.fillStyle = "white";
			context.fillRect(bullet.x, bullet.y, bulletSize, bulletSize);
		}

function shoot() {
			bullets.push({
				x: player.x + playerSize / 2 - bulletSize / 2,
				y: player.y,
				speed: 20
			})
		}

function gameOver() {
			context.fillStyle = "black";
			context.fillRect(0, 0, canvas.width, canvas.height);
			context.font = "50px Arial";
			context.fillStyle = "red";
			context.fillText("Game Over", canvas.width / 2 - 150, canvas.height / 2 - 25);
			context.fillStyle = "white";
			context.fillText(`Score: ${score}`, canvas.width / 2 - 80, canvas.height / 2 + 50);
			clearInterval(gameLoop);
		}

function gameLoopFunc() {
			context.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
			moveEnemies();
			drawEnemies();
			moveBullets();
			if (enemies.length < 5) {
				addEnemy();
			}

enemies.forEach(enemy => {
				if (player.x + playerSize >= enemy.x && player.x <= enemy.x + enemySize &&
					player.y + playerSize >= enemy.y && player.y <= enemy.y + enemySize) {
					gameOver();
				}
			})
		}

let bullets = [];

window.addEventListener("keydown", event => {
			switch (event.code) {
				case "ArrowLeft":
					if (player.x > 0) {
						player.x -= player.speed;
					}
					break;

case "ArrowRight":
					if (player.x + playerSize < canvas.width) {
						player.x += player.speed;
					}
					break;

case "Space":
					shoot();
					break;
			}
		});

addEnemy();
		const gameLoop = setInterval(gameLoopFunc, 50);
	</script>
</body>
</html>

このプログラムは、DOOMという名前のシンプルなシューティングゲームです。プレイヤーを操作して、画面上を動く敵を倒しながら、スコアを稼ぎます。プレイヤーは左右に移動でき、スペースキーを押すことで弾を発射できます。敵に弾を当てると、スコアが1点加算されます。敵が画面下まで到達すると、プレイヤーのライフが減少します。繰り返しスコアを稼いで高得点を目指しましょう。