|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Angel Tarot Train Game</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
#game-area { |
|
display: flex; |
|
flex-direction: column; |
|
width: 100%; |
|
max-width: 800px; |
|
} |
|
#player-hand { |
|
display: flex; |
|
justify-content: center; |
|
margin-bottom: 20px; |
|
} |
|
.card { |
|
width: 80px; |
|
height: 120px; |
|
background-color: #f0f0f0; |
|
border: 1px solid #ccc; |
|
border-radius: 5px; |
|
margin: 0 5px; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: flex-start; |
|
align-items: center; |
|
cursor: move; |
|
position: relative; |
|
background-size: cover; |
|
background-position: center; |
|
} |
|
.card-value { |
|
position: absolute; |
|
top: 5px; |
|
left: 5px; |
|
font-weight: bold; |
|
} |
|
.train-level { |
|
height: 150px; |
|
overflow-x: auto; |
|
white-space: nowrap; |
|
border: 1px solid #999; |
|
margin-bottom: 10px; |
|
} |
|
.train-car { |
|
display: inline-block; |
|
width: 100px; |
|
height: 140px; |
|
background-color: #e0e0e0; |
|
border: 1px solid #bbb; |
|
margin: 5px; |
|
vertical-align: top; |
|
} |
|
#score-display { |
|
position: absolute; |
|
top: 10px; |
|
right: 10px; |
|
font-size: 18px; |
|
font-weight: bold; |
|
} |
|
#high-score { |
|
position: fixed; |
|
bottom: 10px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
font-size: 16px; |
|
font-weight: bold; |
|
} |
|
#reset-button { |
|
margin-top: 20px; |
|
} |
|
#history { |
|
margin-top: 20px; |
|
max-height: 100px; |
|
overflow-y: auto; |
|
width: 100%; |
|
max-width: 300px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>Angel Tarot Train Game</h1> |
|
<div id="score-display">Score: 0</div> |
|
<div id="game-area"> |
|
<div id="train-level-1" class="train-level"></div> |
|
<div id="train-level-2" class="train-level"></div> |
|
<div id="train-level-3" class="train-level"></div> |
|
<div id="player-hand"></div> |
|
</div> |
|
<button id="reset-button">Reset Game</button> |
|
<div id="history"></div> |
|
<div id="high-score">High Score: 0</div> |
|
|
|
<h2>Upload Card Back Image</h2> |
|
<label id="container" for="upload"> |
|
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
<path fill="#000" |
|
d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z"> |
|
</path> |
|
</svg> |
|
Click to upload image |
|
</label> |
|
<input id="upload" type="file" accept="image/*" /> |
|
|
|
<script> |
|
const angelCards = [ |
|
{name: "Michael", value: 0}, |
|
{name: "Gabriel", value: 1}, |
|
{name: "Raphael", value: 2}, |
|
{name: "Uriel", value: 3}, |
|
{name: "Samael", value: 4}, |
|
{name: "Zadkiel", value: 5}, |
|
{name: "Camael", value: 6}, |
|
{name: "Haniel", value: 7}, |
|
{name: "Raziel", value: 8}, |
|
{name: "Metatron", value: 9}, |
|
{name: "Sandalphon", value: 10}, |
|
{name: "Azrael", value: 11}, |
|
{name: "Cassiel", value: 12}, |
|
{name: "Sachiel", value: 13}, |
|
{name: "Raguel", value: 14}, |
|
{name: "Remiel", value: 15}, |
|
{name: "Sariel", value: 16}, |
|
{name: "Jeremiel", value: 17}, |
|
{name: "Jophiel", value: 18}, |
|
{name: "Ariel", value: 19}, |
|
{name: "Chamuel", value: 20}, |
|
{name: "Seraphiel", value: 21} |
|
]; |
|
|
|
let score = 0; |
|
let highScore = 0; |
|
let playedCards = []; |
|
let cardBackImage = null; |
|
|
|
function shuffleArray(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]]; |
|
} |
|
} |
|
|
|
function createCard(card) { |
|
const cardElement = document.createElement('div'); |
|
cardElement.className = 'card'; |
|
cardElement.draggable = true; |
|
cardElement.textContent = card.name; |
|
cardElement.dataset.value = card.value; |
|
cardElement.dataset.name = card.name; |
|
|
|
const valueElement = document.createElement('span'); |
|
valueElement.className = 'card-value'; |
|
valueElement.textContent = card.value; |
|
cardElement.appendChild(valueElement); |
|
|
|
if (cardBackImage) { |
|
cardElement.style.backgroundImage = `url(${cardBackImage})`; |
|
cardElement.style.color = 'white'; |
|
cardElement.style.textShadow = '1px 1px 2px black'; |
|
} |
|
|
|
return cardElement; |
|
} |
|
|
|
function dealCards() { |
|
shuffleArray(angelCards); |
|
const playerHand = document.getElementById('player-hand'); |
|
playerHand.innerHTML = ''; |
|
for (let i = 0; i < 5; i++) { |
|
const card = angelCards[i]; |
|
const cardElement = createCard(card); |
|
playerHand.appendChild(cardElement); |
|
} |
|
} |
|
|
|
function createTrainCars() { |
|
const trainLevels = document.querySelectorAll('.train-level'); |
|
trainLevels.forEach(level => { |
|
for (let i = 0; i < 5; i++) { |
|
const trainCar = document.createElement('div'); |
|
trainCar.className = 'train-car'; |
|
level.appendChild(trainCar); |
|
} |
|
}); |
|
} |
|
|
|
function initDragAndDrop() { |
|
const cards = document.querySelectorAll('.card'); |
|
const trainCars = document.querySelectorAll('.train-car'); |
|
|
|
cards.forEach(card => { |
|
card.addEventListener('dragstart', dragStart); |
|
}); |
|
|
|
trainCars.forEach(car => { |
|
car.addEventListener('dragover', dragOver); |
|
car.addEventListener('drop', drop); |
|
}); |
|
} |
|
|
|
function dragStart(e) { |
|
e.dataTransfer.setData('text/plain', e.target.dataset.name); |
|
} |
|
|
|
function dragOver(e) { |
|
e.preventDefault(); |
|
} |
|
|
|
function drop(e) { |
|
e.preventDefault(); |
|
const cardName = e.dataTransfer.getData('text'); |
|
const card = document.querySelector(`.card[data-name="${cardName}"]`); |
|
|
|
if (card && e.target.classList.contains('train-car') && !e.target.hasChildNodes()) { |
|
e.target.appendChild(card); |
|
card.draggable = false; |
|
activateCard(card); |
|
} |
|
} |
|
|
|
function activateCard(card) { |
|
const cardName = card.dataset.name; |
|
const cardValue = parseInt(card.dataset.value); |
|
playedCards.push({name: cardName, value: cardValue}); |
|
updateScore(); |
|
} |
|
|
|
function updateScore() { |
|
score = 0; |
|
const letterCounts = {}; |
|
|
|
playedCards.forEach(card => { |
|
|
|
for (let letter of card.name) { |
|
letterCounts[letter] = (letterCounts[letter] || 0) + 1; |
|
} |
|
|
|
|
|
score++; |
|
|
|
|
|
if (card.value === 0) { |
|
score *= 2; |
|
} else if (card.value === 21) { |
|
score += 10; |
|
} |
|
}); |
|
|
|
|
|
Object.values(letterCounts).forEach(count => { |
|
if (count >= 3) { |
|
score *= 3; |
|
} |
|
}); |
|
|
|
document.getElementById('score-display').textContent = `Score: ${score}`; |
|
|
|
if (playedCards.length === 5) { |
|
endGame(); |
|
} |
|
} |
|
|
|
function endGame() { |
|
if (score > highScore) { |
|
highScore = score; |
|
document.getElementById('high-score').textContent = `High Score: ${highScore}`; |
|
alert(`Congratulations! New high score: ${highScore}`); |
|
} |
|
|
|
const historyElement = document.getElementById('history'); |
|
historyElement.innerHTML += `<p>Game ended with score: ${score}</p>`; |
|
historyElement.scrollTop = historyElement.scrollHeight; |
|
} |
|
|
|
function resetGame() { |
|
score = 0; |
|
playedCards = []; |
|
document.getElementById('score-display').textContent = 'Score: 0'; |
|
|
|
const trainCars = document.querySelectorAll('.train-car'); |
|
trainCars.forEach(car => car.innerHTML = ''); |
|
|
|
dealCards(); |
|
initDragAndDrop(); |
|
} |
|
|
|
function initImageUpload() { |
|
const uploadInput = document.getElementById('upload'); |
|
uploadInput.addEventListener('change', (event) => { |
|
const file = event.target.files[0]; |
|
if (file) { |
|
const reader = new FileReader(); |
|
reader.onload = (e) => { |
|
cardBackImage = e.target.result; |
|
resetGame(); |
|
}; |
|
reader.readAsDataURL(file); |
|
} |
|
}); |
|
} |
|
|
|
function init() { |
|
createTrainCars(); |
|
dealCards(); |
|
initDragAndDrop(); |
|
initImageUpload(); |
|
document.getElementById('reset-button').addEventListener('click', resetGame); |
|
} |
|
|
|
init(); |
|
</script> |
|
</body> |
|
</html> |
