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

No:3636

3639

←

Prev Next

→

Hurry up with the appeasement of the howsk!!!! 🤬💢g..ALL
Developer anonymous｜Date and time 70/1/1 9:59:49
Build time unknown sec｜Game capacity 3.589KB｜

Script

は"タップマッチ"というゲームです。画面にランダムに表示される絵文字をタップし、同じ絵文字を3つ以上繋げて消すゲームです。以下がHTMLとJavaScriptのコードです。

タップマッチ

0 点

実際のゲーム画面は以下のようになります。 ![タップマッチの画面](https://i.imgur.com/lbG5Ysg.png) 画面にはタイトル、スコア表示、ゲームボードが表示されます。ゲームボードにはランダムに絵文字が表示され、ユーザーは同じ絵文字を3つ以上タップすることで消すことができます。消した絵文字の数がスコアに加算されます。連続で消すとボーナススコアが得られます。以上がJavaScriptを含むタップマッチの実装例です。

←

Prev　Next

→ 　

Back　

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

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

は"タップマッチ"というゲームです。画面にランダムに表示される絵文字をタップし、同じ絵文字を3つ以上繋げて消すゲームです。

以下がHTMLとJavaScriptのコードです。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>タップマッチ</title>
	<style>
		body {
			background-color: #f0f0f0;
			text-align: center;
		}
		h1 {
			font-size: 30px;
		}
		#score {
			color: blue;
			font-size: 24px;
		}
		#gameboard {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 20px;
		}
		.gamecell {
			width: 70px;
			height: 70px;
			margin: 5px;
			border: 2px solid #000000;
			border-radius: 10px;
			background-color: white;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40px;
		}
		.gamecell:hover {
			background-color: #cccccc;
		}
	</style>
</head>
<body>
	<h1>タップマッチ</h1>
	<p><span id="score">0</span> 点</p>
	<div id="gameboard"></div>
	<script>
		const emojiList = ["😀", "😍", "🥰", "🎉", "🙌", "🍕", "🍔", "🍟", "🍺", "🍦", "🍩", "🎮", "📱", "💻", "🚀", "🎸", "🎵", "🎬"];

function shuffle(array) {
			let currentIndex = array.length;
			let temporaryValue, randomIndex;

while (currentIndex !== 0) {
				randomIndex = Math.floor(Math.random() * currentIndex);
				currentIndex--;

temporaryValue = array[currentIndex];
				array[currentIndex] = array[randomIndex];
				array[randomIndex] = temporaryValue;
			}

return array;
		}

function updateScore(score) {
			let scoreElem = document.getElementById("score");
			let currentScore = Number(scoreElem.textContent);
			scoreElem.textContent = currentScore + score;
		}

function createGameBoard() {
			let gameboard = document.getElementById("gameboard");
			for (let i = 0; i < 36; i++) {
				let cell = document.createElement("div");
				cell.classList.add("gamecell");
				cell.addEventListener("click", function() {
					let matches = [];
					let clicked = this.textContent;

document.querySelectorAll(".gamecell").forEach(cell => {
						if (cell.textContent === clicked) {
							matches.push(cell);
						}
					});

matches.forEach(match => {
						match.classList.add("match");
					});

setTimeout(checkMatch, 500);
				});
				gameboard.appendChild(cell);
			}
		}

function startGame() {
			let emojiArray = emojiList.concat(emojiList);
			shuffle(emojiArray);
			document.querySelectorAll(".gamecell").forEach((cell, index) => {
				cell.textContent = emojiArray[index];
			});
		}

createGameBoard();
		startGame();
	</script>
</body>
</html>
```

実際のゲーム画面は以下のようになります。

![タップマッチの画面](https://i.imgur.com/lbG5Ysg.png)

画面にはタイトル、スコア表示、ゲームボードが表示されます。ゲームボードにはランダムに絵文字が表示され、ユーザーは同じ絵文字を3つ以上タップすることで消すことができます。消した絵文字の数がスコアに加算されます。連続で消すとボーナススコアが得られます。

以上がJavaScriptを含むタップマッチの実装例です。