A game that pushes the limits of JavaScript's game

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

No:3793

2476

←

Prev Next

→

A game that pushes the limits of JavaScript
Developer もちきなこ｜Date and time 23/6/26 17:00:36
Build time 39.546 sec｜Game capacity 3.923KB｜

Script

では、私は「フルーツマッチ」というゲームを作成しました。以下が、HTMLファイルに含めるJavaScriptコードです：

Let's play 「フルーツマッチ」!

このゲームは、以下の手順でプレイできます： 1. 果物がランダムに表示されます。 2. 画面上の果物をクリックして、選択してください。 3. 2つの果物を選択した場合、マッチする場合はどちらも背景色が緑色に変わります。 4. 全ての果物をマッチさせると、ゲーム終了アラートが表示されます。このゲームは、スマートフォンでもプレイしやすいように設計されており、絵文字も多用されています。是非プレイしてみてください！

←

Prev　Next

→ 　

Back　

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

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

では、私は「フルーツマッチ」というゲームを作成しました。

以下が、HTMLファイルに含めるJavaScriptコードです：

```
<!DOCTYPE html>
<html>
<head>
	<title>フルーツマッチ</title>
	<meta charset="UTF-8">
</head>
<body>
	<h3>Let's play 「フルーツマッチ」!</h3>
	<div id="game"></div>
	<script>
		// 配列に果物の種類を格納
		var fruits = ["🍎", "🍓", "🍊", "🍇", "🍌", "🍉", "🥭", "🍐", "🥝", "🍑"];
		
		// マッチする果物の個数
		var matchedFruits = 0;
		
		// 現在選択している果物の座標
		var currentFruit = null;
		
		// 果物をシャッフルする関数
		function shuffleFruits() {
			for (var i = 0; i < fruits.length; i++) {
				var j = Math.floor(Math.random() * (i + 1));
				var temp = fruits[i];
				fruits[i] = fruits[j];
				fruits[j] = temp;
			}
		}
		
		// 果物がマッチするかどうかをチェックする関数
		function checkMatch() {
			var selectedFruit = document.getElementById(currentFruit).innerHTML;
			var matches = document.querySelectorAll("[data-fruit='" + selectedFruit + "']");
			
			for (var i = 0; i < matches.length; i++) {
				if (matches[i].id !== currentFruit && matches[i].classList.contains("selected")) {
					matches[i].classList.add("matched");
					document.getElementById(currentFruit).classList.add("matched");
					matchedFruits += 2;
					
					// 全部の果物がマッチしたらゲーム終了
					if (matchedFruits === fruits.length) {
						alert("おめでとうございます！フルーツマッチ成功！");
					}
					
					return true;
				}
			}
			
			return false;
		}
		
		// 果物を選択する関数
		function selectFruit(fruit) {
			if (!currentFruit || currentFruit === fruit) {
				// 果物が選択されていないか、同じ果物が再度選択された場合は、果物を選択する
				document.getElementById(fruit).classList.add("selected");
				currentFruit = fruit;
			} else {
				// 別の果物が選択された場合は、マッチするかどうかをチェックする
				var match = checkMatch();
				
				if (!match) {
					// 果物がマッチしない場合は、選択された果物のスタイルをリセットする
					document.getElementById(currentFruit).classList.remove("selected");
					currentFruit = fruit;
					document.getElementById(fruit).classList.add("selected");
				} else {
					// 果物がマッチした場合は、現在選択している果物はリセットする
					currentFruit = null;
				}
			}
		}
		
		// HTMLに果物を表示する
		function generateFruits() {
			shuffleFruits();
			
			var game = document.getElementById("game");
			
			for (var i = 0; i < fruits.length; i++) {
				var div = document.createElement("div");
				div.classList.add("fruit");
				div.setAttribute("id", "fruit-" + i);
				div.setAttribute("data-fruit", fruits[i]);
				div.innerHTML = fruits[i];
				div.addEventListener("click", function() {
					selectFruit(this.id);
				});
				game.appendChild(div);
			}
		}
		
		generateFruits();
	</script>
	<style>
		.fruit {
			display: inline-block;
			font-size: 3em;
			margin-right: 20px;
			cursor: pointer;
		}
		
		.selected {
			background-color: pink;
		}
		
		.matched {
			background-color: green;
		}
	</style>
</body>
</html>
```

このゲームは、以下の手順でプレイできます：

1. 果物がランダムに表示されます。
2. 画面上の果物をクリックして、選択してください。
3. 2つの果物を選択した場合、マッチする場合はどちらも背景色が緑色に変わります。
4. 全ての果物をマッチさせると、ゲーム終了アラートが表示されます。

このゲームは、スマートフォンでもプレイしやすいように設計されており、絵文字も多用されています。是非プレイしてみてください！