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

No:1535

6699

←

Prev Next

→

tarot
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time unknown sec｜Game capacity 5.224KB｜

Script

タロット占い

3枚のカードを選び、意味を占ってみましょう。

←

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">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>タロット占い</title>
	<style>
		body {
			background-color: #f2f2f2;
			color: #333;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		h1 {
			font-size: 2rem;
			margin-top: 2rem;
		}
		#cards {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin: 1rem;
		}
		.card {
			background-color: white;
			border: 1px solid #ccc;
			border-radius: 5px;
			box-shadow: 2px 2px 2px #eee;
			margin: 0.5rem;
			padding: 1rem;
			width: 100px;
			height: 150px;
			cursor: pointer;
		}
		.card:hover {
			transform: translateY(-5px);
			box-shadow: 2px 5px 5px #eee;
		}
		.card img {
			width: 80px;
			height: auto;
			margin-bottom: 0.5rem;
		}
	</style>
	<script>
		const cards = [
			{ image: "🃏", meaning: "大アルカナの0番、愚者。新しい世界への旅立ちを象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの1番、魔術師。創造力とチャンスを象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの2番、女教皇。知恵や洞察力を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの3番、女帝。豊穣や母性を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの4番、皇帝。支配力や権威を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの5番、教皇。信仰心や伝統を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの6番、恋人たち。愛やパートナーシップを象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの7番、戦車。勝利や自制心を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの8番、力。情熱や自己表現を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの9番、隠者。瞑想や自己啓発を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの10番、運命の輪。周期的な変化や運命を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの11番、正義。公正さやバランスを象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの12番、吊るされた男。献身や貢献を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの13番、死神。変革や再生を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの14番、節制。バランスや調和を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの15番、悪魔。誘惑や束縛を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの16番、塔。破壊や崩壊を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの17番、星。希望やあかりを象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの18番、月。感情や夢を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの19番、太陽。自信や自己表現を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの20番、審判。復活や判断を象徴するカード。" },
			{ image: "🃏", meaning: "大アルカナの21番、世界。完成や達成を象徴するカード。" }
		];
		let numCardsSelected = 0;
		let selectedCards = [];
		function shuffle(array) {
			for (let i = array.length - 1; i > 0; i--) {
				const j = Math.floor(Math.random() * (i + 1));
				[array[i], array[j]] = [array[j], array[i]];
			}
			return array;
		}
		function selectCard(cardIndex) {
			if (numCardsSelected < 3) {
				const card = cards[cardIndex];
				selectedCards.push(card);
				numCardsSelected++;
				const cardElement = document.getElementById("card" + cardIndex);
				cardElement.innerHTML = `<img src="tarot-card.png" alt="${card.image}" title="${card.meaning}">`;
			}
			if (numCardsSelected == 3) {
				setTimeout(() => {
					alert(`1枚目：${selectedCards[0].meaning}\n2枚目：${selectedCards[1].meaning}\n3枚目：${selectedCards[2].meaning}`);
					resetCards();
				}, 1000);
			}
		}
		function resetCards() {
			numCardsSelected = 0;
			selectedCards = [];
			for (let i = 0; i < cards.length; i++) {
				const cardElement = document.getElementById("card" + i);
				cardElement.innerHTML = cards[i].image;
			}
		}
		document.addEventListener("DOMContentLoaded", () => {
			shuffle(cards);
			for (let i = 0; i < cards.length; i++) {
				const cardElement = document.createElement("span");
				cardElement.id = "card" + i;
				cardElement.className = "card";
				cardElement.innerText = cards[i].image;
				cardElement.addEventListener("click", () => {
					selectCard(i);
				});
				document.getElementById("cards").appendChild(cardElement);
			}
		});
	</script>
</head>
<body>
	<h1>タロット占い</h1>
	<p>3枚のカードを選び、意味を占ってみましょう。</p>
	<div id="cards"></div>
</body>
</html>