From 7f1b74708bbc4f234cc099214811dc9afac847f8 Mon Sep 17 00:00:00 2001 From: Namonay Date: Sun, 25 Feb 2024 00:07:42 +0100 Subject: [PATCH] Made the game work, made it more intuitive and ends when someone wins --- frontend/static/js/views/TicTacToeView.js | 101 +++++++++++++++++++--- 1 file changed, 91 insertions(+), 10 deletions(-) diff --git a/frontend/static/js/views/TicTacToeView.js b/frontend/static/js/views/TicTacToeView.js index 801af4b..5ad543b 100644 --- a/frontend/static/js/views/TicTacToeView.js +++ b/frontend/static/js/views/TicTacToeView.js @@ -15,6 +15,7 @@ export default class extends AbstractView this.playerTurn = 0; this.playerOneCurrentTab = 4; this.playerTwoCurrentTab = 4; + this.Winner = -1; } async leavePage() @@ -30,6 +31,12 @@ export default class extends AbstractView let x = event.offsetX; let y = event.offsetY; + if (this.Winner != -1) + { + console.log("end of game, Winner is : " + this.Winner); + return; + } + function findPlace(x, morpion) { if (x <= morpion.gap || x >= morpion.gap + morpion.rectsize * 9) @@ -49,10 +56,10 @@ export default class extends AbstractView let targetY = (morpion.gap + Math.floor(targetTab / 3) * morpion.rectsize * 3) + (Math.floor(squareTab / 3) * morpion.rectsize); if (!morpion.playerTurn) { + morpion.ctx.beginPath(); + morpion.ctx.strokeStyle = "green"; morpion.ctx.moveTo(targetX + 15, targetY + 15); morpion.ctx.lineTo(targetX + 45, targetY + 45); - morpion.ctx.stroke(); - morpion.ctx.closePath(); morpion.ctx.moveTo(targetX + 45, targetY + 15); morpion.ctx.lineTo(targetX + 15, targetY + 45); morpion.ctx.stroke(); @@ -60,6 +67,8 @@ export default class extends AbstractView } else { + morpion.ctx.beginPath(); + morpion.ctx.strokeStyle = "red"; targetX += morpion.rectsize / 2; targetY += morpion.rectsize / 2; morpion.ctx.arc(targetX, targetY, 20, 0, 2 * Math.PI); @@ -68,6 +77,62 @@ export default class extends AbstractView } } + function PaintCurrentTab(morpion, currentTab, color) + { + let targetX = (morpion.gap + currentTab % 3 * morpion.rectsize * 3); + let targetY = (morpion.gap + Math.floor(currentTab / 3) * morpion.rectsize * 3); + + morpion.ctx.beginPath(); + morpion.ctx.strokeStyle = color; + morpion.ctx.lineWidth = 6; + morpion.ctx.strokeRect(targetX, targetY, morpion.rectsize * 3, morpion.rectsize * 3); + morpion.ctx.closePath(); + + } + + function highlightNewTab(morpion) + { + if (!morpion.playerTurn) + PaintCurrentTab(morpion, morpion.playerOneCurrentTab, "green"); + else + PaintCurrentTab(morpion, morpion.playerTwoCurrentTab, "red"); + } + + function checkForWinningMove(morpion, targetTab) + { + let count = 0; + + for (let i = 0; i < 3; i++) + { + if (morpion.morpion[targetTab][i] != -1 && (morpion.morpion[targetTab][i] === morpion.morpion[targetTab][i + 3] && morpion.morpion[targetTab][i + 3] === morpion.morpion[targetTab][i + 6])) + morpion.Winner = !morpion.playerTurn; + } + for (let i = 0; i < morpion.morpion.length; i += 3) + { + if (morpion.morpion[targetTab][i] != -1 && (morpion.morpion[targetTab][i] === morpion.morpion[targetTab][i + 1] && morpion.morpion[targetTab][i + 1] === morpion.morpion[targetTab][i + 2])) + morpion.Winner = !morpion.playerTurn; + } + if (morpion.morpion[targetTab][0] != -1 && (morpion.morpion[targetTab][0] === morpion.morpion[targetTab][4] && morpion.morpion[targetTab][4] === morpion.morpion[targetTab][8])) + morpion.Winner = !morpion.playerTurn; + if (morpion.morpion[targetTab][2] != -1 && (morpion.morpion[targetTab][2] === morpion.morpion[targetTab][4] && morpion.morpion[targetTab][4] === morpion.morpion[targetTab][6])) + morpion.Winner = !morpion.playerTurn; + morpion.morpion[targetTab].forEach((v) => (v !== -1 && count++)); + if (count == 9 && morpion.Winner == -1) + morpion.Winner = morpion.playerTurn; + } + + function paintWinningNotification(morpion) + { + morpion.ctx.beginPath(); + morpion.ctx.fillStyle = "white"; + morpion.ctx.fillRect(morpion.width / 2 - 200, morpion.height - morpion.gap + 10, 400, 80); + morpion.ctx.closePath(); + morpion.ctx.beginPath(); + morpion.ctx.fillStyle = "black"; + morpion.ctx.fillText((morpion.Winner) ? "Winner is : X" : "Winner is : O", morpion.width / 2 - 30, morpion.height - morpion.gap / 2, 140); + morpion.ctx.closePath(); + } + function updateMorpion(targetTab, squareTab, morpion) { console.log("targettab : " + targetTab + " squaretab : " + squareTab + " playerturn : " + morpion.playerTurn); @@ -76,16 +141,25 @@ export default class extends AbstractView console.log("targettab : " + targetTab + " squaretab : " + squareTab); if (!morpion.playerTurn && targetTab != morpion.playerOneCurrentTab) return -1; - if (morpion.morpion[targetTab][squareTab] == -1) - morpion.morpion[targetTab][squareTab] = morpion.playerTurn; + if (morpion.morpion[targetTab][squareTab] == -1) + morpion.morpion[targetTab][squareTab] = (morpion.playerTurn) ? 1 : 0; else return -1; - if (morpion.playerTurn) - morpion.playerTwoCurrentTab = squareTab; - else - morpion.playerOneCurrentTab = squareTab; drawNewCase(targetTab, squareTab, morpion); - morpion.playerTurn = !morpion.playerTurn; + morpion.playerTurn = !morpion.playerTurn; + PaintCurrentTab(morpion, targetTab, "white"); + if (!morpion.playerTurn) + morpion.playerTwoCurrentTab = squareTab; + else + morpion.playerOneCurrentTab = squareTab; + checkForWinningMove(morpion, targetTab); + if (morpion.Winner != -1) + { + console.log((morpion.Winner) ? "Winner is O" : "Winner is X"); + paintWinningNotification(morpion); + return; + } + highlightNewTab(morpion); return 0; } @@ -116,7 +190,7 @@ export default class extends AbstractView this.morpion[i].push(-1); this.canvas = document.getElementById("Morpion"); this.ctx = this.canvas.getContext("2d"); - this.ctx.fillStyle = "white"; + this.ctx.fillStyle = "black"; this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); for (let i = 1, x = this.gap, y = this.gap; i <= 9; i++) { @@ -132,22 +206,28 @@ export default class extends AbstractView for (let i = 0; i < 4; i++) { this.ctx.beginPath(); + this.ctx.strokeStyle = `rgb(230 230 230)`; this.ctx.moveTo(this.gap + i * this.rectsize * 3, this.gap - 3); this.ctx.lineTo(this.gap + i * this.rectsize * 3, this.canvas.height - this.gap + 3); this.ctx.stroke(); + this.ctx.closePath(); }; for (let i = 0; i < 4; i++) { this.ctx.beginPath(); + this.ctx.strokeStyle = `rgb(230 230 230)`; this.ctx.moveTo(this.gap, this.gap + i * this.rectsize * 3); this.ctx.lineTo(this.canvas.height - this.gap, this.gap + i * this.rectsize * 3); this.ctx.stroke(); + this.ctx.closePath(); } this.canvas.addEventListener("mousedown", (event) => { this.onClick(event) }, false); } DrawMorpion(start_x, start_y) { + this.ctx.beginPath(); + this.ctx.strokeStyle = `rgb(200 200 200)`; for (let i = 1, x = 0, y = 0; i <= 9; i++) { this.ctx.strokeRect(start_x + x, start_y + y, this.rectsize, this.rectsize); @@ -158,6 +238,7 @@ export default class extends AbstractView x = 0; } } + this.ctx.closePath(); } async getHtml()