神聖遺物自慢ゲーム

自分が持っている神聖遺物でどれだけマウントを取れるか試してみましょう！

※このコードは簡単な以下の操作しかできません。 - スタートボタンをクリックすると、所有している神聖遺物の一覧が表示されます。 - 各神聖遺物について、画像、名前、説明が表示されます。

←

Prev　Next

→ 　

Back　

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

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-size: 24px;
			text-align: center;
			background-color: #FFFFFF;
		}
		.container {
			margin-top: 50px;
		}
		.button {
			padding: 15px;
			background-color: #4CAF50;
			color: #FFFFFF;
			border: none;
			border-radius: 10px;
			font-size: 24px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>神聖遺物自慢ゲーム</h1>
		<img src="https://genshin.mihoyo.com/content/dam/genshin/home/index/genshin_logo_white.png" alt="原神ロゴ">
		<p>自分が持っている神聖遺物でどれだけマウントを取れるか試してみましょう！</p>
		<button class="button" onclick="startGame()">スタート</button>
	</div>

function startGame() {
			const container = document.querySelector('.container');
			container.innerHTML = '';

const header = document.createElement('h2');
			header.innerText = "あなたが持っている神聖遺物を披露しましょう！";

const relicsContainer = document.createElement('div');
			relicsContainer.className = "relics-container";

for (let i = 0; i < relics.length; i++) {
				const relic = relics[i];
				const card = createRelicCard(relic);
				relicsContainer.appendChild(card);
			}

container.appendChild(header);
			container.appendChild(relicsContainer);
		}

function createRelicCard(relic) {
			const card = document.createElement('div');
			card.className = "card";

const image = document.createElement('img');
			image.src = relic.img;
			image.alt = relic.name;
			card.appendChild(image);

const name = document.createElement('h3');
			name.innerText = relic.name;
			card.appendChild(name);

const description = document.createElement('p');
			description.innerText = relic.description;
			card.appendChild(description);

return card;
		}
	</script>
</body>
</html>

※このコードは簡単な以下の操作しかできません。
- スタートボタンをクリックすると、所有している神聖遺物の一覧が表示されます。
- 各神聖遺物について、画像、名前、説明が表示されます。