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

No:3783

1267

A game in which various things are collected and c..ALL
Developer User3566｜Date and time 23/6/26 15:45:20
Build time 31.882 sec｜Game capacity 2.814KB｜

了解しました。では、「アイテム合成ゲーム」として実装します。以下が、HTMLとJavaScriptでの実装例です。 HTML:

アイテム合成ゲーム

🍎 🍇 🍓 🥕 🍆

JavaScript: 説明： - HTMLで、アイテムボックスとボタン、結果表示用のDIVを用意しています。 - JavaScriptで、アイテムのレシピ（何つなげれば何ができるか）を配列に格納しています。 - クリックされたアイテムのIDをselectedItems配列に追加・削除して、どのアイテムが選択されたかを管理しています。 - 合成ボタンが押されたら、選択されたアイテムのIDを元に、適切なレシピがあるかを探し、あれば結果表示エリアにレシピに応じた絵文字を表示します。なければ失敗と表示します。 - 結果表示後は、選択されたアイテムをリセットして、ボックス内のアイテムの選択状態も解除します。以上が、簡単なアイテム合成ゲームの実装例です。アイテムレシピを増やすことで、より楽しいゲームになるかもしれません。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

了解しました。では、「アイテム合成ゲーム」として実装します。

以下が、HTMLとJavaScriptでの実装例です。

HTML:

```
<!DOCTYPE html>
<html>
<head>
	<title>アイテム合成ゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<h1>アイテム合成ゲーム</h1>

<div id="item-box">
		<span class="item" onclick="selectItem(1)">🍎</span>
		<span class="item" onclick="selectItem(2)">🍇</span>
		<span class="item" onclick="selectItem(3)">🍓</span>
		<span class="item" onclick="selectItem(4)">🥕</span>
		<span class="item" onclick="selectItem(5)">🍆</span>
	</div>

<button onclick="craftItem()">合成する！</button>

<div id="result"></div>

<script src="game.js"></script>
</body>
</html>
```

JavaScript:

```
const itemRecipes = [
	{ ingredients: [1, 2], result: "🍉" },
	{ ingredients: [3, 4], result: "🥦" },
	{ ingredients: [2, 3], result: "🍓" },
	{ ingredients: [5, 2], result: "🍆" }
];

let selectedItems = [];

function selectItem(itemId) {
	const itemEl = document.querySelector(`.item:nth-child(${itemId})`);
	if (itemEl.classList.contains("selected")) {
		itemEl.classList.remove("selected");
		selectedItems = selectedItems.filter(item => item !== itemId);
	} else {
		itemEl.classList.add("selected");
		selectedItems.push(itemId);
	}
}

function craftItem() {
	const resultEl = document.querySelector("#result");
	const selectedRecipe = itemRecipes.find(recipe => {
		return recipe.ingredients.every(id => selectedItems.includes(id));
	});
	if (selectedRecipe) {
		const result = selectedRecipe.result;
		resultEl.textContent = `合成成功！ ${result}`;
	} else {
		resultEl.textContent = "合成失敗...";
	}
	selectedItems = [];
	document.querySelectorAll(".item").forEach(el => el.classList.remove("selected"));
}
```

説明：
- HTMLで、アイテムボックスとボタン、結果表示用のDIVを用意しています。
- JavaScriptで、アイテムのレシピ（何つなげれば何ができるか）を配列に格納しています。
- クリックされたアイテムのIDをselectedItems配列に追加・削除して、どのアイテムが選択されたかを管理しています。
- 合成ボタンが押されたら、選択されたアイテムのIDを元に、適切なレシピがあるかを探し、あれば結果表示エリアにレシピに応じた絵文字を表示します。なければ失敗と表示します。
- 結果表示後は、選択されたアイテムをリセットして、ボックス内のアイテムの選択状態も解除します。

以上が、簡単なアイテム合成ゲームの実装例です。アイテムレシピを増やすことで、より楽しいゲームになるかもしれません。