Skip to content

Commit

Permalink
Feat : Added Trading Card Game
Browse files Browse the repository at this point in the history
  • Loading branch information
Meetjain1 committed Aug 5, 2024
1 parent 203cfc8 commit b17e1e6
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 0 deletions.
20 changes: 20 additions & 0 deletions SinglePlayer - Games/Trading Card Game/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trading Card Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game-container">
<div id="player-hand" class="hand"></div>
<div id="opponent-hand" class="hand"></div>
<button id="draw-card">Draw Card</button>
<div id="message"></div>
<div id="score">Player Score: 0 | Opponent Score: 0</div>
<div id="game-over" class="hidden">Game Over! <span id="result-message"></span></div>
</div>
<script src="script.js"></script>
</body>
</html>
69 changes: 69 additions & 0 deletions SinglePlayer - Games/Trading Card Game/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
const gameContainer = document.getElementById('game-container');
const playerHand = document.getElementById('player-hand');
const opponentHand = document.getElementById('opponent-hand');
const drawCardButton = document.getElementById('draw-card');
const message = document.getElementById('message');
const scoreDisplay = document.getElementById('score');
const gameOverDisplay = document.getElementById('game-over');
const resultMessage = document.getElementById('result-message');

let playerScore = 0;
let opponentScore = 0;
let gameRunning = true;

const cardValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

drawCardButton.addEventListener('click', drawCard);

function drawCard() {
if (!gameRunning) return;

const playerCardValue = getRandomCardValue();
const opponentCardValue = getRandomCardValue();

const playerCard = createCard(playerCardValue);
const opponentCard = createCard(opponentCardValue);

playerHand.appendChild(playerCard);
opponentHand.appendChild(opponentCard);

if (playerCardValue > opponentCardValue) {
playerScore++;
message.textContent = 'You win this round!';
} else if (playerCardValue < opponentCardValue) {
opponentScore++;
message.textContent = 'You lose this round!';
} else {
message.textContent = 'It\'s a draw!';
}

scoreDisplay.textContent = `Player Score: ${playerScore} | Opponent Score: ${opponentScore}`;

checkGameOver();
}

function getRandomCardValue() {
return cardValues[Math.floor(Math.random() * cardValues.length)];
}

function createCard(value) {
const card = document.createElement('div');
card.classList.add('card');
card.textContent = value;
return card;
}

function checkGameOver() {
if (playerHand.childElementCount >= 10 || opponentHand.childElementCount >= 10) {
gameRunning = false;
drawCardButton.disabled = true;
if (playerScore > opponentScore) {
resultMessage.textContent = 'You win!';
} else if (playerScore < opponentScore) {
resultMessage.textContent = 'You lose!';
} else {
resultMessage.textContent = 'It\'s a draw!';
}
gameOverDisplay.classList.remove('hidden');
}
}
54 changes: 54 additions & 0 deletions SinglePlayer - Games/Trading Card Game/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
body, html {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
background-color: #444;
display: flex;
justify-content: center;
align-items: center;
}

#game-container {
text-align: center;
color: white;
}

.hand {
display: flex;
justify-content: center;
margin: 20px;
}

.card {
width: 50px;
height: 70px;
background-color: #eee;
border: 1px solid #000;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #000;
}

#draw-card {
margin: 20px;
padding: 10px 20px;
font-size: 16px;
}

#score {
font-size: 20px;
margin: 10px;
}

#game-over {
font-size: 24px;
color: red;
}

.hidden {
display: none;
}

0 comments on commit b17e1e6

Please sign in to comment.