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

No:544

317

Synthesize materials to create random, low-probabi..ALL
Developer User3044｜Date and time 23/6/15 12:44:11
Build time 55.753 sec｜Game capacity 3.524KB｜

アプリは「アイテム合成ゲーム」として実装します。1枚のhtmlファイルにJavaScriptを含めます。スマホでの操作を前提とし、絵文字を多く使用します。ゲームの流れは以下の通りです。 1. 素材となるアイテムを選択する。 2. 素材を合成して新しいアイテムを作る。 3. 合成によって作られるアイテムはランダムで、低確率でレアアイテムができる。 4. 作ったアイテムはコレクションとしてカウントされる。アプリの実装は以下のようになります。

アイテム合成ゲーム

素材となるアイテムを選択してください。

🍎
🍇
🍓

合成したアイテムはこちらに表示されます。

作ったアイテムの数：0

上記のコードをコピーしてhtmlファイルに貼り付け、ゲームを実行してください。素材として🍎、🍇、🍓の3種類を用意していますが、他の絵文字でも構いません。また、レアアイテムの種類はrareItems配列に追加することで増やすことができます。以上が「アイテム合成ゲーム」としてのアプリ実装の例になります。

→ 　

0　

0　

[PR]現在の欲しいゲームランキング

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

(C)2023 HisashiApp

アプリは「アイテム合成ゲーム」として実装します。1枚のhtmlファイルにJavaScriptを含めます。スマホでの操作を前提とし、絵文字を多く使用します。

ゲームの流れは以下の通りです。
1. 素材となるアイテムを選択する。
2. 素材を合成して新しいアイテムを作る。
3. 合成によって作られるアイテムはランダムで、低確率でレアアイテムができる。
4. 作ったアイテムはコレクションとしてカウントされる。

アプリの実装は以下のようになります。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>アイテム合成ゲーム</title>
</head>
<body>

<h1>アイテム合成ゲーム</h1>

<p>素材となるアイテムを選択してください。</p>

<ul id="materials">
	<li id="material1" onclick="selectMaterial(1)">🍎</li>
	<li id="material2" onclick="selectMaterial(2)">🍇</li>
	<li id="material3" onclick="selectMaterial(3)">🍓</li>
</ul>

<p>合成したアイテムはこちらに表示されます。</p>

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

<p>作ったアイテムの数：<span id="count">0</span></p>

<script>
	var materials = []; // 選択された素材を保持する配列
	var rareItems = ["💎", "🎁", "🎉"]; // レアアイテムの種類
	
	function selectMaterial(num) {
		var material = document.getElementById("material" + num).innerHTML; // 選択された素材
		materials.push(material); // 選択した素材を配列に追加
		if (materials.length == 2) { // 素材が2つかつ合成可能な場合
			var result = combineItems(); // アイテムを合成して結果を受け取る
			showResult(result); // 結果を表示
			materials = []; // 素材を初期化
			var count = document.getElementById("count");
			if (result == "レアアイテム") { // レアアイテムができた場合、作ったアイテムの数を+2
				count.innerHTML = parseInt(count.innerHTML) + 2;
			} else { // 通常のアイテムができた場合、作ったアイテムの数を+1
				count.innerHTML = parseInt(count.innerHTML) + 1;
			}
		}
	}
	
	function combineItems() { // 素材を合成して結果を返す関数
		var rand = Math.random(); // 0以上1未満の乱数
		if (rand < 0.1) { // 10%の確率でレアアイテムができる
			return "レアアイテム";
		} else { // 90%の確率で通常のアイテムができる
			var combined = materials[0] + materials[1]; // 素材を合成
			return combined;
		}
	}
	
	function showResult(result) { // 結果を表示する関数
		var resultDiv = document.getElementById("result");
		resultDiv.innerHTML = "<p>合成結果：" + result + "</p>";
		if (result == "レアアイテム") { // レアアイテムができた場合
			var rareItem = rareItems[Math.floor(Math.random() * rareItems.length)]; // ランダムでレアアイテムの種類を決める
			resultDiv.innerHTML += "<p style='color: red;'>おめでとう！レアアイテム「" + rareItem + "」ができた！</p>";
		}
	}
</script>

</body>
</html>
```

上記のコードをコピーしてhtmlファイルに貼り付け、ゲームを実行してください。素材として🍎、🍇、🍓の3種類を用意していますが、他の絵文字でも構いません。また、レアアイテムの種類はrareItems配列に追加することで増やすことができます。

以上が「アイテム合成ゲーム」としてのアプリ実装の例になります。