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

No:1803

8074

←

Prev Next

→

Ramen noodle drainer game
Developer anonymous｜Date and time 70/1/1 10:12:44
Build time unknown sec｜Game capacity 4.364KB｜

Script

ラーメンの湯切りゲーム

【ゲーム概要】ラーメンを茹でた後に、湯切りをして完成させるゲームです。スタートボタンを押すと、画面上の鍋に水が入り、火がついたストーブの上にのせられます。鍋には茹でたラーメンが入っていることになります。その後、湯切り作業がスタートします。指定された時間内に水を完全に排出することが目的です。湯切りは、鍋の水位がMAXでなければ可能です。また、湯切り作業中に他の操作を行うことはできません。完成までの時間を競うゲームです。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ラーメンの湯切りゲーム</title>
	<style>
		body{
			background-color: #f2f2f2;
			text-align: center;
		}
		h1{
			font-size: 50px;
			margin-top: 50px;
			color: #ff0000;
		}
		.container{
			display: flex;
			justify-content: center;
			margin: 50px;
		}
		.stove{
			background-image: url('https://cdn.pixabay.com/photo/2015/08/02/00/04/stove-870773_960_720.png');
			background-size: 100%;
			background-repeat: no-repeat;
			width: 300px;
			height: 300px;
			position: relative;
		}
		.stove > .pot{
			position: absolute;
			top: 25%;
			left: 25%;
			width: 50%;
			height: 50%;
			background-image: url('https://cdn.pixabay.com/photo/2016/11/24/21/23/pot-1855519_960_720.png');
			background-size: 100%;
			background-repeat: no-repeat;
		}
		.stove > .indicator{
			position: absolute;
			bottom: 10px;
			left: 45%;
			width: 10px;
			height: 50px;
			background-color: #d0d0d0;
			border-radius: 20px;
		}
		.stove > .water{
			position: absolute;
			bottom: 30%;
			left: 30%;
			width: 40%;
			height: 20%;
			background-color: #00bfff;
			transform-origin: bottom;
			transform: scaleY(0);
			transition: transform 2s;
			border-radius: 0 0 50% 50%;
		}
		button{
			font-size: 30px;
			padding: 10px 20px;
			margin: 20px;
			background-color: #ffff00;
			border: none;
			border-radius: 5px;
			box-shadow: 2px 2px #d0d0d0;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>ラーメンの湯切りゲーム</h1>
	<div class="container">
		<div class="stove">
			<div class="pot"></div>
			<div class="indicator"></div>
			<div class="water"></div>
		</div>
	</div>
	<button id="startBtn">スタート</button>

//アニメーション終了監視用変数
		let animationEnd = true;

//水位を増やす関数
		function addWater(){
			let waterLevel = document.querySelector('.water').style.transform;
			waterLevel = waterLevel.slice(waterLevel.indexOf('(') + 1, -1);
			waterLevel = parseFloat(waterLevel);

if(waterLevel >= 1){
				//水位がMAXの場合はアニメーション終了
				animationEnd = true;
				return;
			}

waterLevel += 0.1;
			document.querySelector('.water').style.transform = 'scaleY(' + waterLevel + ')';
			setTimeout(function(){
				addWater();
			}, 200);
		}

//湯切り開始の関数
		function startDraining(){
			//水位がMAXの場合は湯切り不可能
			let waterLevel = document.querySelector('.water').style.transform;
			waterLevel = waterLevel.slice(waterLevel.indexOf('(') + 1, -1);
			waterLevel = parseFloat(waterLevel);

if(waterLevel >= 1){
				alert('湯切り不可能です！');
				return;
			}

//湯切り開始
			if(!animationEnd){
				//アニメーション中は湯切り不可能
				alert('アニメーション中です！');
				return;
			}

animationEnd = false;
			let pot = document.querySelector('.pot');
			let indicator = document.querySelector('.indicator');
			let water = document.querySelector('.water');
			pot.style.transition = 'all 2s';
			pot.style.top = '10%';
			setTimeout(function(){
				pot.style.top = '25%';
			}, 2000);
			setTimeout(function(){
				indicator.style.backgroundColor = '#ff0000';
				water.style.transform = 'scaleY(1)';
				addWater();
			}, 3000);
			setTimeout(function(){
				water.style.transform = 'scaleY(0)';
				animationEnd = true;
				indicator.style.backgroundColor = '#d0d0d0';
				alert('湯切り完了！');
			}, 6000);
		}

//スタートボタンクリックで湯切り開始
		document.querySelector('#startBtn').addEventListener('click', function(){
			startDraining();
		});

</script>
</body>
</html>

【ゲーム概要】
ラーメンを茹でた後に、湯切りをして完成させるゲームです。スタートボタンを押すと、画面上の鍋に水が入り、火がついたストーブの上にのせられます。鍋には茹でたラーメンが入っていることになります。その後、湯切り作業がスタートします。指定された時間内に水を完全に排出することが目的です。湯切りは、鍋の水位がMAXでなければ可能です。また、湯切り作業中に他の操作を行うことはできません。完成までの時間を競うゲームです。