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

No:2500

167

←

Prev Next

→

Super simple playable roguelike
Developer anonymous｜Date and time 23/6/21 18:10:21
Build time 26.007 sec｜Game capacity 1.974KB｜

Script

ローグライクゲーム

👦

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ローグライクゲーム</title>
	<style>
		body {
			font-size: 30px;
			text-align: center;
			background-color: #f3f3f3;
		}
		#gameboard {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		#player {
			font-size: 50px;
			color: #ffcc00;
		}
		.wall {
			background-color: #333;
			width: 40px;
			height: 40px;
			margin: 5px;
		}
		.floor {
			background-color: #ddd;
			width: 40px;
			height: 40px;
			margin: 5px;
		}
	</style>
</head>
<body>
	<h1>ローグライクゲーム</h1>
	<div id="gameboard"></div>
	<div id="player">👦</div>
	<script>
		const board = document.querySelector('#gameboard');
		let playerPos = {x: 0, y: 0};

// Create the game board
		for (let i = 0; i < 100; i++) {
			if (Math.random() < 0.3 || i < 10 || i > 90 || i % 10 == 0 || i % 10 == 9) {
				board.innerHTML += '<div class="wall"></div>';
			} else {
				board.innerHTML += '<div class="floor"></div>';
			}
		}

// Move the player
		document.addEventListener('keydown', function(event) {
			switch (event.key) {
				case 'ArrowUp':
					if (playerPos.y > 0 && board.children[playerPos.y * 10 + playerPos.x - 10].classList.contains('floor')) {
						playerPos.y--;
					}
					break;
				case 'ArrowDown':
					if (playerPos.y < 9 && board.children[playerPos.y * 10 + playerPos.x + 10].classList.contains('floor')) {
						playerPos.y++;
					}
					break;
				case 'ArrowLeft':
					if (playerPos.x > 0 && board.children[playerPos.y * 10 + playerPos.x - 1].classList.contains('floor')) {
						playerPos.x--;
					}
					break;
				case 'ArrowRight':
					if (playerPos.x < 9 && board.children[playerPos.y * 10 + playerPos.x + 1].classList.contains('floor')) {
						playerPos.x++;
					}
					break;
			}
			document.querySelector('#player').style.top = playerPos.y * 50 + 'px';
			document.querySelector('#player').style.left = playerPos.x * 50 + 'px';
		});
	</script>
</body>
</html>