Soul-like, rogue-lite game in Metroidvania.'s game | AI game creator

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

No:1568

7821

Soul-like, rogue-lite game in Metroidvania.
Developer AI絵師｜Date and time 23/6/18 18:39:43
Build time 76.875 sec｜Game capacity 6.291KB｜

の実装例を提供します。以下はHTMLファイルに含まれるJavaScriptコードです。

このプログラムは、HTML5のキャンバスを使ってゲームを実装しています。プレイヤーは矩形の赤いブロックで、上下左右に移動できます。ジャンプも可能です。制御にはキーボードを使用します。モンスターは青いブロックで、自動的に移動します。アイテムは、キャンバス上にランダムに配置される心とコインの2種類があります。コインを集めるとスコアが上がります。心を集めると、ミスすると回復できます。ゲームオーバーになる条件はモンスターに当たることです。このプログラムは、スマートフォンでもプレイ可能です。画面にフィットするように、キャンバスの幅と高さを固定しています。また、リスタートボタンをクリックしてゲームをリセットできます。以上が、メトロイドヴァニア、ソウルライク、ローグライトな要素を持つHTML5ゲームの実装例です。絵文字は、特に使っていませんが、自由に追加することができます。

→ 　

2　

2　

　
　
　

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

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

(C)2023 HisashiApp

の実装例を提供します。以下はHTMLファイルに含まれるJavaScriptコードです。

```html
<!DOCTYPE html>
<html>
<head>
	<title>メトロイドヴァニア・ソウルライク・ローグライト</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body { margin: 0; font-family: Arial; }
		canvas { display: block; }
		.container { display: flex; align-items: center; justify-content: center; height: 100vh; }
		.button { padding: 10px 20px; background-color: #333; color: white; border-radius: 5px; cursor: pointer; }
		.score { position: absolute; top: 0; right: 0; padding: 10px; }
	</style>
</head>
<body>

<div class="container">
	<canvas width="512" height="512"></canvas>
</div>
<div class="score"></div>
<button class="button" onclick="restart()">リスタート</button>

<script>
	// ゲームの初期設定
	const canvas = document.querySelector('canvas');
	const ctx = canvas.getContext('2d');
	let score = 0;
	let gameOver = false;

// プレイヤーのステータス
	const player = {
		x: 50,
		y: 450,
		size: 32,
		speed: 5,
		jump: 13,
		vx: 0,
		vy: 0,
		isGrounded: false
	};

// モンスターのステータス
	const monsters = [
		{ x: 350, y: 450, size: 32, speed: 3, vx: 0, vy: 0 },
		{ x: 150, y: 350, size: 32, speed: 3, vx: 0, vy: 0 },
		{ x: 250, y: 250, size: 32, speed: 3, vx: 0, vy: 0 }
	];

// アイテムのステータス
	const items = [
		{ x: 450, y: 450, size: 32, type: 'heart' },
		{ x: 50, y: 350, size: 32, type: 'coin' },
		{ x: 400, y: 250, size: 32, type: 'heart' },
		{ x: 100, y: 150, size: 32, type: 'coin' }
	];

// キー入力の処理
	const keydownHandler = (e) => {
		if (e.code === 'ArrowLeft') {
			player.vx = -player.speed;
		} else if (e.code === 'ArrowRight') {
			player.vx = player.speed;
		}
		if (e.code === 'ArrowUp' && player.isGrounded) {
			player.vy = -player.jump;
			player.isGrounded = false;
		}
	};
	const keyupHandler = (e) => {
		if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {
			player.vx = 0;
		}
	};

// 衝突判定
	const checkCollision = (object1, object2) => {
		if (object1.x < object2.x + object2.size &&
			object1.x + object1.size > object2.x &&
			object1.y < object2.y + object2.size &&
			object1.y + object1.size > object2.y) {
			return true;
		} else {
			return false;
		}
	};

// アニメーションのループ
	const animate = () => {
		// 背景を描画
		ctx.fillStyle = '#fff';
		ctx.fillRect(0, 0, canvas.width, canvas.height);

// プレイヤーを描画
		ctx.fillStyle = '#f00';
		ctx.fillRect(player.x, player.y, player.size, player.size);

// モンスターを描画
		ctx.fillStyle = '#00f';
		monsters.forEach(monster => {
			ctx.fillRect(monster.x, monster.y, monster.size, monster.size);
		});

// アイテムを描画
		items.forEach(item => {
			if (item.type === 'coin') {
				ctx.fillStyle = '#ff0';
			} else {
				ctx.fillStyle = '#0f0';
			}
			ctx.fillRect(item.x, item.y, item.size, item.size);
		});

// スコアを表示
		ctx.fillStyle = '#000';
		ctx.font = '20px Arial';
		ctx.fillText(`Score: ${score}`, 10, 30);

// プレイヤーの移動
		player.x += player.vx;
		player.y += player.vy;
		player.vy += 0.5;

if (player.y + player.size > canvas.height) {
			player.y = canvas.height - player.size;
			player.vy = 0;
			player.isGrounded = true;
		}

if (player.x < 0) {
			player.x = 0;
		}
		if (player.x + player.size > canvas.width) {
			player.x = canvas.width - player.size;
		}

// モンスターの移動
		monsters.forEach(monster => {
			if (monster.x < 50 || monster.x + monster.size > canvas.width - 50) {
				monster.vx *= -1;
			}
			if (monster.y < 50 || monster.y + monster.size > canvas.height - 50) {
				monster.vy *= -1;
			}

monster.x += monster.vx;
			monster.y += monster.vy;

if (checkCollision(player, monster)) {
				gameOver = true;
			}
		});

// アイテムの取得
		items.forEach((item, i) => {
			if (checkCollision(player, item)) {
				if (item.type ==='coin') {
					score += 10;
				} else {
					score += 50;
				}
				items.splice(i, 1);
			}
		});

// ゲームオーバー処理
		if (gameOver) {
			ctx.globalAlpha = 0.5;
			ctx.fillStyle = '#000';
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			ctx.globalAlpha = 1;
			ctx.fillStyle = '#fff';
			ctx.font = '30px Arial';
			ctx.fillText('GAME OVER', canvas.width / 2 - 80, canvas.height / 2 - 15);
			return;
		}

requestAnimationFrame(animate);
	};

// リスタート
	const restart = () => {
		score = 0;
		gameOver = false;
		player.x = 50;
		player.y = 450;
		monsters.forEach(monster => {
			monster.vx = Math.random() * 6 - 3;
			monster.vy = Math.random() * 6 - 3;
		});
		items.forEach(item => {
			item.x = Math.random() * (canvas.width - item.size);
			item.y = Math.random() * (canvas.height - item.size);
		});
		requestAnimationFrame(animate);
	};

// イベントリスナーの設定
	document.addEventListener('keydown', keydownHandler);
	document.addEventListener('keyup', keyupHandler);

// ゲームを始める
	restart();
</script>

</body>
</html>
```

このプログラムは、HTML5のキャンバスを使ってゲームを実装しています。プレイヤーは矩形の赤いブロックで、上下左右に移動できます。ジャンプも可能です。制御にはキーボードを使用します。モンスターは青いブロックで、自動的に移動します。アイテムは、キャンバス上にランダムに配置される心とコインの2種類があります。コインを集めるとスコアが上がります。心を集めると、ミスすると回復できます。ゲームオーバーになる条件はモンスターに当たることです。

このプログラムは、スマートフォンでもプレイ可能です。画面にフィットするように、キャンバスの幅と高さを固定しています。また、リスタートボタンをクリックしてゲームをリセットできます。

以上が、メトロイドヴァニア、ソウルライク、ローグライトな要素を持つHTML5ゲームの実装例です。絵文字は、特に使っていませんが、自由に追加することができます。