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

No:309

2717

←

Prev Next

→

Cafe Management Game
Developer User2983｜Date and time 23/6/11 23:45:10
Build time 59.426 sec｜Game capacity 5.612KB｜

Script

カフェ経営ゲーム

ようこそカフェ経営ゲームへ！

0 人のお客様を接客しました ¥0

ゲームオーバー！

このカフェ経営ゲームでは、60秒の時間内にお客様を接客し、お金を稼ぐことが目的です。画面にはランダムに生成されるお客様たちが表示されるので、注文を取って受け取り、お金を稼ぎましょう。お客様たちはそれぞれ注文と待ち時間が異なります。お客様がサービスカウンターの下まで来てしまうと最悪です。60秒の間にどれだけのお客様を接客できるか挑戦してください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>カフェ経営ゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #f4f4f4;
			font-family: "Helvetica Neue", sans-serif;
		}

h1 {
			font-size: 2em;
			margin-top: 0;
			text-align: center;
		}

p {
			font-size: 1.2em;
			margin: 0;
		}

button {
			background-color: #4CAF50;
			border: none;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 1.2em;
			margin: 20px;
			cursor: pointer;
			border-radius: 10px;
		}

button:hover {
			background-color: #3e8e41;
		}

#game-screen {
			display: none;
		}

#game-over {
			display: none;
			text-align: center;
			margin-top: 50px;
		}

#customers-container {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			grid-gap: 20px;
			margin-top: 20px;
		}

.customer-card {
			background-color: white;
			border-radius: 10px;
			border: 1px solid #ccc;
			padding: 10px; 
		}

.customer-card p {
			margin-top: 0.5em;
		}

.customer-card button {
			margin-top: 1em;
		}

.status-bar {
			background-color: white;
			border-radius: 10px;
			border: 1px solid #ccc;
			padding: 10px;
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
		}

.status-bar span {
			font-size: 1.2em;
		}

</style>
</head>
<body>
	<h1>カフェ経営ゲーム</h1>

<div id="welcome-screen">
		<p>ようこそカフェ経営ゲームへ！</p>
		<button onclick="startGame()">スタート</button>
	</div>

<div id="game-screen">
		<div id="customers-container"></div>
		<div class="status-bar">
			<span id="customers-served">0 人のお客様を接客しました</span>
			<span id="money">¥0</span>
		</div>
	</div>

<div id="game-over">
		<p>ゲームオーバー！</p>
		<button onclick="restartGame()">もう一度遊ぶ</button>
	</div>

let money = 0;
		let customersServed = 0;

function getRandomCustomer() {
			return customers[Math.floor(Math.random() * customers.length)];
		}

function startGame() {
			document.getElementById("welcome-screen").style.display = "none";
			document.getElementById("game-screen").style.display = "block";
			addCustomerToScreen();
			setTimeout(function() {
				document.getElementById("game-screen").style.display = "none";
				document.getElementById("game-over").style.display = "block";
			}, 60000);
		}

function restartGame() {
			money = 0;
			customersServed = 0;
			document.getElementById("game-over").style.display = "none";
			document.getElementById("game-screen").style.display = "block";
			document.getElementById("customers-container").innerHTML = "";
			addCustomerToScreen();
			setTimeout(function() {
				document.getElementById("game-screen").style.display = "none";
				document.getElementById("game-over").style.display = "block";
			}, 60000);
		}
	</script>
</body>
</html>