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

No:2701

1062

←

Prev Next

→

Candy Store Management Game
Developer User3494｜Date and time 23/6/22 12:19:48
Build time 75.235 sec｜Game capacity 4.574KB｜

Script

駄菓子屋経営ゲーム

所持金: 1000円

スコア: 0点

ぼたなみせん値段: 20円

ビッグサンダー値段: 50円

なつかしアメ値段: 30円

ミルクキャラメル値段: 10円

ラムネ値段: 40円

チョコボール値段: 80円

何を買う？

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>駄菓子屋経営ゲーム</title>
	<style>
		body {
			font-size: 20px;
			background-color: #FEDCBA;
			text-align: center;
		}

#money, #score {
			font-size: 30px;
			font-weight: bold;
			margin-bottom: 20px;
		}

#products {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-bottom: 20px;
		}

.product {
			padding: 20px;
			margin: 10px;
			background-color: white;
			border-radius: 10px;
			box-shadow: 3px 3px 10px gray;
			cursor: pointer;
			transition: all 0.3s;
		}

.product:hover {
			background-color: #FEDCBA;
			transform: translateY(-3px);
			box-shadow: 6px 6px 10px gray;
		}

.product img {
			width: 100px;
			height: 100px;
			margin-bottom: 10px;
		}

.product span {
			font-size: 25px;
			font-weight: bold;
		}

#message {
			font-size: 25px;
			margin-bottom: 20px;
		}

#restart {
			font-size: 25px;
			padding: 10px;
			background-color: #FEDCBA;
			border: none;
			border-radius: 5px;
			box-shadow: 3px 3px 10px gray;
			cursor: pointer;
			transition: all 0.3s;
		}

#restart:hover {
			background-color: white;
			transform: translateY(-3px);
			box-shadow: 6px 6px 10px gray;
		}
	</style>
</head>
<body>
	<h1>駄菓子屋経営ゲーム</h1>
	<div id="money">所持金: 1000円</div>
	<div id="score">スコア: 0点</div>
	<div id="products">
		<div class="product" id="botanamisen">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/candy_1f36c.png">
			<span>ぼたなみせん</span>
			<span>値段: 20円</span>
		</div>
		<div class="product" id="bigthunder">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/chocolate-bar_1f36b.png">
			<span>ビッグサンダー</span>
			<span>値段: 50円</span>
		</div>
		<div class="product" id="natsukashiame">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/shortcake_1f370.png">
			<span>なつかしアメ</span>
			<span>値段: 30円</span>
		</div>
		<div class="product" id="milkcaramel">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/chocolate-bar_1f36b.png">
			<span>ミルクキャラメル</span>
			<span>値段: 10円</span>
		</div>
		<div class="product" id="ramune">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/bottle-with-popping-cork_1f37e.png">
			<span>ラムネ</span>
			<span>値段: 40円</span>
		</div>
		<div class="product" id="chocoball">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/chocolate-bar_1f36b.png">
			<span>チョコボール</span>
			<span>値段: 80円</span>
		</div>
	</div>
	<div id="message">何を買う？</div>
	<button id="restart">もう一度遊ぶ</button>

// 商品クリック
		let productButtons = document.querySelectorAll('.product');
		productButtons.forEach(button => {
			button.addEventListener('click', () => {
				let productId = button.getAttribute('id');
				let product = products.find(p => p.name == productId);
				if (money >= product.price) {
					money -= product.price;
					score += product.point;
					document.getElementById('money').innerHTML = `所持金: ${money}円`;
					document.getElementById('score').innerHTML = `スコア: ${score}点`;
					document.getElementById('message').innerHTML = `${product.name}を買った！`;
					button.style.backgroundColor = '#AAAAAA';
				} else {
					document.getElementById('message').innerHTML = 'お金が足りないよ！';
				}
			});
		});

// ゲームリセット
		let restartButton = document.getElementById('restart');
		restartButton.addEventListener('click', () => {
			money = 1000;
			score = 0;
			document.getElementById('money').innerHTML = `所持金: ${money}円`;
			document.getElementById('score').innerHTML = `スコア: ${score}点`;
			document.getElementById('message').innerHTML = '何を買う？';
			productButtons.forEach(button => {
				button.style.backgroundColor = 'white';
			});
		});
	</script>
</body>
</html>