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

No:2307

10429

←

Prev Next

→

A top-down 2D action player is a "brave". There ar..ALL
Developer anonymous｜Date and time 70/1/1 11:00:35
Build time unknown sec｜Game capacity 7.235KB｜

Script

以下のようなプログラムで実装できます。絵文字を多く使用しており、It can be implemented with the following program. It uses many pictograms and

It can also be operated with a smartphone.

勇者の冒険 0

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

以下のようなプログラムで実装できます。絵文字を多く使用しており、スマホでも操作可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>勇者の冒険</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #fff;
			color: #000;
			text-align: center;
		}
		
		#canvas {
			border: 2px solid #000;
			background-color: #ccc;
		}

h1 {
			padding-top: 50px;
		}

p {
			padding-top: 20px;
		}

button {
			background-color: #f44336;
			color: #fff;
			border: none;
			padding: 10px 20px;
			margin-top: 50px;
			font-size: 24px;
		}

button:hover {
			background-color: #d32f2f;
		}
	</style>
</head>
<body>
	<h1>勇者の冒険</h1>
	<p>スコア: <span id="score">0</span></p>
	<canvas id="canvas" width="320" height="480"></canvas>
	<button id="start-btn">スタート</button>
	
	<script>
		// キャンバスの設定
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');

// 勇者の設定
		const hero = {
			x: canvas.width / 2,
			y: canvas.height - 50,
			width: 32,
			height: 48,
			speed: 5,
			hp: 3,
			active: false
		};

// 敵の設定
		const enemies = [];
		const enemySpeed = 2;
		const enemyBulletSpeed = 5;
		const enemyBulletInterval = 50;

// 弾丸の設定
		const heroBullets = [];
		const bulletSpeed = 10;
		const bulletInterval = 10;

// スコアの設定
		let score = 0;

// ゲームオーバーの設定
		let isGameOver = false;

// オーディオの設定
		const bgm = new Audio('bgm.mp3');
		const hit = new Audio('hit.mp3');
		const gameOver = new Audio('gameover.mp3');

// キーコード
		const LEFT_KEY = 37;
		const RIGHT_KEY = 39;
		const SPACE_KEY = 32;

// キープレスの設定
		const keyPress = {};

// キーイベント処理
		document.addEventListener('keydown', event => {
			keyPress[event.keyCode] = true;
		});

document.addEventListener('keyup', event => {
			keyPress[event.keyCode] = false;
		});

// ゲーム開始画面の描画
		function drawStartScreen() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.font = '48px serif';
			ctx.fillText('勇者の冒険', 40, 150);
			ctx.font = '24px serif';
			ctx.fillText('スペースキーでスタート', 60, 250);
		}

// 勇者の描画
		function drawHero() {
			ctx.fillStyle = '#f44336';
			ctx.fillRect(hero.x, hero.y, hero.width, hero.height);
		}

// 敵の描画
		function drawEnemies() {
			ctx.fillStyle = '#000';
			enemies.forEach(enemy => {
				ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
			});
		}

// 弾丸の描画
		function drawHeroBullets() {
			ctx.fillStyle = '#ffeb3b';
			heroBullets.forEach(bullet => {
				ctx.fillRect(bullet.x, bullet.y, 4, 8);
			});
		}

// スコアの描画
		function drawScore() {
			ctx.font = '24px serif';
			ctx.fillStyle = '#000';
			ctx.fillText(`スコア: ${score}`, 10, 30);
		}

// 勇者の移動処理
		function moveHero() {
			if (keyPress[LEFT_KEY] && hero.x > 0) {
				hero.x -= hero.speed;
			}
			if (keyPress[RIGHT_KEY] && hero.x < canvas.width - hero.width) {
				hero.x += hero.speed;
			}
			if (keyPress[SPACE_KEY] && hero.active) {
				fireBullet();
			}
		}

// 敵の移動処理
		function moveEnemies() {
			enemies.forEach(enemy => {
				enemy.y += enemySpeed;
				if (enemy.y >= canvas.height) {
					gameOverScreen();
				}
			});
		}

// 敵の弾丸処理
		function moveEnemyBullet() {
			enemies.forEach(enemy => {
				if (enemy.active && Math.floor(Math.random() * enemyBulletInterval) === 0) {
					enemyBullets.push({
						x: enemy.x + enemy.width / 2 - 2,
						y: enemy.y + enemy.height + 5,
						speed: enemyBulletSpeed
					});
				}
			});
			enemyBullets.forEach(bullet => {
				bullet.y += bullet.speed;
			});
		}

// 勇者の弾丸処理
		function moveHeroBullets() {
			heroBullets.forEach((bullet, bulletIndex) => {
				bullet.y -= bulletSpeed;
				if (bullet.y < 0) {
					heroBullets.splice(bulletIndex, 1);
				}
			});
		}

// 衝突判定
		function detectCollision() {
			enemies.forEach((enemy, enemyIndex) => {
				if (enemy.active) {
					if (hero.x < enemy.x + enemy.width &&
						hero.x + hero.width > enemy.x &&
						hero.y < enemy.y + enemy.height &&
						hero.y + hero.height > enemy.y) {
						hero.hp--;
						if (hero.hp <= 0) {
							gameOverScreen();
						}
						enemy.active = false;
						hit.play();
					}
					heroBullets.forEach((bullet, bulletIndex) => {
						if (bullet.x < enemy.x + enemy.width &&
							bullet.x + 4 > enemy.x &&
							bullet.y < enemy.y + enemy.height &&
							bullet.y + 8 > enemy.y) {
							heroBullets.splice(bulletIndex, 1);
							enemy.active = false;
							score++;
							hit.play();
						}
					});
				}
			});
			enemyBullets.forEach((bullet, bulletIndex) => {
				if (bullet.x < hero.x + hero.width &&
					bullet.x + 4 > hero.x &&
					bullet.y < hero.y + hero.height &&
					bullet.y + 8 > hero.y) {
					enemyBullets.splice(bulletIndex, 1);
					hero.hp--;
					if (hero.hp <= 0) {
						gameOverScreen();
					}
					hit.play();
				}
			});
		}

// 勇者の弾丸発射
		function fireBullet() {
			heroBullets.push({
				x: hero.x + hero.width / 2 - 2,
				y: hero.y,
				speed: bulletSpeed
			});
			hero.active = false;
			setTimeout(() => {
				hero.active = true;
			}, bulletInterval);
		}

// 敵の生成
		function generateEnemies() {
			if (enemies.length === 0) {
				enemies.push({
					x: Math.random() * (canvas.width - 32),
					y: -32,
					width: 32,
					height: 32,
					active: true
				});
			}
		}

// ゲームオーバー画面の描画
		function gameOverScreen() {
			isGameOver = true;
			bgm.pause();
			gameOver.play();
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.font = '48px serif';
			ctx.fillText('ゲームオーバー', 40, 150);
			ctx.font = '24px serif';
			ctx.fillText(`スコア: ${score}`, 90, 250);
			ctx.fillText('リトライ', 120, 350);
			canvas.addEventListener('click', event => {
				const rect = canvas.getBoundingClientRect();
				const clickX = event.clientX - rect.left;
				const clickY = event.clientY - rect.top;
				if (clickX >= 120 && clickX <= 200 && clickY >= 350 && clickY <= 380) {
					location.reload();
				}
			});
		}

// ゲームループ
		function gameLoop() {
			if (!isGameOver) {
				requestAnimationFrame(gameLoop);
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				if (!hero.active) {
					ctx.fillStyle = '#ccc';
					ctx.fillRect(hero.x, hero.y, hero.width, hero.height);
					ctx.fillStyle = '#fff';
					ctx.fillText('FIRE!', hero.x + 8, hero.y + hero.height / 2 + 8);
				}
				drawHero();
				drawEnemies();
				drawHeroBullets();
				drawScore();
				moveHero();
				moveEnemies();
				moveHeroBullets();
				detectCollision();
				generateEnemies();
				moveEnemyBullet();
				ctx.save();
			} else {
				gameOverScreen();
			}
		}

// ゲーム開始
		drawStartScreen();
		canvas.addEventListener('click', event => {
			if (event.keyCode === SPACE_KEY) {
				bgm.play();
				gameLoop();
			}
			if (event.target.id === 'start-btn') {
				bgm.play();
				gameLoop();
			}
		});
	</script>
</body>
</html>