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

No:2248

3595

←

Prev Next

→

Collecting Emoji Pokémon
Developer User3524｜Date and time 23/6/20 18:22:36
Build time 99.867 sec｜Game capacity 5.688KB｜

Script

ポケモンを集めよう！

以上が、1枚のhtmlファイルにJavaScriptを含めたポケモンゲームの実装例です。スマホでも操作できるように設計しており、なるべく絵文字を使って見やすくしています。ゲームの概要は、ポケモンをランダムで出現させて、全種類を発見するゲームです。ゲーム終了時には、ポケモンを何匹捕まえたかに応じたメッセージが表示されます。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ポケモンゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F5DEB3;
			text-align: center;
		}
		h1 {
			margin-top: 50px;
			font-size: 3rem;
		}
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin-top: 50px;
			margin-bottom: 50px;
		}
		.card {
			margin: 10px;
			padding: 10px;
			background-color: white;
			border-radius: 10px;
			box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
		}
		.card img {
			width: 100px;
			height: 100px;
		}
		.btn {
			display: block;
			margin: 50px auto;
			padding: 10px 20px;
			background-color: #4CAF50;
			color: white;
			text-align: center;
			font-size: 1.5rem;
			border-radius: 10px;
			box-shadow: none;
			border: none;
		}
	</style>
	<script>
		// ポケモンの情報を格納する配列
		const POKEMONS = [
			{
				name: "フシギダネ",
				img: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/seedling_1f331.png",
				found: false
			},
			{
				name: "ヒトカゲ",
				img: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/dragon-face_1f432.png",
				found: false
			},
			{
				name: "ゼニガメ",
				img: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/turtle_1f422.png",
				found: false
			},
			{
				name: "ピカチュウ",
				img: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/pikachu_1f355.png",
				found: false
			},
			{
				name: "ディグダ",
				img: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/mole_1f33a.png",
				found: false
			},
			{
				name: "コダック",
				img: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/duck_1f986.png",
				found: false
			},
			{
				name: "ラプラス",
				img: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/hippopotamus_1f99b.png",
				found: false
			},
			{
				name: "カビゴン",
				img: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/sleeping-face_1f634.png",
				found: false
			},
			{
				name: "メルタン",
				img: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/metal_1f48e.png",
				found: false
			},
			{
				name: "ゴリランダー",
				img: "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/cut-of-meat_1f969.png",
				found: false
			},
		];

// 取得済みのポケモン数をカウントする変数
		let foundCount = 0;

// 全てのポケモンを表示する関数
		function displayAllPokemons() {
			const container = document.querySelector(".container");
			container.innerHTML = "";
			for (let i = 0; i < POKEMONS.length; i++) {
				const card = document.createElement("div");
				card.classList.add("card");
				const img = document.createElement("img");
				img.src = POKEMONS[i].img;
				const name = document.createElement("p");
				name.innerText = POKEMONS[i].name;
				const found = document.createElement("p");
				found.innerText = POKEMONS[i].found ? "発見済み！" : "";
				card.append(img);
				card.append(name);
				card.append(found);
				container.append(card);
			}
		}

// ポケモンをランダムで取得する関数
		function getRandomPokemon() {
			const randomIndex = Math.floor(Math.random() * POKEMONS.length);
			if (!POKEMONS[randomIndex].found) {
				POKEMONS[randomIndex].found = true;
				foundCount++;
				const audio = new Audio('https://poke-masters.net/wp-content/uploads/2020/07/sfx_poke_get.mp3');
				audio.play();
			}
		}

// ゲーム終了時に表示するメッセージを生成する関数
		function generateEndingMessage() {
			const messages = [
				"あなたはポケモンマスターです！",
				"もうちょっとです！頑張って！",
				"まだまだですね。もっと捕まえて！",
				"失敗です...。また挑戦して！"
			];
			const ratio = foundCount / POKEMONS.length;
			let message = "";
			if (ratio === 1) {
				message = messages[0];
			} else if (ratio >= 0.8) {
				message = messages[1];
			} else if (ratio >= 0.5) {
				message = messages[2];
			} else {
				message = messages[3];
			}
			return message;
		}

// ゲームを開始する関数
		function startGame() {
			displayAllPokemons();
			foundCount = 0;
			const btn = document.querySelector(".btn");
			btn.style.display = "none";
			const intervalId = setInterval(() => {
				if (foundCount === POKEMONS.length) {
					clearInterval(intervalId);
					const message = generateEndingMessage();
					setTimeout(() => {
						alert(message);
						btn.style.display = "block";
					}, 1000);
				} else {
					getRandomPokemon();
					displayAllPokemons();
				}
			}, 1000);
		}

window.addEventListener("load", () => {
			const btn = document.querySelector(".btn");
			btn.addEventListener("click", () => {
				startGame();
			});
		});
	</script>
</head>
<body>
	<h1>ポケモンを集めよう！</h1>
	<div class="container"></div>
	<button class="btn">スタート！</button>
</body>
</html>