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

No:3306

1797

←

Prev Next

→

Soldier
Developer User3662｜Date and time 23/6/24 12:27:45
Build time 20.492 sec｜Game capacity 2.193KB｜

Script

索敵ゲーム

ターゲットを見つけてタップしてください。

（これは素朴な「索敵ゲーム」の例です。スマホで操作するときは、画面サイズに応じてCSSの数値の調整が必要かもしれません。お楽しみください！）

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>索敵ゲーム</title>
	<style>
		body {
			background-color: #65C4F9;
			font-family: sans-serif;
			font-size: 18px;
			text-align: center;
		}
		
		h1 {
			color: #FFB6C1;
			font-size: 28px;
			margin-top: 50px;
		}
		
		button {
			background-color: #FFB6C1;
			border: none;
			border-radius: 5px;
			color: #FFF;
			cursor: pointer;
			font-size: 20px;
			padding: 10px;
			margin-top: 20px;
		}
		
		#player {
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);
			display: inline-block;
			width: 50px;
			height: 50px;
			background-image: url('👩');
			background-size: contain;
			background-repeat: no-repeat;
		}
		
		#target {
			position: absolute;
			top: 10%;
			left: 40%;
			display: inline-block;
			width: 50px;
			height: 50px;
			background-image: url('🏴');
			background-size: contain;
			background-repeat: no-repeat;
		}
	</style>
</head>
<body>
	<h1>索敵ゲーム</h1>
	<p>ターゲットを見つけてタップしてください。</p>
	<button id="startButton">ゲームスタート</button>
	<div id="player"></div>
	<div id="target"></div>
	
	<script>
		const startButton = document.getElementById("startButton");
		const player = document.getElementById("player");
		const target = document.getElementById("target");
		const screenWidth = window.innerWidth;
		const screenHeight = window.innerHeight;
		
		let targetX;
		let targetY;
		
		startButton.addEventListener("click", startGame);
		
		function startGame() {
			targetX = Math.floor(Math.random() * screenWidth);
			targetY = Math.floor(Math.random() * screenHeight);
			
			target.style.top = `${targetY}px`;
			target.style.left = `${targetX}px`;
			
			player.addEventListener("click", checkTarget);
			
			startButton.style.display = "none";
		}
		
		function checkTarget() {
			alert("ターゲットを発見しました！");
			location.reload();
		}
	</script>
</body>
</html>