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

No:4338

3070

←

Prev Next

→

Shop 5 different products each time.
Developer User1006｜Date and time 23/6/27 20:10:09
Build time 22.8 sec｜Game capacity 1.867KB｜

Script

をするショッピングゲームを作ります。

買い物ゲーム

以下から商品を選んでください。

カートに入っている商品

合計金額

←

Prev　Next

→ 　

Back　

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

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

をするショッピングゲームを作ります。

<html>
<head>
	<title>買い物ゲーム</title>
	<meta charset="UTF-8">
	<style>
		body {
			font-size: 24px;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>買い物ゲーム</h1>
	<p>以下から商品を選んでください。</p>
	<div id="shop">
		<img src="item1.png" onclick="addItem(1)">
		<img src="item2.png" onclick="addItem(2)">
		<img src="item3.png" onclick="addItem(3)">
		<img src="item4.png" onclick="addItem(4)">
		<img src="item5.png" onclick="addItem(5)">
	</div>
	<p>カートに入っている商品</p>
	<div id="cart"></div>
	<p>合計金額</p>
	<div id="total"></div>

// カートに商品を追加する関数
		function addItem(itemNumber) {
			cart.push(itemNumber); // 選択した商品番号をカートに追加
			updateCart(); // カートの内容を更新
		}

// カートの内容を更新する関数
		function updateCart() {
			var cartDiv = document.getElementById("cart"); // カートの表示エリアの要素を取得
			cartDiv.innerHTML = ""; // カートの表示エリアを空にする
			for(var i=0; i<cart.length; i++) {
				var itemImg = document.createElement("img"); // 商品画像を表示するimg要素を作成
				itemImg.src = "item" + cart[i] + ".png"; // 商品番号に対応する画像を設定
				itemImg.style.width = "100px"; // 画像の大きさを設定
				cartDiv.appendChild(itemImg); // カートの表示エリアに追加
				total += 100; // 商品の値段を合計金額に加算
			}
			var totalDiv = document.getElementById("total"); // 合計金額の表示エリアの要素を取得
			totalDiv.innerHTML = "¥" + total; // 合計金額を表示
		}
	</script>
</body>
</html>