diff --git a/26.9-14.00/README.md b/26.9-14.00/README.md new file mode 100644 index 0000000..c77b332 --- /dev/null +++ b/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! diff --git a/26.9-14.00/assets/images/board-background.png b/26.9-14.00/assets/images/board-background.png new file mode 100644 index 0000000..3e7f2cd Binary files /dev/null and b/26.9-14.00/assets/images/board-background.png differ diff --git a/26.9-14.00/assets/images/dice1.png b/26.9-14.00/assets/images/dice1.png new file mode 100644 index 0000000..a452a13 Binary files /dev/null and b/26.9-14.00/assets/images/dice1.png differ diff --git a/26.9-14.00/assets/images/dice2.png b/26.9-14.00/assets/images/dice2.png new file mode 100644 index 0000000..63b599b Binary files /dev/null and b/26.9-14.00/assets/images/dice2.png differ diff --git a/26.9-14.00/assets/images/dice3.png b/26.9-14.00/assets/images/dice3.png new file mode 100644 index 0000000..003cb6d Binary files /dev/null and b/26.9-14.00/assets/images/dice3.png differ diff --git a/26.9-14.00/assets/images/dice4.png b/26.9-14.00/assets/images/dice4.png new file mode 100644 index 0000000..9d49cb9 Binary files /dev/null and b/26.9-14.00/assets/images/dice4.png differ diff --git a/26.9-14.00/assets/images/dice5.png b/26.9-14.00/assets/images/dice5.png new file mode 100644 index 0000000..32d29dc Binary files /dev/null and b/26.9-14.00/assets/images/dice5.png differ diff --git a/26.9-14.00/assets/images/dice6.png b/26.9-14.00/assets/images/dice6.png new file mode 100644 index 0000000..197ba2f Binary files /dev/null and b/26.9-14.00/assets/images/dice6.png differ diff --git a/26.9-14.00/assets/images/white-piece.png b/26.9-14.00/assets/images/white-piece.png new file mode 100644 index 0000000..056ff19 Binary files /dev/null and b/26.9-14.00/assets/images/white-piece.png differ diff --git a/26.9-14.00/assets/images/yellow-piece.png b/26.9-14.00/assets/images/yellow-piece.png new file mode 100644 index 0000000..095e631 Binary files /dev/null and b/26.9-14.00/assets/images/yellow-piece.png differ diff --git a/26.9-14.00/bg1.js b/26.9-14.00/bg1.js new file mode 100644 index 0000000..1b684c0 --- /dev/null +++ b/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(); +}); diff --git a/26.9-14.00/bg2.js b/26.9-14.00/bg2.js new file mode 100644 index 0000000..12dd70c --- /dev/null +++ b/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(); +}); diff --git a/26.9-14.00/bg3.js b/26.9-14.00/bg3.js new file mode 100644 index 0000000..8443c95 --- /dev/null +++ b/26.9-14.00/bg3.js @@ -0,0 +1,193 @@ +// bg3.js - Advanced gameplay mechanics and rule refinement + +document.addEventListener("DOMContentLoaded", () => { + const board = document.getElementById("board"); + const rollBtn = document.getElementById("roll-btn"); + let currentPlayer = "yellow"; + let diceRolls = []; + let activePiece = null; + const maxBoardPositions = 24; + + // Dice Roll Functionality + function rollDice() { + const dice1 = getRandomDiceRoll(); + const dice2 = getRandomDiceRoll(); + diceRolls = [dice1, dice2]; + updateDiceDisplay(dice1, dice2); + enablePieceSelection(); + } + + // Generate random dice roll + function getRandomDiceRoll() { + return Math.floor(Math.random() * 6) + 1; + } + + // Update dice display + function updateDiceDisplay(dice1, dice2) { + document.getElementById("dice1").textContent = dice1; + document.getElementById("dice2").textContent = dice2; + animateDiceRolls(); + } + + // Animate dice rolls + 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); + }); + } + + // Enable piece selection + function enablePieceSelection() { + const pieces = document.querySelectorAll(`.${currentPlayer}-piece`); + pieces.forEach(piece => { + piece.style.cursor = "pointer"; + piece.addEventListener("click", () => { + if (!activePiece) { + activePiece = piece; + highlightPossibleMoves(piece); + } + }); + }); + } + + // Highlight possible moves based on dice roll + function highlightPossibleMoves(piece) { + const currentPosition = getCurrentPosition(piece); + diceRolls.forEach(dice => { + const newPosition = calculateNewPosition(currentPosition, dice); + if (isValidPosition(newPosition)) { + const target = board.children[newPosition]; + highlightTargetPosition(target); + } + }); + } + + // Get the current position of a piece + function getCurrentPosition(piece) { + return Array.from(board.children).indexOf(piece.parentElement); + } + + // Calculate new position based on dice roll + function calculateNewPosition(currentPosition, diceRoll) { + return currentPlayer === "yellow" + ? currentPosition + diceRoll + : currentPosition - diceRoll; + } + + // Validate new position + function isValidPosition(newPosition) { + return newPosition >= 0 && newPosition < maxBoardPositions; + } + + // Highlight the target position + function highlightTargetPosition(target) { + target.style.border = "2px solid #00ff00"; + target.addEventListener("click", () => movePieceToTarget(target)); + } + + // Move piece to target position + function movePieceToTarget(target) { + if (activePiece && target) { + target.appendChild(activePiece); + animatePieceMove(activePiece); + + setTimeout(() => { + resetHighlights(); + activePiece = null; + diceRolls.shift(); // Use up the dice + if (diceRolls.length === 0) endTurn(); + }, 300); + } + } + + // Animate piece movement + function animatePieceMove(piece) { + piece.style.transition = "transform 0.5s ease"; + piece.style.transform = "scale(1.1)"; + setTimeout(() => { + piece.style.transform = "scale(1)"; + }, 500); + } + + // Reset highlighted positions + function resetHighlights() { + const triangles = document.querySelectorAll(".triangle"); + triangles.forEach(triangle => { + triangle.style.border = "none"; + }); + } + + // End turn and switch players + function endTurn() { + currentPlayer = currentPlayer === "yellow" ? "white" : "yellow"; + alert(`${currentPlayer === "yellow" ? 'Yellow' : 'White'}'s Turn!`); + showPlayerTooltip(); + } + + // Show a tooltip for the current player + function showPlayerTooltip() { + const tooltip = createTooltip(`${currentPlayer === "yellow" ? 'Yellow' : 'White'}'s Turn! Roll the dice to continue.`); + document.body.appendChild(tooltip); + + setTimeout(() => { + tooltip.remove(); + }, 3000); + } + + // Create tooltip element + function createTooltip(message) { + const tooltip = document.createElement("div"); + tooltip.id = "player-tooltip"; + tooltip.style.position = "absolute"; + tooltip.style.bottom = "20px"; + tooltip.style.left = "50%"; + tooltip.style.transform = "translateX(-50%)"; + tooltip.style.padding = "10px"; + tooltip.style.backgroundColor = currentPlayer === "yellow" ? "#ffcc00" : "#ffffff"; + tooltip.style.color = currentPlayer === "yellow" ? "#333" : "#000"; + tooltip.style.borderRadius = "5px"; + tooltip.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)"; + tooltip.style.fontSize = "1.2rem"; + tooltip.textContent = message; + + return tooltip; + } + + // Validate moves based on current rules + function isValidMove(piece, targetPosition) { + const currentPosition = getCurrentPosition(piece); + if (currentPlayer === "yellow" && currentPosition >= targetPosition) return false; + if (currentPlayer === "white" && currentPosition <= targetPosition) return false; + // Additional move validation logic can go here + return true; + } + + // Check win condition + function checkWinCondition() { + const yellowPieces = document.querySelectorAll(".yellow-piece"); + const whitePieces = document.querySelectorAll(".white-piece"); + + if (yellowPieces.length === 0) { + alert("Yellow wins!"); + resetGame(); + } else if (whitePieces.length === 0) { + alert("White wins!"); + resetGame(); + } + } + + // Reset the game after a win + function resetGame() { + location.reload(); // Reload the page to reset the game + } + + // Add event listener for rolling dice + rollBtn.addEventListener("click", rollDice); + + // Show initial player tooltip + showPlayerTooltip(); +}); diff --git a/26.9-14.00/gameRules.js b/26.9-14.00/gameRules.js new file mode 100644 index 0000000..2b60171 --- /dev/null +++ b/26.9-14.00/gameRules.js @@ -0,0 +1,70 @@ +// gameRules.js - Enforcing the rules of Backgammon + +const gameRules = { + // Validate if the move is allowed based on the piece's current position and dice roll + isMoveValid: function (piece, startPos, diceRoll) { + const targetPos = this.calculateTargetPosition(startPos, diceRoll); + + // Ensure the target position is within bounds + if (!this.isWithinBounds(targetPos)) return false; + + // Check if the target position is blocked by the opponent's pieces + const targetSpot = board.children[targetPos]; + return !this.isBlocked(targetSpot); + }, + + // Calculate the target position based on the dice roll and current player's color + calculateTargetPosition: function (startPos, diceRoll) { + return currentPlayer === "yellow" ? startPos + diceRoll : startPos - diceRoll; + }, + + // Check if the target position is within the valid bounds of the board + isWithinBounds: function (position) { + return position >= 0 && position < board.children.length; + }, + + // Check if a target position is blocked by two or more of the opponent's pieces + isBlocked: function (spot) { + const opponentColor = this.getOpponentColor(); + const piecesInSpot = spot.querySelectorAll(`.${opponentColor}-piece`); + return piecesInSpot.length >= 2; + }, + + // Get the opponent player's color + getOpponentColor: function () { + return currentPlayer === "yellow" ? "white" : "yellow"; + }, + + // Capture an opponent's piece if there is only one on the target spot + capturePiece: function (targetSpot) { + const opponentColor = this.getOpponentColor(); + const opponentPiece = targetSpot.querySelector(`.${opponentColor}-piece`); + + if (opponentPiece) { + // Move the captured piece to the bar (prison) + document.getElementById(`${opponentColor}-bar`).appendChild(opponentPiece); + } + }, + + // Check if the player can bear off pieces (all pieces must be in the home quadrant) + canBearOff: function () { + const homeRange = this.getHomeRange(); + + // Verify all pieces are within the home range + const pieces = document.querySelectorAll(`.${currentPlayer}-piece`); + for (const piece of pieces) { + const pos = Array.from(board.children).indexOf(piece.parentElement); + if (pos < homeRange.start || pos > homeRange.end) { + return false; + } + } + return true; + }, + + // Get the home range for bearing off pieces, depending on the player's color + getHomeRange: function () { + return currentPlayer === "yellow" + ? { start: 18, end: 23 } + : { start: 0, end: 5 }; + } +}; diff --git a/26.9-14.00/index.html b/26.9-14.00/index.html new file mode 100644 index 0000000..e94b43d --- /dev/null +++ b/26.9-14.00/index.html @@ -0,0 +1,66 @@ + + + + + + Backgammon Game + + + + + + +
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
1
+
6
+
+
+ + + + + + + + + + + + + diff --git a/26.9-14.00/index.js b/26.9-14.00/index.js new file mode 100644 index 0000000..0e72c1c --- /dev/null +++ b/26.9-14.00/index.js @@ -0,0 +1,67 @@ +// index.js - Initialize the Game and Interactions + +document.addEventListener("DOMContentLoaded", () => { + const board = document.getElementById('board'); + const rollBtn = document.getElementById('roll-btn'); + const dice1 = document.getElementById('dice1'); + const dice2 = document.getElementById('dice2'); + let turn = 'yellow'; + + // Initialize Pieces + const pieces = { yellow: [], white: [] }; + + // Function to roll the dice + function rollDice() { + const diceRoll1 = getRandomDiceRoll(); + const diceRoll2 = getRandomDiceRoll(); + + displayDice(dice1, diceRoll1); + displayDice(dice2, diceRoll2); + + toggleTurn(); + alertTurn(turn, diceRoll1, diceRoll2); + } + + // Generate a random dice roll + function getRandomDiceRoll() { + return Math.floor(Math.random() * 6) + 1; + } + + // Display dice value + function displayDice(diceElement, rollValue) { + diceElement.textContent = rollValue; + } + + // Switch turns between yellow and white + function toggleTurn() { + turn = turn === 'yellow' ? 'white' : 'yellow'; + } + + // Alert the current turn and dice rolls + function alertTurn(turn, diceRoll1, diceRoll2) { + alert(`It's ${turn === 'yellow' ? 'Yellow' : 'White'}'s turn! Roll: ${diceRoll1}, ${diceRoll2}`); + } + + // Function to add pieces to the board + function addPiece(color, position) { + const piece = document.createElement('div'); + piece.classList.add('piece'); + if (color === 'white') piece.classList.add('white-piece'); + board.children[position].appendChild(piece); + pieces[color].push(piece); + } + + // Initialize the board with default pieces + function initializeBoard() { + addPiece('yellow', 0); + addPiece('yellow', 0); + addPiece('white', 23); + addPiece('white', 23); + } + + // Add event listener to the roll button + rollBtn.addEventListener('click', rollDice); + + // Set up the board initially + initializeBoard(); +}); diff --git a/26.9-14.00/localStorage.js b/26.9-14.00/localStorage.js new file mode 100644 index 0000000..e2ee950 --- /dev/null +++ b/26.9-14.00/localStorage.js @@ -0,0 +1,53 @@ +// localStorage.js - Save and load game state using browser's localStorage + +const storage = { + // Save the current game state to localStorage + saveGameState: function () { + const gameState = { + pieces: this.getPiecesState(), + currentPlayer: currentPlayer, + diceRolls: diceRolls + }; + localStorage.setItem('backgammonGameState', JSON.stringify(gameState)); + this.showAlert('Game state saved!'); + }, + + // Load the saved game state from localStorage + loadGameState: function () { + const savedState = localStorage.getItem('backgammonGameState'); + if (savedState) { + const { pieces, currentPlayer: savedPlayer, diceRolls: savedDiceRolls } = JSON.parse(savedState); + this.restorePieces(pieces); + currentPlayer = savedPlayer; + diceRolls = savedDiceRolls; + this.showAlert('Game state loaded!'); + } else { + this.showAlert('No saved game state found.'); + } + }, + + // Get the current state of the pieces on the board + getPiecesState: function () { + return Array.from(document.querySelectorAll('.piece')).map(piece => { + const position = Array.from(board.children).indexOf(piece.parentElement); + return { + color: piece.classList.contains('white-piece') ? 'white' : 'yellow', + position + }; + }); + }, + + // Restore pieces to their saved positions + restorePieces: function (pieces) { + pieces.forEach(pieceData => { + const piece = document.createElement('div'); + piece.classList.add('piece', `${pieceData.color}-piece`); + board.children[pieceData.position].appendChild(piece); + }); + }, + + // Utility function to display alerts + showAlert: function (message) { + alert(message); + } +}; diff --git a/26.9-14.00/settings.js b/26.9-14.00/settings.js new file mode 100644 index 0000000..97d0ad7 --- /dev/null +++ b/26.9-14.00/settings.js @@ -0,0 +1,25 @@ +// settings.js - Game Settings and Preferences + +const gameSettings = { + theme: "classic", + soundEnabled: true, + playerNames: { yellow: "Player 1", white: "Player 2" }, + + // Toggle sound on or off + toggleSound: function () { + this.soundEnabled = !this.soundEnabled; + this.showAlert(`Sound ${this.soundEnabled ? 'enabled' : 'disabled'}`); + }, + + // Set player names for yellow and white + setPlayerNames: function (yellowName, whiteName) { + this.playerNames.yellow = yellowName; + this.playerNames.white = whiteName; + this.showAlert(`Player names updated: ${yellowName} (Yellow), ${whiteName} (White)`); + }, + + // Utility function to show alerts (can be extended) + showAlert: function (message) { + alert(message); + } +}; diff --git a/26.9-14.00/sounds.js b/26.9-14.00/sounds.js new file mode 100644 index 0000000..772b630 --- /dev/null +++ b/26.9-14.00/sounds.js @@ -0,0 +1,23 @@ +// sounds.js - Adding sound effects to the game + +const sounds = { + diceRoll: new Audio('assets/sounds/dice-roll.mp3'), + pieceMove: new Audio('assets/sounds/piece-move.mp3'), + invalidMove: new Audio('assets/sounds/invalid-move.mp3'), + win: new Audio('assets/sounds/win.mp3'), + + // Play the sound corresponding to the given type + playSound: function (type) { + const soundMap = { + 'dice': this.diceRoll, + 'move': this.pieceMove, + 'invalid': this.invalidMove, + 'win': this.win + }; + + // Play the appropriate sound if the type exists + if (soundMap[type]) { + soundMap[type].play(); + } + } +}; diff --git a/26.9-14.00/styles.css b/26.9-14.00/styles.css new file mode 100644 index 0000000..b83196e --- /dev/null +++ b/26.9-14.00/styles.css @@ -0,0 +1,163 @@ +/* styles.css - Optimized Layout and Styling */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: Arial, sans-serif; + background-color: #f3f3f3; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; +} + +#backgammon-board { + width: 100vw; + max-width: 800px; + height: 100vw; + max-height: 800px; + background-color: #2f2f2f; + border-radius: 15px; + display: grid; + grid-template-columns: repeat(2, 1fr); + position: relative; + overflow: hidden; +} + +/* Side bars */ +#left-bar, #right-bar { + position: absolute; + top: 0; + bottom: 0; + width: 50%; +} + +#left-bar { + left: 0; + background-color: #333; +} + +#right-bar { + right: 0; + background-color: #222; +} + +/* Board Layout */ +#board { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: 1fr 1fr; + gap: 5px; + padding: 10px; +} + +/* Triangles */ +.triangle { + clip-path: polygon(50% 0%, 100% 100%, 0% 100%); + background-color: #fff; + transition: background-color 0.3s ease; + margin: 5px; +} + +.triangle:nth-child(even) { + background-color: #ddd; +} + +.triangle:hover { + background-color: #ffcc00; +} + +/* Pieces */ +.piece { + width: 90%; + height: 90%; + border-radius: 50%; + background-color: #ffcc00; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; + color: #333; + transition: transform 0.3s ease, box-shadow 0.3s ease; + cursor: pointer; +} + +.piece:hover { + transform: scale(1.1); + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); +} + +.white-piece { + background-color: #fff; +} + +/* Dice */ +#dice-container { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 15px; +} + +.dice { + width: 60px; + height: 60px; + background-color: white; + border-radius: 8px; + display: flex; + justify-content: center; + align-items: center; + font-size: 2rem; + transition: transform 0.5s ease; +} + +.dice:hover { + transform: rotate(360deg); +} + +/* Roll Button */ +#roll-btn { + position: absolute; + bottom: 90px; + left: 50%; + transform: translateX(-50%); + padding: 10px 20px; + background-color: #007bff; + color: white; + font-size: 1.2rem; + border-radius: 5px; + border: none; + cursor: pointer; + transition: background-color 0.3s, transform 0.3s; +} + +#roll-btn:hover { + background-color: #0056b3; + transform: scale(1.05); +} + +/* Responsive Adjustments */ +@media (max-width: 768px) { + #backgammon-board { + width: 95vw; + height: 95vw; + } + + .dice { + width: 40px; + height: 40px; + font-size: 1.5rem; + } + + #roll-btn { + padding: 8px 16px; + font-size: 1rem; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..06bc496 --- /dev/null +++ b/index.html @@ -0,0 +1,65 @@ + + + + + + Backgammon Game + + + + + + +
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
1
+
6
+
+
+ + + + + + + + + + + + +