Open a treasure chest and get a random treasure.'s game | AI game creator

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

No:133

712

Open a treasure chest and get a random treasure.
Developer ひさひさ｜Date and time 23/5/24 3:08:55
Build time 92.851 sec｜Game capacity 2.516KB｜

するゲームを作ります。ゲーム説明：プレイヤーは宝箱を開けることができます。開けるとランダムで宝が手に入り、その価値が表示されます。宝の価値は、1000、2000、5000、10000、50000、100000のいずれかです。プレイヤーはできるだけ高価な宝を手に入れることを目指してください。以下が、実装したコードです。

このコードは、HTMLファイル内でJavaScriptを含んでいます。動作するためには、ブラウザでHTMLファイルを開くだけでよく、特にインストールは必要ありません。 `#box`という要素があり、それが宝箱を表します。`onclick`属性を使って、クリック時に`openBox()`というJavaScript関数を呼び出しています。`#treasure`という要素があり、それがランダムに得られる宝の価値を表示します。 `openBox()`関数では、先に定義された`treasures`という配列からランダムに宝を選び、`#treasure`要素に価値を表示する処理が行われます。`Math.random()`メソッドを使ってランダムなインデックスを取得し、そのインデックスを使って配列から宝の価値を取得しています。プレイヤーは画面上の宝箱をクリックすることで、宝を手に入れることができます。スマホでも操作がしやすく、宝箱のイメージに合わせてスタイルを設定しています。また、宝箱をクリックした瞬間に宝が得られるという爽快感を出すために、クリック時のアニメーションも設定しています。

→ 　

4　

2　

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

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

(C)2023 HisashiApp

するゲームを作ります。

ゲーム説明：
プレイヤーは宝箱を開けることができます。開けるとランダムで宝が手に入り、その価値が表示されます。宝の価値は、1000、2000、5000、10000、50000、100000のいずれかです。プレイヤーはできるだけ高価な宝を手に入れることを目指してください。

以下が、実装したコードです。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>宝箱ゲーム</title>
	<style>
		#box {
			width: 100px;
			height: 100px;
			background-color: brown;
			border-radius: 50%;
			margin: 50px auto;
			position: relative;
			cursor: pointer;
		}
		#box:active {
			top: 3px;
		}
		#treasure {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 2em;
		}
	</style>
</head>
<body>
	<div id="box" onclick="openBox()">
		<div id="treasure"></div>
	</div>

<script>
		function openBox() {
			const treasures = [1000, 2000, 5000, 10000, 50000, 100000];
			const randomIndex = Math.floor(Math.random() * treasures.length);
			const treasure = treasures[randomIndex];
			document.getElementById("treasure").innerHTML = "¥" + treasure;
		}
	</script>
</body>
</html>
```

このコードは、HTMLファイル内でJavaScriptを含んでいます。動作するためには、ブラウザでHTMLファイルを開くだけでよく、特にインストールは必要ありません。

`#box`という要素があり、それが宝箱を表します。`onclick`属性を使って、クリック時に`openBox()`というJavaScript関数を呼び出しています。`#treasure`という要素があり、それがランダムに得られる宝の価値を表示します。

`openBox()`関数では、先に定義された`treasures`という配列からランダムに宝を選び、`#treasure`要素に価値を表示する処理が行われます。`Math.random()`メソッドを使ってランダムなインデックスを取得し、そのインデックスを使って配列から宝の価値を取得しています。

プレイヤーは画面上の宝箱をクリックすることで、宝を手に入れることができます。スマホでも操作がしやすく、宝箱のイメージに合わせてスタイルを設定しています。また、宝箱をクリックした瞬間に宝が得られるという爽快感を出すために、クリック時のアニメーションも設定しています。