diff --git a/js/game.js b/js/game.js index 978722c..3df83f8 100644 --- a/js/game.js +++ b/js/game.js @@ -49,21 +49,64 @@ class Game { this.isGameover = false; + // Timer properties + this.timeLeft = 30; + this.timer = null; + this.timerDisplay = null; + this.isTimerStarted = false; + this.addPlayersUI(); this.updateScoreboard(); this.updatePlayerNameUI(); this.makeScoreboardDraggable(); + this.createTimerUI(); // Adding event listeners for filling box, switching player, and winning this.addEventListener("boxFill", () => this.onBoxFill()); this.addEventListener("playerSwitch", () => this.onPlayerSwitch()); this.addEventListener("playerWin", () => this.onPlayerWin()); + this.addEventListener("edgeFill", () => this.onEdgeFill()); + } + + // Create timer UI + createTimerUI() { + const timerContainer = document.createElement('div'); + timerContainer.id = 'timer-container'; + timerContainer.innerHTML = ` +
30
+
seconds left
+ `; + document.body.appendChild(timerContainer); + this.timerDisplay = document.getElementById('timer'); + } + + // Start or restart the timer + startTimer() { + clearInterval(this.timer); + this.timeLeft = 30; + this.updateTimerDisplay(); + this.timer = setInterval(() => { + this.timeLeft--; + this.updateTimerDisplay(); + if (this.timeLeft <= 0) { + clearInterval(this.timer); + this.switchPlayer(); + } + }, 1000); + } + + // Update timer display + updateTimerDisplay() { + if (this.timerDisplay) { + this.timerDisplay.textContent = this.timeLeft; + } } // End Game onPlayerWin() { this.isGameover = true; this.removeEventListener("boxFill"); + clearInterval(this.timer); // Stop the timer let winSound = new Audio("../assets/sounds/win.mp3"); winSound.play(); @@ -102,6 +145,9 @@ class Game { onPlayerSwitch() { this.updatePlayerNameUI(); + if (this.isTimerStarted) { + this.startTimer(); // Restart timer for the new player + } } // If a box is filled, increment players' score with the number of boxes filled by him/her and update UI @@ -109,6 +155,19 @@ class Game { this.currentPlayer.filledBoxes++; this.updatePlayerScoreUI(); this.updateScoreboard(); + if (this.isTimerStarted) { + this.startTimer(); // Restart timer when a move is made + } + } + + // New method to handle edge fill event + onEdgeFill() { + if (!this.isTimerStarted) { + this.isTimerStarted = true; + this.startTimer(); + } else { + this.startTimer(); // Restart timer when a move is made + } } // Add players to UI @@ -259,7 +318,6 @@ class Game { } // Declaring Global Variables - const rowsInput = Number(localStorage.getItem("rows")); const columnsInput = Number(localStorage.getItem("columns")); const playersInput = Number(localStorage.getItem("players")); diff --git a/pages/game.html b/pages/game.html index 0058a4c..51f883a 100644 --- a/pages/game.html +++ b/pages/game.html @@ -1,7 +1,6 @@ - - + @@ -17,261 +16,407 @@ - + Dots & Boxes Game - + - +
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- PlayerX's turn -
+
+ PlayerX's turn +
-
-

Scoreboard

-
- -
-
-
-
+
+

Scoreboard

+
+
+
+
+
+
- - - - - - - - - - - - - - - + + + + + + + + + + + + + +
- -
- Go Back to Home - Play Again -
+ +
+ Go Back to Home + Play Again +
-
-
-

Game Tour

-

Welcome to the Dot-box game presented by Chrome Gaming!

Dot-Box is a game where players take - turns drawing lines between dots to create boxes. The player who completes the most boxes wins. It's - a simple yet strategic game enjoyed by people of all ages. Click the "Next" button to start the - tour.

-
- - -
+
+
+

Game Tour

+

+ Welcome to the Dot-box game presented by Chrome Gaming!

+ Dot-Box is a game where players take turns drawing lines between + dots to create boxes. The player who completes the most boxes wins. + It's a simple yet strategic game enjoyed by people of all ages. + Click the "Next" button to start the tour. +

+
+ +
+
-
-

Step 1

-

This is Game Board! This is where the game is displayed, Play here by connecting the lines.

-
- - - -
+
+

Step 1

+

+ This is Game Board! This is where the game is displayed, Play here + by connecting the lines. +

+
+ + +
+
-
-

Step 2

-

Here’s where the player’s score is displayed, Keep track of your score as you play the game

-
- - - -
+
+

Step 2

+

+ Here's where the player's score is displayed, Keep track of your + score as you play the game +

+
+ + +
+
-
-

Step 3

-

Here you can see the player’s turn indicator.

-
- - - -
+
+

Step 3

+

Here you can see the player's turn indicator.

+
+ + +
+
-
-

Step 4

-

This the live dragable scorebaord. Hold and move to your desire place

-
- - - -
+
+

Step 4

+

This is the live draggable scoreboard. Hold and move to your desired place

+
+ + +
+
-
-

Step 5

-

This is the home button. Click to go back to the homepage.

-
- - - -
+
+

Step 5

+

This is the home button. Click to go back to the homepage.

+
+ + +
+
-
-

Step 6

-

This is the sound toggle button. Click to mute/unmute the sound. Besides it there is a reset/restart - button.

-
- - - -
+
+

Step 6

+

+ This is the sound toggle button. Click to mute/unmute the sound. + Besides it there is a reset/restart button. +

+
+ + +
+
-
-

Step 7

-

Now you are ready to start the game. Have fun!

-
- - -
+
+

Step 7

+

Now you are ready to start the game. Have fun!

+
+ +
+
+ document.querySelectorAll("#prev-step").forEach((button) => { + button.addEventListener("click", prevStep); + });