Added one game successfuly

ChromeGaming · Aug 2, 2024 · 3ff69c6 · 3ff69c6
1 parent 3e0a574
commit 3ff69c6
Show file tree

Hide file tree

Showing 7 changed files with 247 additions and 5,282 deletions.
diff --git a/SinglePlayer - Games/Snake and ladder Updated/index.html b/SinglePlayer - Games/Snake and ladder Updated/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snake and Ladder Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="board" id="board"></div>
+    <div class="controls">
+        <button id="rollDice">Roll Dice</button>
+        <p id="diceResult">Dice Result: </p>
+        <p id="playerTurn">Player Turn: 1</p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Snake and ladder Updated/script.js b/SinglePlayer - Games/Snake and ladder Updated/script.js
@@ -0,0 +1,114 @@
+// script.js
+document.addEventListener('DOMContentLoaded', () => {
+    const board = document.getElementById('board');
+    const rollDiceButton = document.getElementById('rollDice');
+    const diceResult = document.getElementById('diceResult');
+    const playerTurnDisplay = document.getElementById('playerTurn');
+
+    let player1Position = 1;
+    let player2Position = 1;
+    let currentPlayer = 1;
+    const boardSize = 100;
+
+    // Define snakes and ladders
+    const snakes = {
+        17: 7,
+        54: 34,
+        62: 19,
+        64: 60,
+        87: 24,
+        93: 73,
+        95: 75,
+        99: 78
+    };
+
+    const ladders = {
+        1: 38,
+        4: 14,
+        9: 31,
+        21: 42,
+        28: 84,
+        51: 67,
+        72: 91,
+        80: 99
+    };
+
+    // Create the board
+    for (let i = 0; i < boardSize; i++) {
+        const cell = document.createElement('div');
+        cell.id = `cell-${i + 1}`;
+        cell.innerText = i + 1;
+        board.appendChild(cell);
+    }
+
+    // Create player pieces
+    const player1 = document.createElement('div');
+    player1.classList.add('player', 'player1');
+    board.appendChild(player1);
+
+    const player2 = document.createElement('div');
+    player2.classList.add('player', 'player2');
+    board.appendChild(player2);
+
+    const positions = [null, player1, player2];
+
+    function movePlayer(player, position) {
+        const cell = document.getElementById(`cell-${position}`);
+        const rect = cell.getBoundingClientRect();
+        const boardRect = board.getBoundingClientRect();
+        player.style.transform = `translate(${rect.left - boardRect.left}px, ${rect.top - boardRect.top}px)`;
+    }
+
+    function handleSpecialSquares(player, position) {
+        if (snakes[position]) {
+            position = snakes[position];
+        } else if (ladders[position]) {
+            position = ladders[position];
+        }
+        return position;
+    }
+
+    function checkWin(position) {
+        if (position >= boardSize) {
+            alert(`Player ${currentPlayer} wins!`);
+            resetGame();
+        }
+    }
+
+    function resetGame() {
+        player1Position = 1;
+        player2Position = 1;
+        currentPlayer = 1;
+        movePlayer(player1, player1Position);
+        movePlayer(player2, player2Position);
+        diceResult.innerText = `Dice Result: `;
+        playerTurnDisplay.innerText = `Player Turn: ${currentPlayer}`;
+    }
+
+    rollDiceButton.addEventListener('click', () => {
+        const diceRoll = Math.floor(Math.random() * 6) + 1;
+        diceResult.innerText = `Dice Result: ${diceRoll}`;
+
+        if (currentPlayer === 1) {
+            player1Position = Math.min(player1Position + diceRoll, boardSize);
+            movePlayer(player1, player1Position);
+            player1Position = handleSpecialSquares(player1, player1Position);
+            movePlayer(player1, player1Position);
+            checkWin(player1Position);
+            currentPlayer = 2;
+        } else {
+            player2Position = Math.min(player2Position + diceRoll, boardSize);
+            movePlayer(player2, player2Position);
+            player2Position = handleSpecialSquares(player2, player2Position);
+            movePlayer(player2, player2Position);
+            checkWin(player2Position);
+            currentPlayer = 1;
+        }
+
+        playerTurnDisplay.innerText = `Player Turn: ${currentPlayer}`;
+    });
+
+    // Initial positions
+    movePlayer(player1, player1Position);
+    movePlayer(player2, player2Position);
+});
diff --git a/SinglePlayer - Games/Snake and ladder Updated/styles.css b/SinglePlayer - Games/Snake and ladder Updated/styles.css
@@ -0,0 +1,51 @@
+/* styles.css */
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: Arial, sans-serif;
+}
+
+.board {
+    display: grid;
+    grid-template-columns: repeat(10, 50px);
+    grid-template-rows: repeat(10, 50px);
+    border: 2px solid black;
+    margin-bottom: 20px;
+    position: relative;
+}
+
+.board div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid gray;
+    width: 50px;
+    height: 50px;
+}
+
+.player {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    position: absolute;
+    transition: transform 0.5s ease;
+}
+
+.player1 {
+    background-color: red;
+}
+
+.player2 {
+    background-color: blue;
+}
+
+.controls {
+    text-align: center;
+}
+
+button {
+    padding: 10px 20px;
+    margin: 10px;
+    font-size: 16px;
+}
diff --git a/SinglePlayer - Games/Snakes And Ladders b/SinglePlayer - Games/Snakes And Ladders
diff --git a/additionalpage/assets/images/snake-ladder.jpg b/additionalpage/assets/images/snake-ladder.jpg