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

No:1483

145

←

Prev Next

→

Fun Games
Developer User3346｜Date and time 23/6/18 17:18:49
Build time 42.374 sec｜Game capacity 3.417KB｜

Script

を作りましょう！以下は、"emoji マッチングゲーム"というゲームのサンプルコードです。

emoji マッチングゲーム

すべてのカードをめくって、同じemojiを2枚揃えてください！

0 手めくりました

0 ペア揃えました

このゲームは、emojiを使ってカードを裏返したり、ペアを揃えたりする遊び方ができます。遊ぶにはスマートフォンを操作することがおすすめです。

←

Prev　Next

→ 　

Back　

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

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

を作りましょう！

以下は、"emoji マッチングゲーム"というゲームのサンプルコードです。

```
<!DOCTYPE html> 
<html>

<head> 
	<meta charset="UTF-8"> 
	<title>emoji マッチングゲーム</title> 
	<style> 
		body { 
			font-size: 48px; 
			text-align: center; 
		} 
		button { 
			font-size: 24px; 
			margin-top: 20px; 
			padding: 10px; 
			border: none; 
			background-color: #eee; 
			box-shadow: 2px 2px #ccc; 
			border-radius: 10px; 
		} 
	</style> 
</head>

<body> 
	<h1>emoji マッチングゲーム</h1> 
	<p>すべてのカードをめくって、同じemojiを2枚揃えてください！</p> 
	
	<div> 
		<button id="start">スタート</button> 
		<button id="reset">リセット</button> 
	</div> 
	
	<div> 
		<span id="counter">0</span> 手めくりました 
	</div> 
	
	<div> 
		<span id="pairs">0</span> ペア揃えました 
	</div> 
	
	<div id="board"></div> 
	
	<script> 
		const emojis = [ 
			"🐶", "🐱", "🐰", "🐻", "🐣", "🐍", "🐠", "🌻", 
			"🍕", "🍔", "🍟", "🍣", "🍺", "🍩", "🎂", "🍭"
		]; 
		
		let cards = []; 
		let card1 = null; 
		let card2 = null; 
		let counter = 0; 
		let pairs = 0; 
		
		const board = document.getElementById("board"); 
		const startBtn = document.getElementById("start"); 
		const resetBtn = document.getElementById("reset"); 
		const counterSpan = document.getElementById("counter"); 
		const pairsSpan = document.getElementById("pairs"); 
		
		function generateCards() { 
			let shuffledEmojis = emojis.concat(emojis).sort(() => Math.random() - 0.5); 
			shuffledEmojis.forEach((emoji) => { 
				const card = document.createElement("div"); 
				card.classList.add("card"); 
				card.dataset.emoji = emoji; 
				card.innerText = "🎴"; 
				card.addEventListener("click", flipCard); 
				cards.push(card); 
				board.appendChild(card); 
			}); 
		} 
		
		function flipCard() { 
			if (card1 === null) { 
				this.innerText = this.dataset.emoji; 
				card1 = this; 
			} else if (card2 === null && card1 !== this) { 
				this.innerText = this.dataset.emoji; 
				card2 = this; 
				if (card1.dataset.emoji === card2.dataset.emoji) { 
					card1.removeEventListener("click", flipCard); 
					card2.removeEventListener("click", flipCard); 
					card1 = null; 
					card2 = null; 
					pairs++; 
					pairsSpan.innerText = pairs; 
				} else { 
					setTimeout(() => { 
						card1.innerText = "🎴"; 
						card2.innerText = "🎴"; 
						card1 = null; 
						card2 = null; 
					}, 1000); 
				} 
				counter++; 
				counterSpan.innerText = counter; 
			} 
			
			if (pairs === emojis.length) { 
				const message = `すごい！${counter}手で全てのペアを揃えました！`; 
				alert(message); 
				reset(); 
			} 
		} 
		
		function reset() { 
			cards.forEach((card) => { 
				card.removeEventListener("click", flipCard); 
				board.removeChild(card); 
			}); 
			cards = []; 
			card1 = null; 
			card2 = null; 
			counter = 0; 
			counterSpan.innerText = 0; 
			pairs = 0; 
			pairsSpan.innerText = 0; 
			generateCards(); 
		} 
		
		startBtn.addEventListener("click", generateCards); 
		resetBtn.addEventListener("click", reset); 
	</script> 
</body>

</html> 
```

このゲームは、emojiを使ってカードを裏返したり、ペアを揃えたりする遊び方ができます。遊ぶにはスマートフォンを操作することがおすすめです。