Add files via upload

26.9-14.00/README.md

@@ -0,0 +1,18 @@
+# Backgammon Game
+
+A modern, fully interactive backgammon game optimized for mobile and desktop browsers.
+
+## Features
+- 3D animated board and dice
+- Dynamic player guidance
+- Customizable themes and player names
+- Save and load game states with local storage
+- Sound effects for in-game actions
+
+## How to Play
+1. Clone or download the repository.
+2. Open `index.html` in your browser.
+3. Roll the dice, move the pieces, and enjoy the game!
+
+## Contributing
+Feel free to fork the project and make pull requests with improvements!

26.9-14.00/bg1.js

@@ -0,0 +1,98 @@
+// bg1.js - Enhancing UI with animations and 3D effects
+
+document.addEventListener("DOMContentLoaded", () => {
+    const board = document.getElementById("backgammon-board");
+    const leftBar = document.getElementById("left-bar");
+    const rightBar = document.getElementById("right-bar");
+    const dice1 = document.getElementById("dice1");
+    const dice2 = document.getElementById("dice2");
+    const rollBtn = document.getElementById("roll-btn");
+    let currentPlayer = "yellow";
+
+    // 3D Rotating Board Animation
+    function addBoardRotation() {
+        board.style.transition = "transform 1s ease-in-out";
+        board.style.transformStyle = "preserve-3d";
+        board.style.transform = "rotateX(15deg) rotateY(15deg)";
+    }
+
+    function resetBoardRotation() {
+        board.style.transform = "rotateX(0deg) rotateY(0deg)";
+    }
+
+    // Event listeners for board rotation
+    board.addEventListener("mouseenter", addBoardRotation);
+    board.addEventListener("mouseleave", resetBoardRotation);
+
+    // Highlight the active player's side
+    function highlightActivePlayer() {
+        const yellowShadow = "0px 0px 20px 10px rgba(255, 204, 0, 0.8)";
+        const whiteShadow = "0px 0px 20px 10px rgba(255, 255, 255, 0.8)";
+        if (currentPlayer === "yellow") {
+            leftBar.style.boxShadow = yellowShadow;
+            rightBar.style.boxShadow = "none";
+        } else {
+            rightBar.style.boxShadow = whiteShadow;
+            leftBar.style.boxShadow = "none";
+        }
+    }
+
+    // Animate dice roll
+    function animateDiceRoll(diceElement) {
+        diceElement.style.transition = "transform 0.5s ease";
+        diceElement.style.transform = "rotateX(360deg)";
+        setTimeout(() => {
+            diceElement.style.transform = "rotateX(0)";
+        }, 500);
+    }
+
+    // Event listeners for dice roll animations
+    dice1.addEventListener("click", () => animateDiceRoll(dice1));
+    dice2.addEventListener("click", () => animateDiceRoll(dice2));
+
+    // Pieces Animation - Interactive hover effects
+    function animatePieces() {
+        const pieces = document.querySelectorAll(".piece");
+        pieces.forEach(piece => {
+            piece.style.transition = "transform 0.3s ease, box-shadow 0.3s ease";
+            piece.addEventListener("mouseenter", () => {
+                piece.style.transform = "scale(1.1)";
+                piece.style.boxShadow = "0px 5px 10px rgba(0, 0, 0, 0.5)";
+            });
+            piece.addEventListener("mouseleave", () => {
+                piece.style.transform = "scale(1)";
+                piece.style.boxShadow = "none";
+            });
+        });
+    }
+
+    // Call to animate pieces (run when pieces are initialized)
+    animatePieces();
+
+    // Roll button 3D bounce effect
+    rollBtn.style.transition = "transform 0.5s ease";
+    rollBtn.addEventListener("mousedown", () => {
+        rollBtn.style.transform = "scale(0.9)";
+    });
+    rollBtn.addEventListener("mouseup", () => {
+        rollBtn.style.transform = "scale(1)";
+    });
+
+    // Board background color change on click
+    function changeBoardColor() {
+        const colors = ["#2f2f2f", "#3e3e3e", "#4d4d4d"];
+        const randomColor = colors[Math.floor(Math.random() * colors.length)];
+        board.style.backgroundColor = randomColor;
+    }
+
+    board.addEventListener("click", changeBoardColor);
+
+    // Toggle the active player and highlight the respective side
+    function togglePlayer() {
+        currentPlayer = currentPlayer === "yellow" ? "white" : "yellow";
+        highlightActivePlayer();
+    }
+
+    // Initial highlight of active player
+    highlightActivePlayer();
+});

26.9-14.00/bg2.js

@@ -0,0 +1,168 @@
+// bg2.js - Enhancing gameplay mechanics and dynamic interactions
+
+document.addEventListener("DOMContentLoaded", () => {
+    const board = document.getElementById("board");
+    let currentPlayer = "yellow";
+    let diceRolls = [];
+
+    // Dice Roll Functionality
+    function rollDice() {
+        const dice1 = getRandomDiceRoll();
+        const dice2 = getRandomDiceRoll();
+        diceRolls = [dice1, dice2];
+
+        displayDiceRolls(dice1, dice2);
+        animateDiceRolls();
+        togglePlayer();
+        showPlayerTooltip();
+    }
+
+    // Generate random dice roll
+    function getRandomDiceRoll() {
+        return Math.floor(Math.random() * 6) + 1;
+    }
+
+    // Display dice roll values
+    function displayDiceRolls(dice1, dice2) {
+        document.getElementById("dice1").textContent = dice1;
+        document.getElementById("dice2").textContent = dice2;
+    }
+
+    // Animate dice after rolling
+    function animateDiceRolls() {
+        const diceElements = [document.getElementById("dice1"), document.getElementById("dice2")];
+
+        diceElements.forEach(dice => {
+            dice.style.transform = "rotateX(360deg) rotateY(360deg)";
+            setTimeout(() => {
+                dice.style.transform = "rotateX(0deg) rotateY(0deg)";
+            }, 500);
+        });
+    }
+
+    // Move pieces based on dice roll
+    function movePiece(piece, diceValue) {
+        const currentPosition = Array.from(board.children).indexOf(piece.parentElement);
+        let newPosition = currentPosition + (currentPlayer === "yellow" ? diceValue : -diceValue);
+
+        if (newPosition < 0 || newPosition >= board.children.length) {
+            newPosition = currentPosition; // Invalid move, stay in place
+        }
+
+        const targetSpot = board.children[newPosition];
+        if (targetSpot) {
+            piece.style.transition = "transform 0.3s ease";
+            targetSpot.appendChild(piece);
+        }
+    }
+
+    // Add drag & drop functionality for pieces
+    let draggedPiece = null;
+
+    board.addEventListener("dragstart", (e) => {
+        if (e.target.classList.contains("piece")) {
+            draggedPiece = e.target;
+            setTimeout(() => (e.target.style.opacity = "0.5"), 0);
+        }
+    });
+
+    board.addEventListener("dragend", (e) => {
+        e.target.style.opacity = "1";
+    });
+
+    board.addEventListener("dragover", (e) => {
+        e.preventDefault();
+    });
+
+    board.addEventListener("drop", (e) => {
+        if (draggedPiece && e.target.classList.contains("triangle")) {
+            movePiece(draggedPiece, diceRolls[0]); // Move based on the first dice roll
+            diceRolls.shift(); // Remove the used dice roll
+        }
+    });
+
+    // Display a tooltip guiding the player
+    function showPlayerTooltip() {
+        const tooltip = createTooltip(
+            `${currentPlayer === "yellow" ? 'Yellow' : 'White'}'s Turn! Roll the dice to continue.`,
+            currentPlayer === "yellow" ? "#ffcc00" : "#ffffff",
+            currentPlayer === "yellow" ? "#333" : "#000"
+        );
+        document.body.appendChild(tooltip);
+
+        setTimeout(() => {
+            tooltip.remove();
+        }, 3000);
+    }
+
+    // Create tooltip element
+    function createTooltip(text, bgColor, textColor) {
+        const tooltip = document.createElement("div");
+        tooltip.style.position = "absolute";
+        tooltip.style.bottom = "20px";
+        tooltip.style.left = "50%";
+        tooltip.style.transform = "translateX(-50%)";
+        tooltip.style.padding = "10px";
+        tooltip.style.backgroundColor = bgColor;
+        tooltip.style.color = textColor;
+        tooltip.style.borderRadius = "5px";
+        tooltip.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
+        tooltip.style.fontSize = "1.2rem";
+        tooltip.textContent = text;
+
+        return tooltip;
+    }
+
+    // Toggle active player
+    function togglePlayer() {
+        currentPlayer = currentPlayer === "yellow" ? "white" : "yellow";
+    }
+
+    // Show valid moves for the current player
+    function highlightValidMoves() {
+        const allTriangles = Array.from(board.children);
+        allTriangles.forEach(triangle => {
+            if (Math.random() < 0.2) {
+                triangle.style.backgroundColor = "rgba(0, 255, 0, 0.3)";
+                setTimeout(() => {
+                    triangle.style.backgroundColor = "";
+                }, 1000);
+            }
+        });
+    }
+
+    // Display tooltips for invalid moves
+    function showInvalidMoveMessage() {
+        const invalidMoveTooltip = createTooltip(
+            "Invalid Move! Try Again.",
+            "#ff4444",
+            "#fff"
+        );
+        invalidMoveTooltip.style.top = "50%";
+        invalidMoveTooltip.style.left = "50%";
+        invalidMoveTooltip.style.transform = "translate(-50%, -50%)";
+
+        document.body.appendChild(invalidMoveTooltip);
+
+        setTimeout(() => {
+            invalidMoveTooltip.remove();
+        }, 2000);
+    }
+
+    // Handle piece movements and check for validity
+    function handlePieceMove(diceRoll) {
+        const valid = Math.random() < 0.5; // Simulate move validation (to be implemented)
+
+        if (valid) {
+            movePiece(draggedPiece, diceRoll);
+        } else {
+            showInvalidMoveMessage();
+        }
+    }
+
+    // Add event listener for dice roll button
+    document.getElementById("roll-btn").addEventListener("click", rollDice);
+
+    // Initial player guidance
+    showPlayerTooltip();
+});