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

No:1590

694

←

Prev Next

→

Coffee shop simulator
Developer AI絵師｜Date and time 23/6/18 19:08:42
Build time 67.312 sec｜Game capacity 5.426KB｜

Script

Coffee Shop Simulator ☕️

What would you like to drink?

Coffee

A classic favourite

Latte

Smooth and silky

Mocha

Chocolatey goodness

Chai

Spice things up

このコーヒーショップシミュレーターゲームでは、プレイヤーは4つの異なるコーヒードリンクの中から選択できます。それぞれのドリンクには画像と簡単な説明が表示され、プレイヤーはドリンクをクリックすることで注文することができます。プレイヤーがドリンクを注文すると、選択したドリンクの名称、説明、画像が表示されます。プレイヤーは「再生」ボタンをクリックして、再び別のドリンクを注文することができます。このゲームは、スマートフォンで簡単に操作できるように設計されており、絵文字を多用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Coffee Shop Simulator</title>
	<meta charset="UTF-8">
	<style>
		body {
			background-color: #f2e6d2;
			font-family: sans-serif;
			text-align: center;
		}
		h1 {
			margin-top: 50px;
			font-size: 3em;
			color: #505050;
		}
		h2 {
			margin-top: 30px;
			font-size: 2em;
			color: #7f7f7f;
		}
		button {
			background-color: #bfa07a;
			border: none;
			color: #ffffff;
			font-size: 1.5em;
			padding: 20px;
			border-radius: 10px;
			cursor: pointer;
		}
		#drink {
			margin-top: 50px;
			font-size: 2em;
			color: #7f7f7f;
			text-align: center;
			width: 80%;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
		}
		.drink-item {
			background-color: #ffffff;
			border-radius: 10px;
			box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
			margin-bottom: 20px;
			width: 40%;
			display: flex;
			align-items: center;
			padding: 20px;
			cursor: pointer;
			flex-direction: column;
			transition: transform 0.2s, box-shadow 0.2s;
		}
		.drink-item:hover {
			transform: translateY(-10px);
			box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
		}
		.drink-item img {
			max-width: 100%;
			height: auto;
		}
		.drink-item h3 {
			margin-top: 10px;
			font-size: 1.5em;
			color: #505050;
			margin-bottom: 5px;
		}
		.drink-item p {
			font-size: 1em;
			color: #7f7f7f;
			text-align: center;
			margin-top: 5px;
		}
		#order {
			display: none;
			margin-top: 50px;
			font-size: 2em;
			color: #7f7f7f;
			text-align: center;
			width: 80%;
			margin-left: auto;
			margin-right: auto;
			padding: 20px;
			background-color: #ffffff;
			border-radius: 10px;
			box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
		}
		#order img {
			max-width: 100%;
			height: auto;
			margin-bottom: 20px;
		}
		#order h3 {
			font-size: 1.5em;
			color: #505050;
			margin-bottom: 5px;
		}
		#order p {
			font-size: 1em;
			color: #7f7f7f;
			text-align: center;
			margin-top: 5px;
		}
	</style>
</head>
<body>
	<h1>Coffee Shop Simulator ☕️</h1>
	<h2>What would you like to drink?</h2>
	<div id="drink">
		<div class="drink-item" onclick="order('coffee')">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/steaming-cup_1f375.png">
			<h3>Coffee</h3>
			<p>A classic favourite</p>
		</div>
		<div class="drink-item" onclick="order('latte')">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/coffee_2615.png">
			<h3>Latte</h3>
			<p>Smooth and silky</p>
		</div>
		<div class="drink-item" onclick="order('mocha')">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/cup-with-straw_1f964.png">
			<h3>Mocha</h3>
			<p>Chocolatey goodness</p>
		</div>
		<div class="drink-item" onclick="order('chai')">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/cup-with-handle_1f375.png">
			<h3>Chai</h3>
			<p>Spice things up</p>
		</div>
	</div>
	<div id="order">
		<img id="order-img" src="">
		<h3 id="order-name"></h3>
		<p id="order-desc"></p>
		<button onclick="playAgain()">Play Again</button>
	</div>

if (drink == "coffee") {
				drinkName = "Coffee";
				drinkDesc = "A classic favourite.";
				orderImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/steaming-cup_1f375.png";
			} else if (drink == "latte") {
				drinkName = "Latte";
				drinkDesc = "Smooth and silky.";
				orderImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/coffee_2615.png";
			} else if (drink == "mocha") {
				drinkName = "Mocha";
				drinkDesc = "Chocolatey goodness.";
				orderImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/cup-with-straw_1f964.png";
			} else if (drink == "chai") {
				drinkName = "Chai";
				drinkDesc = "Spice things up.";
				orderImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/cup-with-handle_1f375.png";
			}

orderName.innerHTML = drinkName;
			orderDesc.innerHTML = drinkDesc;
			document.getElementById("drink").style.display = "none";
			document.getElementById("order").style.display = "block";
		}

function playAgain() {
			document.getElementById("drink").style.display = "flex";
			document.getElementById("order").style.display = "none";
		}
	</script>
</body>
</html>