Merge pull request #1482 from Rahul-AkaVector/project/cricket-game-wi…

…th-ai Cricket Game from Numbers Against AI
iamrahulmahato · Oct 20, 2024 · 2191369 · 2191369
2 parents ea00817 + 353558c
commit 2191369
Show file tree

Hide file tree

Showing 3 changed files with 309 additions and 0 deletions.
diff --git a/projects/Cricket game/index.html b/projects/Cricket game/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cricket Game Against AI</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="game-container">
+        <h1>Cricket Game Against AI</h1>
+
+        <!-- Toss Section -->
+        <div id="toss-section">
+            <h2>Let's Start with the Toss!</h2>
+            <p>Choose Heads or Tails to see who starts:</p>
+            <div class="btn-container">
+                <button id="heads" class="btn">Heads</button>
+                <button id="tails" class="btn">Tails</button>
+            </div>
+            <p id="toss-result" class="message"></p>
+        </div>
+
+        <!-- Choice Section -->
+        <div id="choice-section" style="display: none;">
+            <h2 id="toss-winner-message"></h2>
+            <p>What would you like to do?</p>
+            <div class="btn-container">
+                <button id="bat" class="btn">Bat</button>
+                <button id="bowl" class="btn">Bowl</button>
+            </div>
+        </div>
+
+        <!-- Game Section -->
+        <div id="game-section" style="display: none;">
+            <h2 id="status"></h2>
+            <p>Choose a number between 1-6 to play:</p>
+            <div id="number-buttons" class="btn-container">
+                <button class="number-btn btn">1</button>
+                <button class="number-btn btn">2</button>
+                <button class="number-btn btn">3</button>
+                <button class="number-btn btn">4</button>
+                <button class="number-btn btn">5</button>
+                <button class="number-btn btn">6</button>
+            </div>
+            <p id="score-display">Your Score: 0</p>
+            <p id="balls-remaining">Balls Remaining: 12</p>
+            <p id="wickets">Wickets: 0/3</p>
+        </div>
+
+        <!-- Transition Message Section -->
+        <div id="transition-message-section" style="display: none;">
+            <h2 id="transition-message"></h2>
+            <p>Get ready for the next phase of the game...</p>
+        </div>
+
+        <!-- Result Section -->
+        <div id="result-section" style="display: none;">
+            <h2>Game Over!</h2>
+            <p id="final-result"></p>
+            <button id="restart" class="btn">Restart Game</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/projects/Cricket game/script.js b/projects/Cricket game/script.js
@@ -0,0 +1,161 @@
+// Variables to store game state
+let playerScore = 0;
+let aiScore = 0;
+let wickets = 0;
+let balls = 12;
+let tossWinner = '';
+let playerChoice = '';
+let target = 0;
+let secondInnings = false;
+
+// DOM Elements
+const tossSection = document.getElementById('toss-section');
+const choiceSection = document.getElementById('choice-section');
+const gameSection = document.getElementById('game-section');
+const resultSection = document.getElementById('result-section');
+const transitionMessageSection = document.getElementById('transition-message-section');
+const tossResultDisplay = document.getElementById('toss-result');
+const tossWinnerMessage = document.getElementById('toss-winner-message');
+const scoreDisplay = document.getElementById('score-display');
+const ballsDisplay = document.getElementById('balls-remaining');
+const wicketsDisplay = document.getElementById('wickets');
+const statusDisplay = document.getElementById('status');
+const finalResult = document.getElementById('final-result');
+const transitionMessage = document.getElementById('transition-message');
+
+// Toss Section
+document.getElementById('heads').addEventListener('click', () => handleToss('heads'));
+document.getElementById('tails').addEventListener('click', () => handleToss('tails'));
+
+function handleToss(playerCall) {
+    const tossResult = Math.random() < 0.5 ? 'heads' : 'tails';
+    tossResultDisplay.textContent = `Toss result: ${tossResult}`;
+
+    if (playerCall === tossResult) {
+        tossWinner = 'player';
+        tossWinnerMessage.textContent = "You won the toss! Choose to bat or bowl.";
+        choiceSection.style.display = 'block';
+    } else {
+        tossWinner = 'ai';
+        aiChoosesBatBowl();
+    }
+    tossSection.style.display = 'none';
+}
+
+// AI's decision for bat/bowl
+function aiChoosesBatBowl() {
+    playerChoice = Math.random() < 0.5 ? 'bat' : 'bowl';
+    tossWinnerMessage.textContent = `AI won the toss and chose to ${playerChoice === 'bat' ? 'bat' : 'bowl'} first.`;
+    transitionToGame(playerChoice);
+}
+
+// Player chooses to bat or bowl
+document.getElementById('bat').addEventListener('click', () => transitionToGame('bat'));
+document.getElementById('bowl').addEventListener('click', () => transitionToGame('bowl'));
+
+function transitionToGame(choice) {
+    playerChoice = choice;
+    choiceSection.style.display = 'none';
+    transitionMessageSection.style.display = 'block';
+    transitionMessage.textContent = `Get ready to ${choice === 'bat' ? 'bat' : 'bowl'}!`;
+    setTimeout(() => {
+        transitionMessageSection.style.display = 'none';
+        gameSection.style.display = 'block';
+        statusDisplay.textContent = `You are ${choice === 'bat' ? 'batting' : 'bowling'}!`;
+    }, 2000);
+}
+
+// Main gameplay
+document.querySelectorAll('.number-btn').forEach(button => {
+    button.addEventListener('click', () => playTurn(parseInt(button.textContent)));
+});
+
+function playTurn(playerNumber) {
+    const aiNumber = Math.floor(Math.random() * 6) + 1;
+    balls--;
+    ballsDisplay.textContent = `Balls Remaining: ${balls}`;
+
+    if (!secondInnings) {
+        if (playerChoice === 'bat') {
+            playerBatting(playerNumber, aiNumber);
+        } else {
+            playerBowling(playerNumber, aiNumber);
+        }
+    } else {
+        if (playerChoice === 'bat') {
+            aiChasing(playerNumber, aiNumber);
+        } else {
+            playerChasing(playerNumber, aiNumber);
+        }
+    }
+}
+
+function playerBatting(playerNumber, aiNumber) {
+    if (playerNumber === aiNumber) {
+        wickets++;
+        wicketsDisplay.textContent = `Wickets: ${wickets}/3`;
+        if (wickets === 3 || balls === 0) {
+            endFirstInnings();
+        }
+    } else {
+        playerScore += playerNumber;
+        scoreDisplay.textContent = `Your Score: ${playerScore}`;
+    }
+}
+
+function playerBowling(playerNumber, aiNumber) {
+    if (playerNumber === aiNumber) {
+        wickets++;
+        wicketsDisplay.textContent = `Wickets: ${wickets}/3`;
+        if (wickets === 3 || balls === 0) {
+            endFirstInnings();
+        }
+    } else {
+        aiScore += aiNumber;
+        scoreDisplay.textContent = `AI Score: ${aiScore}`;
+    }
+}
+
+function endFirstInnings() {
+    gameSection.style.display = 'none';
+    transitionMessageSection.style.display = 'block';
+    if (playerChoice === 'bat') {
+        target = playerScore + 1;
+        transitionMessage.textContent = `End of your innings. AI needs ${target} runs to win.`;
+    } else {
+        target = aiScore + 1;
+        transitionMessage.textContent = `End of AI's innings. You need ${target} runs to win.`;
+    }
+    secondInnings = true;
+    setTimeout(() => {
+        transitionMessageSection.style.display = 'none';
+        gameSection.style.display = 'block';
+        statusDisplay.textContent = `You are now ${playerChoice === 'bat' ? 'bowling' : 'batting'}!`;
+    }, 3000);
+}
+
+function playerChasing(playerNumber, aiNumber) {
+    playerScore += playerNumber;
+    scoreDisplay.textContent = `Your Score: ${playerScore}`;
+    if (playerScore >= target) endGame();
+}
+
+function aiChasing(playerNumber, aiNumber) {
+    aiScore += aiNumber;
+    scoreDisplay.textContent = `AI Score: ${aiScore}`;
+    if (aiScore >= target) endGame();
+}
+
+function endGame() {
+    gameSection.style.display = 'none';
+    resultSection.style.display = 'block';
+
+    if (playerScore >= target) {
+        finalResult.textContent = 'You won!';
+    } else {
+        finalResult.textContent = 'AI won!';
+    }
+}
+
+// Restart game
+document.getElementById('restart').addEventListener('click', () => location.reload());
diff --git a/projects/Cricket game/styles.css b/projects/Cricket game/styles.css
@@ -0,0 +1,80 @@
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: #e0f7fa;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.game-container {
+    background-color: white;
+    padding: 30px;
+    border-radius: 15px;
+    max-width: 400px;
+    width: 100%;
+    text-align: center;
+    box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
+}
+
+h1 {
+    font-size: 24px;
+    font-weight: 600;
+    color: #00796b;
+}
+
+h2 {
+    font-size: 20px;
+    font-weight: 500;
+    color: #004d40;
+}
+
+.btn-container {
+    margin-top: 20px;
+}
+
+.btn {
+    background-color: #00796b;
+    color: white;
+    border: none;
+    padding: 12px 20px;
+    margin: 10px;
+    border-radius: 8px;
+    font-size: 16px;
+    cursor: pointer;
+    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
+    transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+    background-color: #004d40;
+}
+
+.message {
+    margin-top: 15px;
+    font-size: 16px;
+    color: #00796b;
+}
+
+#score-display, #balls-remaining, #wickets {
+    font-size: 18px;
+    margin-top: 20px;
+    color: #004d40;
+}
+
+#final-result {
+    font-size: 22px;
+    font-weight: bold;
+    margin: 20px 0;
+}
+
+#transition-message {
+    font-size: 20px;
+    color: #ff5722;
+    font-weight: bold;
+}
+
+button.number-btn {
+    font-size: 18px;
+}