フルーツマッチングゲーム

JavaScript: このゲームは、16個のカードを持つマッチングゲームです。プレイヤーは、カードをクリックして、下に隠れたフルーツを見つけます。2つのカードが一致すると、それらはマッチとしてマークされ、ゲームから除外されます。全てのカードがマッチすると、プレーヤーはクリアとして報告されます。このゲームは、モバイル端末を前提として設計されており、スマートフォンのタッチスクリーンで遊ぶことができます。また、フルーツ絵文字を使用しています。ゲームの難易度を調整するために、フルーツの種類やカードの数を変更することができます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

はこれだ！「フルーツマッチングゲーム」

必要なライブラリはありません。以下のHTMLとJavaScriptを含むファイルを作成してください。

HTML:

```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit Matching Game</title>
<style>
body {
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  margin-top: 50px;
}

#game-board {
  margin: 50px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
  grid-gap: 10px;
  max-width: 500px;
}

.card {
  background-color: #fce5cd;
  font-size: 60px;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.card:hover {
  background-color: #fdc089;
}

.card.matched {
  background-color: #8ed1fc;
  color: white;
  cursor: default;
}
</style>
</head>
<body>
<h1>フルーツマッチングゲーム</h1>
<div id="game-board"></div>
<script src="script.js"></script>
</body>
</html>
```

JavaScript:

```
const fruits = ['🍎', '🍊', '🍇', '🍉', '🍓', '🍌', '🍑', '🍋'];
const boardSize = 16;
let selectedCards = [];
let matchedCards = [];

function createBoard() {
  const board = document.getElementById('game-board');
  for (let i = 0; i < boardSize; i++) {
    const card = document.createElement('div');
    card.classList.add('card');
    card.addEventListener('click', selectCard);
    board.appendChild(card);
  }
}

createBoard();
```

このゲームは、16個のカードを持つマッチングゲームです。プレイヤーは、カードをクリックして、下に隠れたフルーツを見つけます。2つのカードが一致すると、それらはマッチとしてマークされ、ゲームから除外されます。全てのカードがマッチすると、プレーヤーはクリアとして報告されます。

このゲームは、モバイル端末を前提として設計されており、スマートフォンのタッチスクリーンで遊ぶことができます。また、フルーツ絵文字を使用しています。ゲームの難易度を調整するために、フルーツの種類やカードの数を変更することができます。