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

No:3542

1714

←

Prev Next

→

Tower of Babel
Developer User3655｜Date and time 23/6/25 14:36:35
Build time 53.413 sec｜Game capacity 5.721KB｜

Script

を題材にした、スマホ専用のシンプルなゲームを作成しました。

Babel Tower Game

Game Over!

Your score:

←

Prev　Next

→ 　

Back　

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

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

を題材にした、スマホ専用のシンプルなゲームを作成しました。

<!DOCTYPE html>
<html>
<head>
	<title>Babel Tower Game</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			background-color: #f1f1f1;
		}
		h1 {
			margin: 20px;
			text-align: center;
			font-size: 48px;
			font-weight: bold;
			color: #333;
		}
		#tower {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-end;
			justify-content: center;
			padding: 50px 0;
		}
		.brick {
			width: 50px;
			height: 50px;
			border: 2px solid #333;
			border-radius: 5px;
			margin: 0 10px;
			background-color: #ddd;
		}
		#player {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px;
			box-sizing: border-box;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}
		#player img {
			width: 50px;
			height: 50px;
			margin-right: 10px;
		}
		#btn-left,
		#btn-right {
			display: inline-block;
			border: none;
			border-radius: 5px;
			padding: 10px;
			font-size: 24px;
			font-weight: bold;
			color: #fff;
			background-color: #333;
			cursor: pointer;
		}
		#btn-left {
			margin-right: 20px;
		}
		#message {
			display: none;
			padding: 20px;
			box-sizing: border-box;
			background-color: #fff;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border: 2px solid #333;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
		}
		#message h2 {
			margin: 0;
			font-size: 36px;
			font-weight: bold;
			color: #333;
		}
		#message p {
			margin: 10px 0;
			text-align: center;
			font-size: 24px;
			color: #333;
		}
		#message button {
			display: block;
			margin: 20px auto 0;
			border: none;
			border-radius: 5px;
			padding: 10px;
			font-size: 24px;
			font-weight: bold;
			color: #fff;
			background-color: #333;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>Babel Tower Game</h1>
	<div id="tower"></div>
	<div id="player">
		<img src="https://img.icons8.com/dusk/64/000000/person-walking.png" alt="Player Icon">
		<button id="btn-left">←</button>
		<button id="btn-right">→</button>
	</div>
	<div id="message">
		<h2>Game Over!</h2>
		<p>Your score: <span id="score"></span></p>
		<button id="btn-restart">Restart</button>
	</div>
	<script>
		// ゲーム変数
		var towerHeight = 10;
		var bricksInRow = 7;
		var brickWidth = 50;
		var brickHeight = 50;
		var brickMargin = 10;
		var playerPos = 3;
		var playerMoved = false;
		var gameOver = false;
		var score = 0;

// ゲーム開始時の処理
		function startGame() {
			// タワーの生成
			var tower = document.getElementById('tower');
			for (var i = 0; i < towerHeight; i++) {
				var row = document.createElement('div');
				row.classList.add('row');
				for (var j = 0; j < bricksInRow; j++) {
					var brick = document.createElement('div');
					brick.classList.add('brick');
					if (Math.random() < 0.2) {
						brick.classList.add('danger');
					}
					row.appendChild(brick);
				}
				tower.appendChild(row);
			}

// プレイヤーの初期位置
			updatePlayer();

// 操作ボタンのイベントリスナー
			var btnLeft = document.getElementById('btn-left');
			var btnRight = document.getElementById('btn-right');
			btnLeft.addEventListener('click', function() {
				moveLeft();
			});
			btnRight.addEventListener('click', function() {
				moveRight();
			});

// ゲームループの開始
			gameLoop();
		}

// プレイヤーの位置の更新
		function updatePlayer() {
			var player = document.getElementById('player');
			player.style.left = ((playerPos * (brickWidth + brickMargin)) + ((brickWidth - 50) / 2)) + 'px';
		}

// 左に移動する
		function moveLeft() {
			if (playerPos > 0 && !playerMoved) {
				playerPos--;
				updatePlayer();
				playerMoved = true;
			}
		}

// 右に移動する
		function moveRight() {
			if (playerPos < bricksInRow - 1 && !playerMoved) {
				playerPos++;
				updatePlayer();
				playerMoved = true;
			}
		}

// ゲームループ
		function gameLoop() {
			// プレイヤーの移動情報をリセット
			playerMoved = false;

// タワーを1段下に移動
			var tower = document.getElementById('tower');
			var lastRow = tower.lastElementChild;
			tower.removeChild(lastRow);
			var newRow = document.createElement('div');
			newRow.classList.add('row');
			for (var i = 0; i < bricksInRow; i++) {
				var brick = document.createElement('div');
				brick.classList.add('brick');
				if (Math.random() < 0.2) {
					brick.classList.add('danger');
				}
				newRow.appendChild(brick);
			}
			tower.insertBefore(newRow, tower.firstChild);

// プレイヤーが危険ブロックに触れたらゲームオーバー
			var player = document.getElementById('player');
			var playerPosBrick = Math.floor(playerPos);
			var currentRow = tower.children[towerHeight - 1];
			var currentBrick = currentRow.children[playerPosBrick];
			if (currentBrick.classList.contains('danger')) {
				gameOver = true;
			}

// スコアの更新
			score++;

// ゲームオーバー時の処理
			if (gameOver) {
				var message = document.getElementById('message');
				var scoreText = document.getElementById('score');
				scoreText.textContent = score;
				message.style.display = 'block';
				var btnRestart = document.getElementById('btn-restart');
				btnRestart.addEventListener('click', function() {
					location.reload();
				});
				return;
			}

// 次のループ
			setTimeout(gameLoop, 1000);
		}

// ゲームの開始
		startGame();
	</script>
</body>
</html>