From 8843fd2b3d50b9794cec3038e3fdde3cd87732dc Mon Sep 17 00:00:00 2001 From: Ayush Deb Date: Thu, 25 Jul 2024 23:51:58 +0530 Subject: [PATCH 1/2] added a 30s time block --- js/game.js | 99 +++- pages/game.html | 1161 +++++++++++++++++++++++++---------------------- 2 files changed, 706 insertions(+), 554 deletions(-) diff --git a/js/game.js b/js/game.js index 1fad6101..38387a12 100644 --- a/js/game.js +++ b/js/game.js @@ -34,10 +34,17 @@ class Game { this.isGameover = false; + // Timer properties + this.timeLeft = 30; + this.timer = null; + this.timerDisplay = null; + this.timerStarted = 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()); @@ -45,10 +52,94 @@ class Game { this.addEventListener("playerWin", () => this.onPlayerWin()); } + // 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'); + this.makeTimerDraggable(timerContainer); + } + + // Make timer draggable + makeTimerDraggable(timerContainer) { + let isDragging = false; + let currentX; + let currentY; + let initialX; + let initialY; + let xOffset = 0; + let yOffset = 0; + + timerContainer.addEventListener("mousedown", dragStart); + document.addEventListener("mousemove", drag); + document.addEventListener("mouseup", dragEnd); + + function dragStart(e) { + initialX = e.clientX - xOffset; + initialY = e.clientY - yOffset; + + if (e.target === timerContainer) { + isDragging = true; + } + } + + function drag(e) { + if (isDragging) { + e.preventDefault(); + currentX = e.clientX - initialX; + currentY = e.clientY - initialY; + + xOffset = currentX; + yOffset = currentY; + + setTranslate(currentX, currentY, timerContainer); + } + } + + function dragEnd(e) { + initialX = currentX; + initialY = currentY; + + isDragging = false; + } + + function setTranslate(xPos, yPos, el) { + el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`; + } + } + + // 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(); @@ -87,6 +178,9 @@ class Game { onPlayerSwitch() { this.updatePlayerNameUI(); + if (this.timerStarted) { + 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 @@ -94,6 +188,10 @@ class Game { this.currentPlayer.filledBoxes++; this.updatePlayerScoreUI(); this.updateScoreboard(); + if (!this.timerStarted) { + this.timerStarted = true; + } + this.startTimer(); // Restart timer when a move is made } // Add players to UI @@ -244,7 +342,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 c6f67d8d..fc60f287 100644 --- a/pages/game.html +++ b/pages/game.html @@ -1,7 +1,6 @@ - - + @@ -17,643 +16,699 @@ - + Dots & Boxes Game - + - +
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- PlayerX's turn -
+
+ PlayerX's turn +
-
-

Scoreboard

-
- -
-
-
-
+
+

Scoreboard

+
+
+
+
+
+
- - - - - - - - - - - - - - - + + + + + + + + + + + + + +
-
-
-

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 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 4

-

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

-
- - - -
-
- -
-

Step 5

-

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

-
- - - -
-
- -
-

Step 6

-

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

-
- - -
-
+
+
+

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 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 4

+

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

+
+ + + +
+
+ +
+

Step 5

+

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

+
+ + + +
+
+ +
+

Step 6

+

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

+
+ + +
+
+
- + document.querySelectorAll("#prev-step").forEach((button) => { + button.addEventListener("click", prevStep); + }); - \ No newline at end of file + document.querySelectorAll("#skip-tour").forEach((button) => { + button.addEventListener("click", skipTour); + }); + + document.querySelectorAll("#close-tour").forEach((button) => { + button.addEventListener("click", closeTour); + }); + + document.getElementById("tour-overlay").style.display = "flex"; + showStep(currentStep); + }); + + + From 9f4c9d99aa004223003a473c541ee21500993ce3 Mon Sep 17 00:00:00 2001 From: Ayush Deb Date: Fri, 26 Jul 2024 00:20:13 +0530 Subject: [PATCH 2/2] updated --- js/game.js | 69 +++++++++++-------------------------------------- pages/game.html | 2 +- 2 files changed, 16 insertions(+), 55 deletions(-) diff --git a/js/game.js b/js/game.js index 38387a12..3d943f53 100644 --- a/js/game.js +++ b/js/game.js @@ -38,7 +38,7 @@ class Game { this.timeLeft = 30; this.timer = null; this.timerDisplay = null; - this.timerStarted = false; + this.isTimerStarted = false; this.addPlayersUI(); this.updateScoreboard(); @@ -50,6 +50,7 @@ class Game { this.addEventListener("boxFill", () => this.onBoxFill()); this.addEventListener("playerSwitch", () => this.onPlayerSwitch()); this.addEventListener("playerWin", () => this.onPlayerWin()); + this.addEventListener("edgeFill", () => this.onEdgeFill()); } // Create timer UI @@ -62,55 +63,6 @@ class Game { `; document.body.appendChild(timerContainer); this.timerDisplay = document.getElementById('timer'); - this.makeTimerDraggable(timerContainer); - } - - // Make timer draggable - makeTimerDraggable(timerContainer) { - let isDragging = false; - let currentX; - let currentY; - let initialX; - let initialY; - let xOffset = 0; - let yOffset = 0; - - timerContainer.addEventListener("mousedown", dragStart); - document.addEventListener("mousemove", drag); - document.addEventListener("mouseup", dragEnd); - - function dragStart(e) { - initialX = e.clientX - xOffset; - initialY = e.clientY - yOffset; - - if (e.target === timerContainer) { - isDragging = true; - } - } - - function drag(e) { - if (isDragging) { - e.preventDefault(); - currentX = e.clientX - initialX; - currentY = e.clientY - initialY; - - xOffset = currentX; - yOffset = currentY; - - setTranslate(currentX, currentY, timerContainer); - } - } - - function dragEnd(e) { - initialX = currentX; - initialY = currentY; - - isDragging = false; - } - - function setTranslate(xPos, yPos, el) { - el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`; - } } // Start or restart the timer @@ -178,7 +130,7 @@ class Game { onPlayerSwitch() { this.updatePlayerNameUI(); - if (this.timerStarted) { + if (this.isTimerStarted) { this.startTimer(); // Restart timer for the new player } } @@ -188,10 +140,19 @@ class Game { this.currentPlayer.filledBoxes++; this.updatePlayerScoreUI(); this.updateScoreboard(); - if (!this.timerStarted) { - this.timerStarted = true; + 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 } - this.startTimer(); // Restart timer when a move is made } // Add players to UI diff --git a/pages/game.html b/pages/game.html index fc60f287..476a7a39 100644 --- a/pages/game.html +++ b/pages/game.html @@ -115,7 +115,7 @@ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); text-align: center; z-index: 1000; - cursor: move; + margin-right: 10vw; } #timer {