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

No:1558

1051

←

Prev Next

→

Survival game to survive in a world of despair
Developer User3356｜Date and time 23/6/18 18:34:13
Build time 70.41 sec｜Game capacity 4.089KB｜

Script

絶望の世界

スコア: 0

このゲームは、プレイヤー（🧑）が敵（👺）を避けて、スコアを稼ぐサバイバルゲームです。プレイヤーはキーボード（スマホの場合はタップ）で操作し、敵と接触するとゲームオーバーになります。スコアは秒数で加算されます。スタートボタンを押すとゲームが開始されます。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>絶望の世界</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #212121;
			color: #fff;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		h1 {
			font-size: 3em;
		}
		button {
			background-color: #ef5350;
			color: #fff;
			border: none;
			padding: 10px 20px;
			border-radius: 5px;
			font-size: 1.2em;
			cursor: pointer;
			margin: 10px;
		}
		#score {
			font-size: 2em;
		}
		#game {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			height: 60vh;
		}
		.cell {
			width: 50px;
			height: 50px;
			border: 2px solid #fff;
			margin: 10px;
		}
		.player {
			color: #ffeb3b;
			font-size: 2em;
		}
		.enemy {
			color: #f44336;
			font-size: 2em;
		}
	</style>
</head>
<body>
	<h1>絶望の世界</h1>
	<p>スコア: <span id="score">0</span></p>
	<div id="game"></div>
	<button id="start" onclick="startGame()">スタート</button>

// 要素の取得
		const gameDiv = document.getElementById('game');
		const scoreSpan = document.getElementById('score');

// 初期設定
		function init() {
			playerPos = {x: 0, y: 0};
			enemyPos = {x: 4, y: 4};
			score = 0;
			gameOver = false;
		}

// ゲーム開始
		function startGame() {
			// 初期設定
			init();
			// ゲームビューの生成
			renderGame();
			// 敵の移動
			timeInterval = setInterval(moveEnemy, 1000);
			// キーボードイベントの設定
			document.addEventListener('keydown', movePlayer);
			// スタートボタンの非表示
			document.getElementById('start').style.display = 'none';
		}

// ゲームビューの生成
		function renderGame() {
			gameDiv.innerHTML = '';
			for (let i = 0; i < 5; i++) {
				for (let j = 0; j < 5; j++) {
					const cell = document.createElement('div');
					cell.classList.add('cell');
					if (i == playerPos.y && j == playerPos.x) {
						cell.innerHTML = '🧑';
						cell.classList.add('player');
					}
					if (i == enemyPos.y && j == enemyPos.x) {
						cell.innerHTML = '👺';
						cell.classList.add('enemy');
					}
					gameDiv.appendChild(cell);
				}
			}
		}

// プレイヤーの移動
		function movePlayer(e) {
			if (e.keyCode === 37) { //←
				if (playerPos.x > 0) playerPos.x--;
			} else if (e.keyCode === 38) { //↑
				if (playerPos.y > 0) playerPos.y--;
			} else if (e.keyCode === 39) { //→
				if (playerPos.x < 4) playerPos.x++;
			} else if (e.keyCode === 40) { //↓
				if (playerPos.y < 4) playerPos.y++;
			}
			// 敵と接触した場合、ゲームオーバー
			if (playerPos.x == enemyPos.x && playerPos.y == enemyPos.y) {
				gameOver = true;
				endGame();
			}
			// スコアの更新
			score++;
			scoreSpan.innerHTML = score;
			renderGame();
		}

// 敵の移動
		function moveEnemy() {
			let moveX = Math.floor(Math.random() * 3) - 1;
			let moveY = Math.floor(Math.random() * 3) - 1;
			if (enemyPos.x + moveX >= 0 && enemyPos.x + moveX < 5 && enemyPos.y + moveY >= 0 && enemyPos.y + moveY < 5) {
				enemyPos.x += moveX;
				enemyPos.y += moveY;
			}
			// 敵と接触した場合、ゲームオーバー
			if (playerPos.x == enemyPos.x && playerPos.y == enemyPos.y) {
				gameOver = true;
				endGame();
			}
			renderGame();
		}

// ゲームオーバー時の処理
		function endGame() {
			clearInterval(timeInterval);
			document.removeEventListener('keydown', movePlayer);
			alert('ゲームオーバー。スコア: ' + score);
			document.getElementById('start').style.display = 'block';
		}
	</script>
</body>
</html>