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

No:3229

2264

Pokémon game
Developer User3676｜Date and time 23/6/24 8:04:45
Build time 47.77 sec｜Game capacity 4.981KB｜

Pokémon Game

pikachu

Pikachu

charmander

Charmander

squirtle

Squirtle

bulbasaur

Bulbasaur

Explanation: This is a simple Pokémon game where the player needs to match pairs of Pokémon characters by flipping two cards at a time. The game is implemented in one HTML file and JavaScript is used to handle the game logic. The game is mobile-friendly and can be easily played on a smartphone. The game uses emojis and features four Pokémon characters: Pikachu, Charmander, Squirtle, and Bulbasaur. The game consists of a title, a container, and four cards with the images and names of the Pokémon characters. At the bottom of the container, there is a button to start the game. When the player clicks on the button, the cards are shuffled randomly, and the game begins. When the player clicks on a card, the card flips over, and its image is revealed. If the player clicks on another card, the second card flips over, and its image is revealed. If the images on the two cards match, the cards stay flipped over, and the player earns a point. If the images on the two cards do not match, the cards flip back over after 1.5 seconds. The game ends when the player matches all the pairs of cards. When the game is over, the player is alerted with a message, and the game can be restarted by clicking on the button.

→ 　

1　

0　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<title>Pokémon Game</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #ffcb05;
			margin: 0;
			padding: 0;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		}
		h1 {
			color: #e3001b;
			text-align: center;
			font-size: 4rem;
			margin-top: 3rem;
			margin-bottom: 2rem;
		}
		.container {
			max-width: 500px;
			margin: 0 auto;
			padding: 1.5rem;
			background-color: #ffffff;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
			border-radius: 1rem;
		}
		.grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 1rem;
			margin-top: 2rem;
		}
		.card {
			background-color: #efefef;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			border-radius: 1rem;
			padding: 1.5rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			transition: all .3s ease-in-out;
		}
		.card:hover {
			transform: scale(1.05);
			background-color: #ffffff;
		}
		.card img {
			max-width: 100%;
		}
		.card span {
			font-size: 1.5rem;
			font-weight: bold;
			margin-top: 1rem;
			text-align: center;
		}
		.button {
			background-color: #e3001b;
			color: #ffffff;
			padding: 1rem;
			border: none;
			border-radius: .5rem;
			font-size: 1.5rem;
			font-weight: bold;
			margin-top: 2rem;
			cursor: pointer;
			transition: all .3s ease-in-out;
		}
		.button:hover {
			background-color: #ff003f;
		}
	</style>
</head>
<body>

<h1>Pokémon Game</h1>

<div class="container">

<div class="grid">
			<div class="card" id="card1">
				<img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/271/pikachu_1f355.png" alt="pikachu">
				<span>Pikachu</span>
			</div>
			<div class="card" id="card2">
				<img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/271/charmander_1f387.png" alt="charmander">
				<span>Charmander</span>
			</div>
			<div class="card" id="card3">
				<img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/271/squirtle_1f422.png" alt="squirtle">
				<span>Squirtle</span>
			</div>
			<div class="card" id="card4">
				<img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/271/bulbasaur_1f33f.png" alt="bulbasaur">
				<span>Bulbasaur</span>
			</div>
		</div>

<button class="button" id="button">Start Game</button>

</div>

<script>
		const cards = document.querySelectorAll('.card');
		const button = document.querySelector('#button');

let chosenCard = null;
		let score = 0;

function flipCard() {
			if (this === chosenCard) return;
			this.classList.add('flip');

if (chosenCard) {
				checkMatch();
			} else {
				chosenCard = this;
			}
		}

function checkMatch() {
			let isMatch = chosenCard.id === this.id;
			isMatch ? disableCards() : unflipCards();
		}

function disableCards() {
			cards.forEach(card => card.removeEventListener('click', flipCard));
			score++;
			chosenCard = null;
			if (score === 4) {
				alert('Congratulations! You caught all the Pokémon!');
				resetGame();
			}
		}

function unflipCards() {
			setTimeout(() => {
				chosenCard.classList.remove('flip');
				this.classList.remove('flip');
				chosenCard = null;
			}, 1500);
		}

function shuffleCards() {
			cards.forEach(card => {
				let randomPosition = Math.floor(Math.random() * 4);
				card.style.order = randomPosition;
			})
		}

function resetGame() {
			cards.forEach(card => {
				card.classList.remove('flip');
				card.addEventListener('click', flipCard);
			});
			score = 0;
			shuffleCards();
		}

button.addEventListener('click', resetGame);
		cards.forEach(card => card.addEventListener('click', flipCard));
		shuffleCards();
	</script>

</body>
</html>

Explanation:
This is a simple Pokémon game where the player needs to match pairs of Pokémon characters by flipping two cards at a time. The game is implemented in one HTML file and JavaScript is used to handle the game logic. The game is mobile-friendly and can be easily played on a smartphone. The game uses emojis and features four Pokémon characters: Pikachu, Charmander, Squirtle, and Bulbasaur.

The game consists of a title, a container, and four cards with the images and names of the Pokémon characters. At the bottom of the container, there is a button to start the game. When the player clicks on the button, the cards are shuffled randomly, and the game begins.

When the player clicks on a card, the card flips over, and its image is revealed. If the player clicks on another card, the second card flips over, and its image is revealed. If the images on the two cards match, the cards stay flipped over, and the player earns a point. If the images on the two cards do not match, the cards flip back over after 1.5 seconds.

The game ends when the player matches all the pairs of cards. When the game is over, the player is alerted with a message, and the game can be restarted by clicking on the button.