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

No:3086

2806

←

Prev Next

→

Lets buy candy! Penalty if you run out of money!
Developer User3589｜Date and time 23/6/23 18:45:38
Build time 37.357 sec｜Game capacity 3.116KB｜

Script

お菓子買い物ゲーム

100円

だんご

50円

コーヒー

80円

キャンディー

30円

←

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: 3em;
			text-align: center;
		}

button {
			font-size: 1em;
			padding: 1em;
			margin: 1em;
			border-radius: 0.5em;
			background-color: #f2ca94;
			color: #fff;
			border: none;
			box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, 0.3);
			cursor: pointer;
		}

button:hover {
			background-color: #f2b24b;
		}

#money {
			font-size: 2em;
		}

#items {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 2em;
		}

.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 1em;
			margin: 1em;
			border-radius: 0.5em;
			background-color: #ffd59b;
			color: #333;
			box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, 0.3);
		}

.item:hover {
			transform: translateY(-0.2em);
			box-shadow: 0 0.4em 0.4em rgba(0, 0, 0, 0.3);
		}

.item img {
			width: 5em;
			height: 5em;
		}

.item-name {
			font-size: 1em;
			text-align: center;
			margin: 0.5em;
		}

.item-price {
			font-size: 0.8em;
			text-align: center;
			margin: 0.5em;
		}

.item-button {
			font-size: 0.8em;
			padding: 0.5em;
			border-radius: 0.5em;
			background-color: #f2ca94;
			color: #fff;
			border: none;
			box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
			cursor: pointer;
		}

.item-button:hover {
			background-color: #f2b24b;
		}
	</style>
</head>
<body>
	<h1>お菓子買い物ゲーム</h1>
	<div id="money">100円</div>
	<div id="items">
		<div class="item">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/298/dango_1f361.png">
			<div class="item-name">だんご</div>
			<div class="item-price">50円</div>
			<button class="item-button" data-name="だんご" data-price="50">かう</button>
		</div>
		<div class="item">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/298/coffee_2615.png">
			<div class="item-name">コーヒー</div>
			<div class="item-price">80円</div>
			<button class="item-button" data-name="コーヒー" data-price="80">かう</button>
		</div>
		<div class="item">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/298/candy_1f36c.png">
			<div class="item-name">キャンディー</div>
			<div class="item-price">30円</div>
			<button class="item-button" data-name="キャンディー" data-price="30">かう</button>
		</div>
	</div>
	<script>
		let money = 100;
		const moneyDiv = document.getElementById('money');

function updateMoney() {
			moneyDiv.textContent = money + '円';
		}

updateMoney();