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

No:1307

204

A game in which you make sushi and serve it to cus..ALL
Developer User3301｜Date and time 23/6/18 10:47:54
Build time 54.423 sec｜Game capacity 5.739KB｜

以下が寿司作りのゲームの実装例です。このゲームは、プレイヤーが注文された種類の寿司を作り、提供することが目的です。

寿司作りゲーム

注文された寿司:

マグロサーモン

寿司が出来ました！

材料が足りません。泣き顔

材料をドラッグしてご飯に載せてください。

このゲームでは、プレイヤーは注文された寿司を作るために、海苔・マグロ・サーモンの3種類の材料をご飯に載せます。材料をドラッグして、ご飯の上に置くことができます。材料をすべて載せた後、作るボタンをクリックします。注文された寿司がプレイヤーが作った寿司と一致する場合、成功となります。失敗した場合は、材料が足りていないためです。成功した場合は笑顔とともに寿司が表示されますが、失敗した場合は泣き顔が表示されます。プレイヤーはもう一度遊ぶことができます。

→ 　

0　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

以下が寿司作りのゲームの実装例です。このゲームは、プレイヤーが注文された種類の寿司を作り、提供することが目的です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>寿司作りゲーム</title>
	<style>
		body {
			font-size: 1.5rem;
			text-align: center;
		}
		#game-area {
			margin: 0 auto;
			padding: 2rem;
			background-color: #f5deb3;
			border: 1rem solid #ffbb33;
			border-radius: 2rem;
		}
		#game-area img {
			width: 10rem;
			height: 10rem;
		}
		#order {
			margin-bottom: 2rem;
		}
		#success-message, #error-message {
			display: none;
			margin-top: 2rem;
		}
		#success-message img {
			width: 5rem;
			height: 5rem;
			margin: 1rem;
		}
		#help-message {
			margin-top: 2rem;
		}
	</style>
</head>
<body>
	<h1>寿司作りゲーム</h1>
	<div id="game-area">
		<p id="order">注文された寿司: <span id="ordered-sushi"></span></p>
		<p><img id="rice" src="rice.png" alt="ご飯"></p>
		<p id="ingredients">
			<img class="ingredient" src="nori.png" alt="海苔">
			<img class="ingredient" src="tuna.png" alt="マグロ">
			<img class="ingredient" src="salmon.png" alt="サーモン">
		</p>
		<button id="make-button">作る</button>
		<p id="success-message">寿司が出来ました！<br><img src="smiling.png" alt="笑顔"><img src="sushi.png" alt="寿司"></p>
		<p id="error-message">材料が足りません。<img src="crying.png" alt="泣き顔"></p>
		<p id="help-message">材料をドラッグしてご飯に載せてください。</p>
	</div>
	<script>
		var orderedSushi = '';
		var riceAdded = false;
		var noriAdded = false;
		var tunaAdded = false;
		var salmonAdded = false;
		var makeButton = document.getElementById('make-button');
		var successMessage = document.getElementById('success-message');
		var errorMessage = document.getElementById('error-message');
		var helpMessage = document.getElementById('help-message');
		var orderedSushiSpan = document.getElementById('ordered-sushi');

// 注文された寿司を表示
		function showOrderedSushi() {
			var sushiList = ['マグロの巻き寿司', 'サーモンの刺身', 'マグロの刺身', 'サーモンの巻き寿司'];
			var randomIndex = Math.floor(Math.random() * sushiList.length);
			orderedSushi = sushiList[randomIndex];
			orderedSushiSpan.textContent = orderedSushi;
		}

// 寿司作りが成功したときの処理
		function success() {
			successMessage.style.display = 'block';
			errorMessage.style.display = 'none';
			helpMessage.style.display = 'none';
			riceAdded = false;
			noriAdded = false;
			tunaAdded = false;
			salmonAdded = false;
			makeButton.textContent = 'もう一度遊ぶ';
			makeButton.removeEventListener('click', makeSushi);
			makeButton.addEventListener('click', resetGame);
		}

// 寿司作りが失敗したときの処理
		function fail() {
			successMessage.style.display = 'none';
			errorMessage.style.display = 'block';
			helpMessage.style.display = 'none';
		}

// ゲームをリセットする
		function resetGame() {
			showOrderedSushi();
			successMessage.style.display = 'none';
			errorMessage.style.display = 'none';
			helpMessage.style.display = 'block';
			makeButton.textContent = '作る';
			makeButton.removeEventListener('click', resetGame);
			makeButton.addEventListener('click', makeSushi);
		}

// 寿司を作る
		function makeSushi() {
			if (!riceAdded || !noriAdded || (!tunaAdded && !salmonAdded)) {
				fail();
				return;
			}

var sushi;
			if (tunaAdded && salmonAdded) {
				sushi = 'マグロサーモンの握り寿司';
			} else if (tunaAdded) {
				sushi = 'マグロの握り寿司';
			} else if (salmonAdded) {
				sushi = 'サーモンの握り寿司';
			}
			if (sushi === orderedSushi) {
				success();
			} else {
				fail();
			}
		}

// イベントリスナーを設定する
		makeButton.addEventListener('click', makeSushi);
		showOrderedSushi();
		for (var i = 0; i < 3; i++) {
			var ingredientImg = document.getElementsByClassName('ingredient')[i];
			ingredientImg.addEventListener('dragstart', function(event) {
				event.dataTransfer.setData('text', event.target.alt);
			});
			ingredientImg.addEventListener('dragend', function(event) {
				event.target.style.opacity = '1';
			});
		}
		var riceImg = document.getElementById('rice');
		riceImg.addEventListener('dragover', function(event) {
			event.preventDefault();
		});
		riceImg.addEventListener('dragenter', function(event) {
			event.target.style.border = 'dashed 0.5rem #ffbb33';
		});
		riceImg.addEventListener('dragleave', function(event) {
			event.target.style.border = '';
		});
		riceImg.addEventListener('drop', function(event) {
			event.target.style.border = '';
			var ingredientName = event.dataTransfer.getData('text');
			if (ingredientName === '海苔') {
				noriAdded = true;
			} else if (ingredientName === 'マグロ') {
				tunaAdded = true;
			} else if (ingredientName === 'サーモン') {
				salmonAdded = true;
			}
			riceAdded = true;
		});
	</script>
</body>
</html>

このゲームでは、プレイヤーは注文された寿司を作るために、海苔・マグロ・サーモンの3種類の材料をご飯に載せます。材料をドラッグして、ご飯の上に置くことができます。材料をすべて載せた後、作るボタンをクリックします。注文された寿司がプレイヤーが作った寿司と一致する場合、成功となります。失敗した場合は、材料が足りていないためです。成功した場合は笑顔とともに寿司が表示されますが、失敗した場合は泣き顔が表示されます。プレイヤーはもう一度遊ぶことができます。