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

No:669

440

Animal
Developer User3055｜Date and time 23/6/17 5:35:11
Build time 52.9 sec｜Game capacity 4.401KB｜

Matching Game The objective of this game is to match pairs of animals that are hidden behind tiles. To play, simply tap on a tile to reveal the animal hidden behind it. Then, try to remember the location of that animal and tap on another tile to reveal another animal. If the two animals match, they will stay revealed. If they don’t match, they will be hidden again and you’ll have to try again. The game ends when all pairs have been matched. To implement this game as a single HTML file, we can use JavaScript to create the game board and handle user input. We can also use CSS to style the game board and tiles. Here’s an example implementation:

Animal Matching Game

Tap two tiles to reveal the animals. Match all pairs to win!

In this implementation, we use emoji animals and create a grid of tiles with each animal appearing twice. We shuffle the tiles randomly, and then whenever a tile is clicked, we check if it’s the first or second tile to be clicked. If it’s the first tile, we store it in `firstTile` and flip it over. If it’s the second tile, we store it in `secondTile`, flip it over, and check if it matches the first tile. If there’s a match, we mark the tiles as ”matched” and reset `firstTile` and `secondTile`. If there’s no match, we wait 1 second and then flip both tiles back over. We use CSS to style the tiles with a front and back face, and we add a transition effect to the front face when the tile is flipped over. We also add a shadow and rounded corners to make the tiles look like cards. This game can be played on a smartphone by tapping on the tiles. The game board is responsive and adjusts to the screen size. We can also customize the game by using different animals or images, changing the board size or layout, or adding a timer or score counter.

→ 　

0　

0　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

Matching Game

The objective of this game is to match pairs of animals that are hidden behind tiles. To play, simply tap on a tile to reveal the animal hidden behind it. Then, try to remember the location of that animal and tap on another tile to reveal another animal. If the two animals match, they will stay revealed. If they don't match, they will be hidden again and you'll have to try again. The game ends when all pairs have been matched.

To implement this game as a single HTML file, we can use JavaScript to create the game board and handle user input. We can also use CSS to style the game board and tiles. Here's an example implementation:

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Animal Matching Game</title>
	<style>
		body {
			font-size: 2em;
			text-align: center;
			background-color: #f1f1f1;
		}
		#game board {
			display: flex;
			flex-wrap: wrap;
			max-width: 90vw;
			margin: 0 auto;
		}
		.tile {
			flex: 0 0 calc(20% - 1em);
			margin: 0.5em;
			background-color: white;
			border-radius: 0.5em;
			box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.3);
			overflow: hidden;
		}
		.tile img {
			width: 100%;
			height: auto;
			object-fit: cover;
			transition: transform 0.3s ease-in-out;
		}
		.tile .back {
			transform: translateY(-100%);
		}
		.tile .front {
			transform: translateY(0);
		}
	</style>
</head>
<body>
	<h1>Animal Matching Game</h1>
	<p>Tap two tiles to reveal the animals. Match all pairs to win!</p>
	<div id="game-board"></div>

<script>
		const animals = ["🐶", "🐱", "🐻", "🐯", "🐷", "🐰", "🐨", "🦊"];
		const tiles = [];
		let firstTile = null;
		let secondTile = null;

// Create game board
		const gameBoard = document.getElementById("game-board");
		for (let i = 0; i < animals.length; i++) {
			tiles.push(createTile(animals[i]));
			tiles.push(createTile(animals[i]));
		}
		shuffleTiles();
		tiles.forEach(tile => gameBoard.appendChild(tile));

function createTile(animal) {
			const tile = document.createElement("div");
			tile.classList.add("tile");
			tile.innerHTML = `
				<div class="front">${animal}</div>
				<div class="back"></div>
			`;
			tile.addEventListener("click", handleTileClick);
			return tile;
		}

function handleTileClick(event) {
			const tile = event.target.closest(".tile");
			if (!tile || tile.classList.contains("matched") || tile.classList.contains("flipped")) {
				return;
			}
			if (firstTile === null) {
				firstTile = tile;
				flipTile(firstTile);
			} else if (secondTile === null) {
				secondTile = tile;
				flipTile(secondTile);
				if (firstTile.innerHTML === secondTile.innerHTML) {
					firstTile.classList.add("matched");
					secondTile.classList.add("matched");
					firstTile = null;
					secondTile = null;
				} else {
					setTimeout(() => {
						flipTile(firstTile);
						flipTile(secondTile);
						firstTile = null;
						secondTile = null;
					}, 1000);
				}
			}
			if (document.querySelectorAll(".matched").length === tiles.length) {
				alert("Congratulations, you won!");
			}
		}

function flipTile(tile) {
			tile.classList.toggle("flipped");
		}

function shuffleTiles() {
			for (let i = tiles.length - 1; i > 0; i--) {
				const j = Math.floor(Math.random() * (i + 1));
				[tiles[i], tiles[j]] = [tiles[j], tiles[i]];
			}
		}
	</script>
</body>
</html>
```

In this implementation, we use emoji animals and create a grid of tiles with each animal appearing twice. We shuffle the tiles randomly, and then whenever a tile is clicked, we check if it's the first or second tile to be clicked. If it's the first tile, we store it in `firstTile` and flip it over. If it's the second tile, we store it in `secondTile`, flip it over, and check if it matches the first tile. If there's a match, we mark the tiles as "matched" and reset `firstTile` and `secondTile`. If there's no match, we wait 1 second and then flip both tiles back over.

We use CSS to style the tiles with a front and back face, and we add a transition effect to the front face when the tile is flipped over. We also add a shadow and rounded corners to make the tiles look like cards.

This game can be played on a smartphone by tapping on the tiles. The game board is responsive and adjusts to the screen size. We can also customize the game by using different animals or images, changing the board size or layout, or adding a timer or score counter.