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

No:3638

4204

←

Prev Next

→

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

Script

：「フルーツマッチング」このゲームでは、画面にランダムに表示される果物の絵文字をタップして、同じ種類の果物を3つ以上ならべることでポイントを獲得することが目的です。ゲームの流れは以下の通りです。 1. 「START」ボタンをタップするとゲームがスタートします。 2. 画面に果物の絵文字がランダムに表示されます。 3. 絵文字をタップして同じ種類の果物を3つ以上ならべます。 4. ならべた果物が消え、新たな果物がランダムに表示されます。 5. 制限時間内にできるだけ多くのポイントを獲得し、ランキングに登録しよう！以下が実装例です。必ず1枚のhtmlファイルとして実装してください。

フルーツマッチング

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

：「フルーツマッチング」

このゲームでは、画面にランダムに表示される果物の絵文字をタップして、同じ種類の果物を3つ以上ならべることでポイントを獲得することが目的です。

ゲームの流れは以下の通りです。

1. 「START」ボタンをタップするとゲームがスタートします。
2. 画面に果物の絵文字がランダムに表示されます。
3. 絵文字をタップして同じ種類の果物を3つ以上ならべます。
4. ならべた果物が消え、新たな果物がランダムに表示されます。
5. 制限時間内にできるだけ多くのポイントを獲得し、ランキングに登録しよう！

以下が実装例です。必ず1枚のhtmlファイルとして実装してください。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>フルーツマッチング</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f5f5f5;
			font-size: 24px;
			text-align: center;
		}
		#game-board {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 64px auto 0;
			width: 80vw;
			height: 80vw;
			border: 4px solid #333;
			background-color: #fff;
			box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
		}
		.fruit {
			width: 25%;
			height: 33.3333%;
			font-size: 60px;
			text-align: center;
			line-height: 1.2;
			transition: all 0.2s;
			cursor: pointer;
			user-select: none;
		}
		.fruit:hover {
			transform: scale(1.1);
			box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
		}
		.score {
			margin-top: 32px;
			font-size: 48px;
		}
		.timer {
			margin-top: 16px;
			font-size: 32px;
			color: #f00;
			animation: blink 1s linear infinite;
		}
		@keyframes blink {
			0% {
				opacity: 1;
			}
			50% {
				opacity: 0.4;
			}
			100% {
				opacity: 1;
			}
		}
	</style>
	<script>
		let fruits = ['🍎', '🍊', '🍇', '🍓', '🍌', '🍉', '🍒', '🍑', '🥝'];
		let gameBoard = document.getElementById('game-board');
		let scoreBoard = document.getElementById('score');
		let timer = document.getElementById('timer');

function startGame() {
			let score = 0;
			let time = 60;
			let timerId = setInterval(countdown, 1000);

scoreBoard.textContent = 'SCORE: 0';
			timer.textContent = 'TIME: 60';

for (let i = 0; i < 9; i++) {
				let fruit = document.createElement('div');
				fruit.classList.add('fruit');
				fruit.textContent = fruits[Math.floor(Math.random() * fruits.length)];
				fruit.addEventListener('click', function() {
					let selectedFruit = fruit.textContent;
					let selectedFruits = document.querySelectorAll('.selected');
					let sameFruits = [];

if (selectedFruits.length < 2) {
						fruit.classList.add('selected');
						return;
					}

fruit.classList.add('selected');
					selectedFruits = document.querySelectorAll('.selected');

for (let i = 0; i < selectedFruits.length; i++) {
						if (selectedFruits[i].textContent === selectedFruit) {
							sameFruits.push(selectedFruits[i]);
						}
					}

if (sameFruits.length < 3) {
						selectedFruits.forEach(function(selectedFruit) {
							selectedFruit.classList.remove('selected');
						});
						return;
					}

score += sameFruits.length;
					scoreBoard.textContent = 'SCORE: ' + score;
					sameFruits.forEach(function(sameFruit) {
						sameFruit.textContent = '';
					});
					checkGameOver();
				});

gameBoard.appendChild(fruit);
			}

function countdown() {
				time--;
				timer.textContent = 'TIME: ' + time;

if (time === 0) {
					clearInterval(timerId);
					checkGameOver();
				}
			}

function checkGameOver() {
				if (gameBoard.querySelectorAll('.fruit').length === 0) {
					alert('GAME OVER\nSCORE: ' + score);
					location.reload();
				}

if (time === 0) {
					alert('TIME UP!\nSCORE: ' + score);
					location.reload();
				}
			}
		}
	</script>
</head>
<body>
	<h1>フルーツマッチング</h1>
	<div id="game-board"></div>
	<div class="score" id="score"></div>
	<div class="timer" id="timer"></div>
	<button onclick="startGame()">START</button>
</body>
</html>
```