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

No:1905

153

←

Prev Next

→

Games that get a 5 rating
Developer User3345｜Date and time 23/6/19 13:50:11
Build time 46.532 sec｜Game capacity 3.983KB｜

Script

Emoji Matching Game

You Won!

Game Outline This game is、Turn over two pictographs in the 16 cards.、This is a game to find the same emoji. When you find all the pairs、The winning message will be displayed. Use pictograms.、We make it so that you can enjoy it on your mobile phone.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Emoji Matching Game</title>
	<style>
		body {
			background-color: #f5f5f5;
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}
		h1 {
			text-align: center;
			color: #444;
			margin-top: 50px;
		}
		.container {
			max-width: 500px;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			padding: 30px;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 0 10px #bbb;
			margin-top: 20px;
			position: relative;
		}
		.card {
			font-size: 40px;
			background-color: #f5f5f5;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 80px;
			height: 80px;
			border-radius: 10px;
			box-shadow: 0 0 5px #bbb;
			margin: 10px;
			cursor: pointer;
		}
		.card:active {
			background-color: #ddd;
			box-shadow: none;
		}
		.flipped {
			background-color: #ccc;
			cursor: default;
		}
		.win-message {
			display: none;
			position: absolute;
			top: calc(50% - 30px);
			left: calc(50% - 100px);
			height: 60px;
			width: 200px;
			background-color: #fff;
			box-shadow: 0 0 10px #bbb;
			border-radius: 5px;
			padding: 10px;
			font-size: 20px;
			text-align: center;
			color: #444;
		}
		.win-message.show {
			display: block;
		}
	</style>
</head>
<body>
	<h1>Emoji Matching Game</h1>
	<div class="container"></div>
	<div class="win-message">You Won!</div>

let flippedCards = [];
		let matchedCards = [];
		let clickDisabled = false;
		let moves = 0;

function createBoard() {
			const container = document.querySelector(".container");

for (let i = 0; i < totalPairs; i++) {
				const emoji = emojis[i];
				const card = document.createElement("div");
				const back = document.createElement("div");
				const front = document.createElement("div");

card.classList.add("card");
				back.classList.add("back");
				front.classList.add("front");

card.dataset.emoji = emoji;
				front.innerText = emoji;

container.appendChild(card);
				card.appendChild(back);
				card.appendChild(front);

card.addEventListener("click", handleClick);
			}
		}

function handleClick() {
			if (clickDisabled) return;
			if (flippedCards.length === 2) return;

this.classList.add("flipped");
			flippedCards.push(this);

if (flippedCards.length === 2) {
				checkForMatch();
				moves++;
				updateMoves();
			}
		}

function checkForMatch() {
			const emoji1 = flippedCards[0].dataset.emoji;
			const emoji2 = flippedCards[1].dataset.emoji;

if (emoji1 === emoji2) {
				disableCards();
			} else {
				unflipCards();
			}
		}

function disableCards() {
			flippedCards[0].removeEventListener("click", handleClick);
			flippedCards[1].removeEventListener("click", handleClick);
			matchedCards.push(flippedCards[0]);
			matchedCards.push(flippedCards[1]);
			flippedCards = [];

if (matchedCards.length === totalPairs * 2) {
				showWinMessage();
			}
		}

function unflipCards() {
			clickDisabled = true;
			setTimeout(() => {
				flippedCards[0].classList.remove("flipped");
				flippedCards[1].classList.remove("flipped");
				flippedCards = [];
				clickDisabled = false;
			}, 1000);
		}

function showWinMessage() {
			document.querySelector(".win-message").classList.add("show");
		}

function updateMoves() {
			const movesText = document.querySelector(".moves-text");
			movesText.innerText = `Moves: ${moves}`;
		}

createBoard();
	</script>
</body>
</html>

【ゲーム概要】
このゲームは、16枚のカードの中にある絵文字を2つめくって、同じ絵文字を見つけるゲームです。全てのペアを見つけたら、勝利メッセージが表示されます。絵文字を使って、スマホでも楽しめるように作っています。