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

No:1537

4354

←

Prev Next

→

card hero
Developer anonymous｜Date and time 70/1/1 9:51:11
Build time unknown sec｜Game capacity 3.071KB｜

Script

カードヒーロー

誰が現れるか当ててみよう！

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>カードヒーロー</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			text-align: center;
			background-color: #F5F5F5;
		}
		h1 {
			font-size: 2em;
			margin: 0.5em 0;
		}
		h2 {
			font-size: 1.5em;
			margin: 0.5em 0;
		}
		#card {
			border: 2px solid #333;
			border-radius: 10px;
			padding: 1em;
			background-color: #FFFFFF;
			width: 80%;
			margin: 0 auto;
		}
		#hero {
			font-size: 5em;
			margin: 0.5em 0;
		}
		#description {
			font-size: 1.2em;
			margin-top: 1em;
		}
		#button {
			background-color: #333;
			color: #FFFFFF;
			border: none;
			border-radius: 5px;
			padding: 0.5em 1em;
			margin-top: 1em;
			font-size: 1.2em;
			cursor: pointer;
		}
	</style>
	<script>
		var heroes = [
			{
				name: "キャプテン・アメリカ",
				description: "アメリカの正義の象徴。シールドを駆使して敵を打ち倒す。",
				emoji: "🇺🇸"
			},
			{
				name: "スパイダーマン",
				description: "壁を走り、糸を発射するスパイダーマン。スピードとスパイダーセンスが武器。",
				emoji: "🕸️"
			},
			{
				name: "アイアンマン",
				description: "テクノロジーで身を守り、レーザーを放つアイアンマン。常に冷静沈着。",
				emoji: "🤖"
			}
		];

var currentHero;

function startGame() {
			// カードを表示
			var cardDiv = document.getElementById("card");
			cardDiv.style.display = "block";

// ヒーローをランダムに選択
			currentHero = heroes[Math.floor(Math.random() * heroes.length)];

// ヒーロー名と絵文字を表示
			var heroNameDiv = document.getElementById("heroName");
			heroNameDiv.innerText = currentHero.name + " " + currentHero.emoji;

// 説明を表示
			var descriptionDiv = document.getElementById("description");
			descriptionDiv.innerText = currentHero.description;
		}

function guessHero() {
			var input = prompt("どのヒーローか当ててください（キャプテン・アメリカ、スパイダーマン、アイアンマン）");

if (input === currentHero.name) {
				alert("正解！");
			} else {
				alert("残念、不正解です。");
			}

// ゲームをリセット
			resetGame();
		}

function resetGame() {
			// カードを非表示
			var cardDiv = document.getElementById("card");
			cardDiv.style.display = "none";

// ヒーロー情報をリセット
			currentHero = null;
			var heroNameDiv = document.getElementById("heroName");
			heroNameDiv.innerText = "";

var descriptionDiv = document.getElementById("description");
			descriptionDiv.innerText = "";
		}
	</script>
</head>
<body>
	<h1>カードヒーロー</h1>
	<h2>誰が現れるか当ててみよう！</h2>
	<button id="button" onclick="startGame()">ゲームスタート</button>
	<div id="card" style="display: none;">
		<div id="heroName"></div>
		<div id="hero"></div>
		<div id="description"></div>
		<button id="button" onclick="guessHero()">答える</button>
	</div>
</body>
</html>