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

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

No:2526

1734

←

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>

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