Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Guessing Game</title>
<link rel="stylesheet" href="game.css">
</head>
<body>
<div id="game">
<div class="card-container">
<div class="card" id="currentCard">
<div class="container">
<div class="tl corner">
<div>v</div>
<div>s</div>
</div>
<div class="tr"></div>
<div class="st"></div>
<div class="bl"></div>
<div class="br corner">
<div>v</div>
<div>s</div>
</div>
<div class="sb"></div>
<div class="sl"></div>
<div class="sr"></div>
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5"></div>
<div class="s6"></div>
<div class="s7"></div>
<div class="s8"></div>
<div class="s9"></div>
<div class="s10"></div>
<div class="s11"></div>
<div class="s12"></div>
<div class="s13"></div>
<div class="s14"></div>
<div class="s15"></div>
<div class="s16"></div>
<div class="s17"></div>
<div class="s18"></div>
<div class="s19"></div>
<div class="s20"></div>
<div class="s21"></div>
</div>
</div>
<div class="card" id="nextCard" style="display: none;"></div>
<div class="card imagecard" style="display: none;"></div>
</div>
<div id="game">
<div>Current Card:
<span id="currentCard"></span>
</div>
<div>Next Card: <span id="nextCard"></span></div>
<button id="lower">Lower</button>
<button id="mid">Mid</button>
<button id="higher">Higher</button>
<div id="rounds">Rounds: 0</div>
<div id="score">Score: 0</div>
</div>
<div class="scoreboard1">
<header>Scoreboard</header>
<div id="Highscore">Highscore:</div>
</div>
<script>
const lowerButton = document.getElementById('lower');
const midButton = document.getElementById('mid');
const higherButton = document.getElementById('higher');
const cards = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
const cardValues = [
{ value: 2, suit: null },
{ value: 3, suit: null },
{ value: 4, suit: null },
{ value: 5, suit: null },
{ value: 6, suit: null },
{ value: 7, suit: null },
{ value: 8, suit: null },
{ value: 9, suit: null },
{ value: 10, suit: null },
{ value: 11, sign: 'J', image: '', suit: null },
{ value: 12, sign: 'Q', image: '', suit: null },
{ value: 13, sign: 'K', image: '', suit: null },
{ value: 14, sign: 'A', suit: null }
];
const suits = [
{ name: 'hearts', color: '#FF0000', symbol: '♥' },
{ name: 'diamonds', color: '#FF0000', symbol: '♦' },
{ name: 'clubs', color: '#000000', symbol: '♣' },
{ name: 'spades', color: '#000000', symbol: '♠' }
];
let currentCard = drawCard();
lowerButton.addEventListener('click', () => handleGuess('lower'));
midButton.addEventListener('click', () => handleGuess('mid'));
higherButton.addEventListener('click', () => handleGuess('higher'));
const nextCard = displayNextCard();
currentCard = nextCard;
function drawCard() {
let card = cardValues[Math.floor(Math.random() * cardValues.length)];
let suit = suits[Math.floor(Math.random() * suits.length)];
card.suit = suit;
return card;
}
function checkCard() {
var card = {
value: 11,
suit: 'clubs'
};
if (card.value === 11 && card.suit === 'clubs') {
showElement();
} else {
hideElement();
}
}
function showElement() {
var element = document.getElementById('card imagecard');
element.style.display = 'block';
}
function hideElement() {
var element = document.getElementById('card imagecard');
element.style.display = 'none';
}
function updateCardDisplay(card) {
const cardElement = document.getElementById('currentCard');
const suitElements = cardElement.querySelectorAll('.container > div');
suitElements.forEach(el => el.innerHTML = '');
const positions = {
1: ['s11'],
2: ['s5', 's17'],
3: ['s2', 's11', 's20'],
4: ['s4', 's6', 's18', 's16'],
5: ['s19', 's21', 's11', 's3', 's1'],
6: ['s1', 's10', 's19', 's3', 's12', 's21'],
7: ['s4', 's6', 's18', 's16', 's10', 's8', 's12'],
8: ['s4', 's6', 's18', 's16', 's10', 's12', 's8', 's14'],
9: ['s19', 's13', 's7', 's1', 's3', 's9', 's15', 's21', 's11'],
10: ['s19', 's13', 's7', 's1', 's3', 's9', 's15', 's21', 's5', 's17'],
11: ['s11'],
12: ['s11'],
13: ['s11'],
14: ['s11']
};
positions[card.value].forEach((pos, index) => {
const el = cardElement.querySelector(`.${pos}`);
el.innerHTML = card.suit.symbol;
el.style.color = card.suit.color;
});
}
function displayNextCard() {
const nextCard = drawCard();
updateCardDisplay(currentCard);
let eles = document.querySelectorAll(".corner");
eles.forEach(function (e) {
let ndiv = document.createElement("div");
let ndiv2 = document.createElement("div");
ndiv2.innerHTML = currentCard.suit.symbol;
ndiv2.style.color = currentCard.suit.color;
if (currentCard.value <= 10) {
ndiv.innerHTML = currentCard.value;
} else {
ndiv.innerHTML = currentCard.sign
}
ndiv.style.color = currentCard.suit.color;
e.appendChild(ndiv);
e.appendChild(ndiv2);
});
document.getElementById('nextCard').innerText = nextCard.value;
return nextCard;
}
function compareCards(current, next) {
console.log(current);
console.log(next);
if (current.value < next.value) return 'lower';
if (current.value > next.value) return 'higher';
if (current.value === next.value) return 'equal';
}
let score = getScoreFromCookie();
function updateScore(result) {
if (result === 'correct') {
score++;
document.body.style.background = 'green'
} else if (result == 'midCorrect') {
score += 20;
document.body, style.background = 'green';
} else {
score--;
document.body.style.background = 'red';
}
document.getElementById('score').textContent = `Score: ${score}`;
setTimeout(() => {
document.body.style.background = 'white';
}, 500);
document.getElementById('score').textContent = `Score: ${score}`;
document.cookie = `score=${score}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
updateScoreboard();
}
let rounds = 0;
function handleGuess(guess) {
console.log(guess)
const nextCard = displayNextCard();
const result = compareCards(currentCard, nextCard);
console.log(result);
if ((guess === 'lower' && result === 'lower') ||
(guess === 'higher' && result === 'higher')) {
updateScore('correct');
} else if (guess === 'mid' && result === 'equal') {
updateScore('midCorrect');
} else {
updateScore('incorrect');
}
currentCard = nextCard;
rounds++;
document.getElementById('rounds').textContent = `Rounds: ${rounds}`;
}
function getScoreFromCookie() {
const cookie = document.cookie;
const scoreRegex = /score=([^;]*)/;
const match = cookie.match(scoreRegex);
return match ? parseInt(match[1], 10) : 0;
}
const scoreboardElement = document.getElementById('Highscore');
scoreboardElement.textContent = `Highscore: ${getScoreFromCookie()}`;
function updateScoreboard() {
const scoreboardElement = document.getElementById('Highscore');
scoreboardElement.textContent = `Highscore: ${score}`;
}
updateScoreboard();
</script>
</body>
</html>