Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
A top-down 2D action player is a "brave". There are "heroes" and "enemies" on the screen. By moving the "Hero" with the four-way controller and pressing the SPACE key, the "Hero" can \"attack\". When attacking, the "enemy" in front of the "hero" disappears leaving an effect, and a score is obtained. The enemy moves slowly, and if the "hero" touches the "enemy", the game is over. Also, the enemy is emitting barrage, and if you touch it, the game is over.'s game | AI game creator

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

No:2307

10682

←

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>