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

No:1266

138

←

Prev Next

→

A game where a dark wizard will dominate in the re..ALL
Developer User3280｜Date and time 23/6/18 9:28:49
Build time 33.916 sec｜Game capacity 2.834KB｜

Script

Elementopia

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Elementopia</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #87CEFA;
			color: #ffffff;
			font-family: sans-serif;
		}

h1 {
			text-align: center;
			font-size: 3em;
		}

#game-board {
			margin: auto;
			display: flex;
			flex-wrap: wrap;
			width: 80%;
			height: auto;
			padding: 50px;
			background-color: #ffffff;
			border-radius: 20px;
		}

.tile {
			flex: 1 0 calc(25% - 10px);
			height: 100%;
			margin: 5px;
			background-color: #FFA07A;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 5em;
			font-weight: bold;
			cursor: pointer;
		}
	</style>
	<script>
		// Variable definitions
		var gameBoard = document.getElementById("game-board");
		var tiles = document.getElementsByClassName("tile");
		var elements = ["🌳", "💧", "🌪️", "🔥"];
		var monsters = ["👹", "👻", "🦈", "🐲"];
		var currentTile = null;
		var grid = [];

// Create game board
		function createBoard() {
			for (var i=0; i<16; i++) {
				var tile = document.createElement("div");
				tile.className = "tile";
				tile.setAttribute("data-index", i);
				tile.addEventListener("click", handleTileClick);
				gameBoard.appendChild(tile);
			}
		}

// Handle tile click event
		function handleTileClick() {
			var index = parseInt(this.getAttribute("data-index"));
			if (currentTile !== null) {
				if (currentTile === index) {
					this.style.backgroundColor = "#FFA07A";
					currentTile = null;
				} else {
					swapTiles(currentTile, index);
				}
			} else {
				this.style.backgroundColor = "#FFDAB9";
				currentTile = index;
			}
		}

// Swap two tiles
		function swapTiles(index1, index2) {
			var temp = grid[index1];
			grid[index1] = grid[index2];
			grid[index2] = temp;
			tiles[index1].innerHTML = grid[index1];
			tiles[index2].innerHTML = grid[index2];
			tiles[index1].style.backgroundColor = "#FFA07A";
			tiles[index2].style.backgroundColor = "#FFA07A";
			currentTile = null;
			checkWin();
		}

// Check if game is won
		function checkWin() {
			var win = true;
			for (var i=0; i<16; i++) {
				if (grid[i] !== elements[i]) {
					win = false;
					break;
				}
			}
			if (win) {
				alert("¡Has ganado!");
				location.reload();
			}
		}

// Initialize game
		function init() {
			for (var i=0; i<8; i++) {
				var element = elements[i%4];
				var monster = monsters[i%4];
				grid.push(element);
				grid.push(monster);
			}
			grid.sort(() => Math.random() - 0.5);
			for (var i=0; i<16; i++) {
				tiles[i].innerHTML = grid[i];
			}
		}

window.onload = function() {
			createBoard();
			init();
		};
	</script>
</head>
<body>
	<h1>Elementopia</h1>
	<div id="game-board"></div>
</body>
</html>