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

No:4465

1270

Turkey Ice Cream 🆚 Mochi! Which is more stretchy!
Developer User3589｜Date and time 23/6/28 1:48:28
Build time 44.442 sec｜Game capacity 3.644KB｜

トルコアイス🆚餅！どちらがより伸びるのか！というゲームを作りました。以下が実際のプログラムです。

伸びる？縮む？トルコアイス🆚餅！

トルコアイス🆚 餅！

プレイ方法は以下の通りです。 1. トルコアイスか餅のどちらかを選択します。 2. GO! ボタンを押すと、コンピューターがランダムにトルコアイスか餅を選びます。 3. 1秒待った後、結果が表示されます。あなたの選択とコンピューターの選択が表示されます。そして、勝敗が表示されます。 4. もう一度遊ぶ場合は、「もう一回！」ボタンを押します。このゲームは、ユーザーが選択したオプションと、コンピューターが選択したオプションを比較して勝敗を判定する仕組みになっています。JavaScript を使用して動的にコンテンツを更新することで、リッチなユーザー体験を提供しています。モバイルファーストのデザインとして、ボタンやラベルなどの要素は大きめに設定しています。また、カラフルなデザインを採用して、ユーザーが楽しくプレイできるように工夫しています。

→ 　

1　

0　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

トルコアイス🆚餅！どちらがより伸びるのか！というゲームを作りました。

以下が実際のプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
	<title>伸びる？縮む？トルコアイス🆚餅！</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}
		h1 {
			margin: 0;
			font-size: 3rem;
			color: #FF464F;
			text-align: center;
			margin-bottom: 20px;
		}
		button {
			padding: 20px;
			font-size: 2rem;
			background-color: #FF464F;
			color: white;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			margin-bottom: 20px;
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
		}
	</style>
	<script>
		function game() {
			const options = ['トルコアイス🆚', '餅！'];

const randomIndex = Math.floor(Math.random() * options.length);
			const computerChoice = options[randomIndex] + ' ' + options[(randomIndex + 1) % 2];

document.getElementById('computer-choice').innerText = computerChoice;

document.getElementById('result').style.display = 'none';
			document.getElementById('play-again').style.display = 'none';

setTimeout(() => {
				document.getElementById('result').style.display = 'block';
				document.getElementById('play-again').style.display = 'block';

const userChoice = document.querySelector('input:checked + span').innerText;
				const choices = userChoice + ' ' + computerChoice.split(' ')[0];

if (userChoice === computerChoice.split(' ')[0]) {
					document.getElementById('result').innerText = '引き分け！';
				} else if (
					(choices === 'トルコアイス🆚餅！トルコアイス🆚') ||
					(choices === '餅！トルコアイス🆚餅！')
				) {
					document.getElementById('result').innerText = 'あなたの勝ち！🎉';
				} else {
					document.getElementById('result').innerText = 'あなたの負け・・・😢';
				}
			}, 2000);
		}
	</script>
</head>
<body>
	<h1>伸びる？縮む？トルコアイス🆚餅！</h1>
	<div>
		<input type="radio" name="choice" id="choice1">
		<label for="choice1"><span>トルコアイス🆚</span></label>

<input type="radio" name="choice" id="choice2">
		<label for="choice2"><span>餅！</span></label>
	</div>
	<button onclick="game()">GO!</button>
	<p id="computer-choice"></p>
	<p id="result" style="display: none;"></p>
	<button id="play-again" style="display: none;" onclick="location.reload()">もう一回！</button>
</body>
</html>
```

プレイ方法は以下の通りです。

1. トルコアイスか餅のどちらかを選択します。

2. GO! ボタンを押すと、コンピューターがランダムにトルコアイスか餅を選びます。

3. 1秒待った後、結果が表示されます。あなたの選択とコンピューターの選択が表示されます。そして、勝敗が表示されます。

4. もう一度遊ぶ場合は、「もう一回！」ボタンを押します。

このゲームは、ユーザーが選択したオプションと、コンピューターが選択したオプションを比較して勝敗を判定する仕組みになっています。JavaScript を使用して動的にコンテンツを更新することで、リッチなユーザー体験を提供しています。モバイルファーストのデザインとして、ボタンやラベルなどの要素は大きめに設定しています。また、カラフルなデザインを採用して、ユーザーが楽しくプレイできるように工夫しています。