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

No:2487

174

←

Prev Next

→

beat the weather
Developer sayaensm｜Date and time 23/6/21 17:37:18
Build time 41.255 sec｜Game capacity 3.674KB｜

Script

天気に勝つ

天気を当てるゲームです！

「スタート」を押して、今日の天気を予想してみましょう。

このプログラムは、天気を当てるゲームです。最初に「スタート」ボタンを押すと、天気を当てるためのクイズが出題されます。答えとして「晴れ」「曇り」「雨」の3つがあります。ボタンを押して答えを選ぶと、正解かどうかが表示されます。また、正解だった場合は笑顔の絵文字が表示され、不正解だった場合は悲しみの絵文字が表示されます。最後に、「もう一度遊ぶ」ボタンを押してゲームを再度開始することができます。スマホでもプレイ可能です。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>天気に勝つ</title>
	<style>
		body {
			background-color: #c9ffff;
			font-family: sans-serif;
			text-align: center;
		}
		h1 {
			margin-top: 50px;
			font-size: 48px;
		}
		p {
			margin: 20px;
			font-size: 24px;
		}
		.button {
			display: inline-block;
			background-color: #ffba27;
			padding: 20px;
			border-radius: 50%;
			font-size: 40px;
			cursor: pointer;
		}
		.weather {
			font-size: 72px;
			margin: 50px;
		}
		.emoji {
			display: inline-block;
			font-size: 48px;
			margin: 20px;
		}
	</style>
</head>
<body>
	<h1>天気に勝つ</h1>
	<p>天気を当てるゲームです！</p>
	<p>「スタート」を押して、今日の天気を予想してみましょう。</p>
	<div>
		<button class="button" onClick="startGame()">スタート</button>
	</div>
	<div id="question" style="display: none;">
		<p>今日の天気は？</p>
		<div>
			<button class="button" onClick="checkAnswer('sunny')">☀</button>
			<button class="button" onClick="checkAnswer('cloudy')">☁</button>
			<button class="button" onClick="checkAnswer('rainy')">☂</button>
		</div>
	</div>
	<div id="result" style="display: none;">
		<p>あなたの答えは<span id="user-answer"></span>でした</p>
		<p>正解は<span id="correct-answer"></span>でした</p>
		<div id="result-emoji">
			<span class="emoji">😎</span>
		</div>
		<div>
			<button class="button" onClick="restartGame()">もう一度遊ぶ</button>
		</div>
	</div>
	<script>
		function startGame() {
			document.getElementById('question').style.display = 'block';
		}

function restartGame() {
			document.getElementById('user-answer').innerHTML = '';
			document.getElementById('correct-answer').innerHTML = '';
			document.getElementById('result-emoji').innerHTML = '<span class="emoji">😎</span>';
			document.getElementById('result').style.display = 'none';
			document.getElementById('question').style.display = 'block';
		}

function getWeather() {
			var weathers = ['sunny', 'cloudy', 'rainy'];
			var index = Math.floor(Math.random() * weathers.length);
			return weathers[index];
		}

function getEmoji(weather) {
			switch (weather) {
				case 'sunny':
					return '☀';
				case 'cloudy':
					return '☁';
				case 'rainy':
					return '☂';
			}
		}
	</script>
</body>
</html>