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

No:4097

314

←

Prev Next

→

game of tag
Developer もちきなこ｜Date and time 23/6/27 12:11:58
Build time 39.359 sec｜Game capacity 3.494KB｜

Script

はい、了解しました。以下が私のプログラムです。

鬼ごっこ

指定された時間内に鬼から逃げて目的地に到着するゲームです。

Ready?

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

はい、了解しました。以下が私のプログラムです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>鬼ごっこ</title>
</head>
<body>
	<h1>鬼ごっこ</h1>
	<p>指定された時間内に鬼から逃げて目的地に到着するゲームです。</p>
	
	<div id="game">
		<p id="text">Ready?</p>
		<button id="startBtn">Start!</button>
	</div>
	
	<script>
	// ゲームの各種設定
	var timer = 10; // 制限時間（秒）
	var speed = 5; // プレイヤーの移動速度（px/フレーム）
	var playerSize = 25; // プレイヤーのサイズ（px）
	var goalSize = 50; // ゴールのサイズ（px）
	var isRunning = false;
	
	// プレイヤーの初期位置と目標位置の決定
	var player = {
		x: Math.floor(window.innerWidth / 5),
		y: Math.floor(window.innerHeight / 2),
		destX: Math.floor(window.innerWidth * 4 / 5),
		destY: Math.floor(window.innerHeight / 3)
	};
	
	// ゴールの位置の決定
	var goal = {
		x: Math.floor(window.innerWidth / 2),
		y: Math.floor(window.innerHeight / 3),
		size: goalSize
	};
	
	// キーボード操作でプレイヤーを動かす
	document.addEventListener('keydown', function(event) {
		if (isRunning) {
			switch(event.key) {
				case 'ArrowLeft':
					player.x -= speed;
					break;
				case 'ArrowRight':
					player.x += speed;
					break;
				case 'ArrowUp':
					player.y -= speed;
					break;
				case 'ArrowDown':
					player.y += speed;
					break;
			}
		}
	});
	
	// ゲームのメイン処理
	function gameLoop() {
		var gameArea = document.getElementById('game');
		var textElem = document.getElementById('text');
		var startBtn = document.getElementById('startBtn');
		
		// ゲームが開始されたとき
		function startGame() {
			isRunning = true;
			textElem.textContent = 'Go!';
			startBtn.style.display = 'none';
		}
		
		// ゲームが終了したとき
		function endGame() {
			isRunning = false;
			var result = (player.x >= goal.x - playerSize && player.x <= goal.x + goal.size && player.y >= goal.y - playerSize && player.y <= goal.y + goal.size) ? 'You win!' : 'Game over.';
			textElem.textContent = result;
			startBtn.textContent = 'Play again';
			startBtn.style.display = 'block';
			startBtn.addEventListener('click', function() {
				window.location.reload();
			});
		}
		
		// ゲームのフレーム処理
		function update() {
			gameArea.innerHTML = '';
			
			// プレイヤーとゴールの描画
			var playerElem = document.createElement('div');
			playerElem.style.width = playerSize + 'px';
			playerElem.style.height = playerSize + 'px';
			playerElem.style.background = 'blue';
			playerElem.style.position = 'absolute';
			playerElem.style.left = player.x + 'px';
			playerElem.style.top = player.y + 'px';
			gameArea.appendChild(playerElem);
			
			var goalElem = document.createElement('div');
			goalElem.style.width = goal.size + 'px';
			goalElem.style.height = goal.size + 'px';
			goalElem.style.background = 'red';
			goalElem.style.position = 'absolute';
			goalElem.style.left = goal.x + 'px';
			goalElem.style.top = goal.y + 'px';
			gameArea.appendChild(goalElem);
			
			// 残り時間の表示
			textElem.textContent = 'Time: ' + timer;
			
			// 制限時間の処理
			if (isRunning && timer > 0) {
				timer--;
			} else if (isRunning && timer === 0) {
				endGame();
			}
		}
		
		setInterval(update, 1000/60);
		startBtn.addEventListener('click', startGame);
	}
	
	gameLoop();
	</script>
	
</body>
</html>