20×Explore a 20-square-meter 2D dungeon, fight monsters, and equip yourself with loot to reach deeper levels in this dungeon RPG!'s game

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
20×Explore a 20-square-meter 2D dungeon, fight monsters, and equip yourself with loot to reach deeper levels in this dungeon RPG!'s game | AI game creator

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

No:2526

2858

←

Prev Next

→

20×Explore a 20-square-meter 2D dungeon, fight mon..ALL
Developer User3577｜Date and time 23/6/21 20:57:33
Build time 64.287 sec｜Game capacity 3.347KB｜

Script

を作りました🎉 以下がコードになります👇

※実装は簡易的なものですので、改善点も多々あるかと思います。ご了承ください。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

を作りました🎉

以下がコードになります👇

<!DOCTYPE html>
<html>
<head>
	<title>ダンジョンRPG</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		.grid {
			display: grid;
			grid-template-columns: repeat(20, 1fr);
			grid-template-rows: repeat(20, 1fr);
			gap: 1px;
			background-color: black;
		}
		.cell {
			background-color: white;
		}
		.player {
			background-color: ⌚; /* アイコンは適宜変更してください */
		}
		.monster {
			background-color: 🐲;
		}
		.treasure {
			background-color: 💰;
		}
	</style>
	<script>
		// ダンジョン情報
		const dungeonMap = [
		   [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
		   [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
		   [1,0,1,1,0,0,0,0,0,0,1,1,1,1,0,1,0,0,0,1],
		   [1,0,0,0,0,0,1,1,1,0,1,0,0,1,0,1,1,1,0,1],
		   [1,1,1,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1],
		   [1,0,0,0,1,0,1,1,1,1,1,0,0,1,0,1,1,1,0,1],
		   [1,0,1,1,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,1],
		   [1,0,0,0,0,0,1,1,1,0,1,0,0,0,0,1,0,0,0,1],
		   [1,0,1,0,0,0,1,0,1,0,0,0,1,1,0,1,0,1,1,1],
		   [1,0,1,0,1,0,1,0,0,0,1,0,1,0,0,0,0,0,0,1],
		   [1,0,0,0,1,0,1,1,1,1,1,0,1,1,1,1,1,1,0,1],
		   [1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
		   [1,0,1,0,1,1,1,1,1,1,1,0,1,1,1,0,1,1,0,1],
		   [1,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,1],
		   [1,0,1,0,1,1,1,1,0,1,1,1,1,0,1,0,1,1,0,1],
		   [1,0,1,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,1],
		   [1,0,0,0,1,1,0,1,0,1,1,1,1,0,1,1,1,1,0,1],
		   [1,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1],
		   [1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,4,1],
		   [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
		];

// キャラクター情報
		const character = {
			x: 1,
			y: 1
		};

// 描画関数
		const render = () => {
			const grid = document.querySelector('.grid');
			grid.innerHTML = '';
			for(let y = 0; y < dungeonMap.length; y++) {
				for(let x = 0; x < dungeonMap[y].length; x++) {
					const cell = document.createElement('div');
					cell.classList.add('cell');
					switch(dungeonMap[y][x]) {
						case 1:
							cell.classList.add('wall');
							break;
						case 2:
							cell.classList.add('monster');
							break;
						case 3:
							cell.classList.add('treasure');
							break;
					}
					if(x === character.x && y === character.y) {
						cell.classList.add('player');
					}
					grid.appendChild(cell);
				}
			}
		};

// キーイベント関数
		const keyDownEvent = (event) => {
			switch(event.key) {
				case 'ArrowUp':
					if(dungeonMap[character.y - 1][character.x] !== 1) {
						character.y--;
					}
					break;
				case 'ArrowDown':
					if(dungeonMap[character.y + 1][character.x] !== 1) {
						character.y++;
					}
					break;
				case 'ArrowLeft':
					if(dungeonMap[character.y][character.x - 1] !== 1) {
						character.x--;
					}
					break;
				case 'ArrowRight':
					if(dungeonMap[character.y][character.x + 1] !== 1) {
						character.x++;
					}
					break;
			}
			render();
		};

// ゲーム開始処理
		const gameStart = () => {
			render();
			document.addEventListener('keydown', keyDownEvent);
		};

window.onload = () => {
			gameStart();
		};
	</script>
</head>
<body>
	<div class="grid"></div>
</body>
</html>

※実装は簡易的なものですので、改善点も多々あるかと思います。ご了承ください。