Get rid of user ranking! 🤬💢Game's game

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

No:4064

105

←

Prev Next

→

Get rid of user ranking! 🤬💢Game
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/27 10:43:32
Build time 27.066 sec｜Game capacity 2.657KB｜

Script

は「フルーツマッチングゲーム」としよう。以下が実際のHTMLとJavaScriptコードだ。

このゲームでは、16個のフルーツのマスがランダムに配置され、プレイヤーは2つのマスをクリックしてフルーツが一致するかどうかを確認する。一致した場合は、そのマスにもう一度クリックするまでマッチング済みになり、一致しない場合は、選択したマスのフルーツが非選択状態になる。このゲームは、スマホまたはPCでプレイすることができる。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

は「フルーツマッチングゲーム」としよう。

以下が実際のHTMLとJavaScriptコードだ。

```html
<!DOCTYPE html>
<html>
<head>
	<title>Fruit Matching Game</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #F5DEB3;
			font-family: Arial;
		}

.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}

.box {
			margin: 10px;
			height: 80px;
			width: 80px;
			border-radius: 50%;
			border: 5px solid #333;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36px;
			cursor: pointer;
			background-color: #87CEFA;
			color: #FFF;
			text-shadow: 1px 1px #333;
			box-shadow: 2px 2px #333;
		}
	</style>
</head>
<body>
	<div class="container" id="container"></div>

// ゲーム盤を作成
		const container = document.getElementById('container');
		const boxes = [];
		for (let i = 0; i < 16; i++) {
			const box = document.createElement('div');
			box.classList.add('box');
			box.innerHTML = fruits[Math.floor(Math.random() * fruits.length)];
			box.addEventListener('click', () => {
				checkMatch(box);
			});
			boxes.push(box);
			container.appendChild(box);
		}

// 選択されたフルーツを保持する配列
		let selectedFruits = [];

// フルーツが一致したかチェックする関数
		const checkMatch = (box) => {
			selectedFruits.push(box.innerHTML);
			box.classList.add('selected');
			if (selectedFruits.length === 2) {
				if (selectedFruits[0] === selectedFruits[1]) {
					// フルーツが一致した場合
					boxes.forEach(box => {
						if (box.innerHTML === selectedFruits[0]) {
							box.classList.add('matched');
						}
					});
				} else {
					// フルーツが一致しなかった場合
					selectedFruits = [];
					setTimeout(() => {
						boxes.forEach(box => {
							box.classList.remove('selected');
						});
					}, 500);
				}
			}
		};
	</script>
</body>
</html>
```