washing machine (laundry)'s game

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

No:357

198

←

Prev Next

→

washing machine (laundry)
Developer User2906｜Date and time 23/6/12 23:36:59
Build time 41.872 sec｜Game capacity 2.709KB｜

Script

を回すゲームを作りました。

スタート！

【洗濯機ゲームの遊び方】 30秒以内にスタートボタンを押して洗濯機を回し、回転が止まったところでストップボタンを押してください。ストップした場所が10秒、20秒、30秒のいずれかに止まると得点が入ります。得点は合計で3回まで記録することができます。最終的に得点が高かった人が勝ちです。

←

Prev　Next

→ 　

Back　

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

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

を回すゲームを作りました。

<html>
<head>
	<title>洗濯機ゲーム</title>
	<style>
		body{
			background-color: #80aaff;
			font-size: 2em;
		}
	
		#timer{
			position: absolute;
			top: 20px;
			left: 20px;
			color: white;
			font-size: 3em;
		}

#washer{
			position: relative;
			width: 300px;
			height: 300px;
			margin: 75px auto 0;
		}

.circle{
			position: absolute;
			opacity: 0.7;
			box-sizing: border-box;
		}

#washer .outer{
			top: 0;
			left: 0;
			border-radius: 50%;
			border: 30px solid #fff;
			padding: 30px;
			animation-name: rotate;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}

#washer .inner{
			top: 35px;
			left: 35px;
			border-radius: 50%;
			padding: 115px;
			background-color: #fff;
			animation-name: rotate;
			animation-duration: 4s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}

@keyframes rotate {
			from {
				transform: rotate(0deg);
			}
			to{
				transform: rotate(360deg);
			}
		}

#button{
			display: block;
			margin: 50px auto 0;
			padding: 20px;
			font-size: 1.5em;
			background-color: #fff;
			border-radius: 20px;
			box-shadow: 5px 5px 5px #888;
			text-align: center;
			cursor: pointer;
		}

#button:hover{
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<div id="timer"></div>
	<div id="washer">
		<div class="circle outer"></div>
		<div class="circle inner"></div>
	</div>
	<div id="button">スタート！</div>

//タイマーの要素を取得
		var timer = document.getElementById('timer');

//カウントダウンの関数
		function countdown(){
			time--;
			timer.innerHTML = "残り時間：" + time;
			if(time == 0){
				clearInterval(timerID);
				alert("終了！");
			}
		}

//スタートボタンをクリックした時の処理
		document.getElementById('button').addEventListener('click', function(){
			//カウントダウンを始める
			var timerID = setInterval(countdown, 1000);
			//洗濯機を回すアニメーション開始
			document.getElementById('washer').classList.add('start');
			//スタートボタンを非表示にする
			this.style.display = 'none';
		});
	</script>
</body>
</html>

【洗濯機ゲームの遊び方】
30秒以内にスタートボタンを押して洗濯機を回し、回転が止まったところでストップボタンを押してください。ストップした場所が10秒、20秒、30秒のいずれかに止まると得点が入ります。得点は合計で3回まで記録することができます。最終的に得点が高かった人が勝ちです。