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

No:2397

558

A game to find a magician.
Developer User3559｜Date and time 23/6/21 10:17:23
Build time 30.601 sec｜Game capacity 2.619KB｜

以下が実際のプログラムです。このアプリは、1枚のHTMLファイルにJavaScriptが含まれており、スマートフォンでの使用に最適化されています。絵文字が多く使用されており、マジキチな人物を探し当てるゲームとなっています。

マジキチな人を探せ！

以下のカードの中からマジキチな人を探してください。

😀

😋

😇

🤔

😈

😂

😜

🤓

🤪

プログラムでは、カードのデザインにはflexboxを使用し、カードをクリックしたときに正しいカードかどうかを確認するイベントリスナーを設定しています。また、ランダムに選ばれたマジキチな人を決定し、正しいカードが選択された場合にはメッセージが表示されます。このアプリは、スマートフォンでも遊べるように、レスポンシブデザインが施されています。また、絵文字が多く使用されているので、エンターテイメント性も高くなっています。

→ 　

1　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

以下が実際のプログラムです。このアプリは、1枚のHTMLファイルにJavaScriptが含まれており、スマートフォンでの使用に最適化されています。絵文字が多く使用されており、マジキチな人物を探し当てるゲームとなっています。

<!DOCTYPE html>
<html>
<head>
	<title>マジキチな人を探せ！</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.card {
			width: 100px;
			height: 100px;
			margin: 10px;
			text-align: center;
			font-size: 50px;
			border: 5px solid black;
			border-radius: 50%;
			transition: all 0.3s ease;
			cursor: pointer;
		}
		.card:hover {
			transform: scale(1.2);
		}
		.hidden {
			display: none;
		}
	</style>
</head>
<body>
	<h1>マジキチな人を探せ！</h1>
	<p>以下のカードの中からマジキチな人を探してください。</p>
	<div class="container">
		<div class="card" id="1">😀</div>
		<div class="card" id="2">😋</div>
		<div class="card" id="3">😇</div>
		<div class="card" id="4">🤔</div>
		<div class="card" id="5">😈</div>
		<div class="card" id="6">😂</div>
		<div class="card" id="7">😜</div>
		<div class="card" id="8">🤓</div>
		<div class="card" id="9">🤪</div>
	</div>
	<p id="result" class="hidden"></p>
	<script>
		const cards = document.querySelectorAll('.card');
		const result = document.getElementById('result');
		const crazyPerson = Math.floor(Math.random() * cards.length) + 1;
		cards.forEach(card => {
			card.addEventListener('click', () => {
				if (card.id == crazyPerson) {
					result.textContent = 'おめでとう！マジキチな人を見つけました！';
				} else {
					result.textContent = '残念！マジキチな人ではありません...';
				}
				result.classList.remove('hidden');
				cards.forEach(c => c.removeEventListener('click'));
			});
		});
	</script>
</body>
</html>

プログラムでは、カードのデザインにはflexboxを使用し、カードをクリックしたときに正しいカードかどうかを確認するイベントリスナーを設定しています。また、ランダムに選ばれたマジキチな人を決定し、正しいカードが選択された場合にはメッセージが表示されます。

このアプリは、スマートフォンでも遊べるように、レスポンシブデザインが施されています。また、絵文字が多く使用されているので、エンターテイメント性も高くなっています。