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

No:2012

2566

←

Prev Next

→

Treasure of the historical military island
Developer User3462｜Date and time 23/6/19 18:55:58
Build time 37.752 sec｜Game capacity 2.989KB｜

Script

Treasure of the Historical Military Island

Do you have what it takes to find the treasure and escape the island?

Click the button below to start the game!

Score: 0

Description: Treasure of the Historical Military Island is a simple game where you have to find the treasure hidden on a map. Click on the tiles to reveal them and try to find the treasure. Each time you click on a tile that is not the treasure, your score will remain the same. But if you find the treasure, your score will increase by one. The game is meant to be played on a smartphone, and features colorful emoticons.

←

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>Treasure of the Historical Military Island</title>
	<style>
		body {
			background-color: #87ceeb;
			text-align: center;
			font-size: 24px;
		}
		h1 {
			color: #ff8c00;
			font-family: cursive;
		}
		#play-btn {
			padding: 10px 20px;
			font-size: 18px;
			background-color: #ff8c00;
			color: #fff;
			border-radius: 10px;
			cursor: pointer;
			outline: none;
			border: none;
		}
		#game-container {
			display: none;
		}
		#score {
			color: #ff8c00;
			font-family: cursive;
			font-size: 30px;
			margin-bottom: 20px;
		}
		#map {
			margin: 0 auto;
			max-width: 80%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		.tile {
			height: 50px;
			width: 50px;
			font-size: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			margin: 5px;
			border-radius: 5px;
			cursor: pointer;
			transition: all 0.2s;
		}
		.tile:hover {
			opacity: 0.8;
		}
		.tile.clicked {
			background-color: #ff8c00;
			color: #fff;
		}
	</style>
</head>
<body>
	<h1>Treasure of the Historical Military Island</h1>
	<p>Do you have what it takes to find the treasure and escape the island?</p>
	<p>Click the button below to start the game!</p>
	<button id="play-btn">Play now!</button>
	
	<div id="game-container">
		<h2>Score: <span id="score">0</span></h2>
		<div id="map"></div>
	</div>
	
	<script>
		const mapSize = 7;
		const treasure = Math.floor(Math.random() * (mapSize * mapSize));
		let score = 0;
		
		// generate the map
		const mapEl = document.getElementById("map");
		for (let i = 0; i < mapSize * mapSize; i++) {
			const tileEl = document.createElement("div");
			tileEl.className = "tile";
			tileEl.setAttribute("data-index", i.toString());
			tileEl.addEventListener("click", function() {
				const clickedEl = document.querySelector(".clicked");
				if (clickedEl) {
					clickedEl.classList.remove("clicked");
				}
				if (i === treasure) {
					score++;
					mapEl.innerHTML = "<h3>Congratulations! You found the treasure!</h3>";
				} else {
					this.className += " clicked";
				}
				document.getElementById("score").innerText = score.toString();
			});
			mapEl.appendChild(tileEl);
		}
		
		// show the game container and hide the start button
		const playBtn = document.getElementById("play-btn");
		playBtn.addEventListener("click", function() {
			playBtn.style.display = "none";
			document.getElementById("game-container").style.display = "block";
		});
	</script>
</body>
</html>