🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../../../../../domains/577320.klas4s23.mid-ica.nl/public_html/game/script.js

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const playButton = document.getElementById("playButton");
const gameCanvas = document.getElementById("myCanvas");
const restartButton = document.getElementById("restartButton");
const exitButton = document.getElementById("exitButton");

let playerXScore = parseInt(getCookie("playerXScore")) || 0;
let playerOScore = parseInt(getCookie("playerOScore")) || 0;

let currentPlayer = "X";
const board = ["", "", "", "", "", "", "", "", ""];
let gameActive = false;
function drawTitle() {
  ctx.fillStyle = "black";
  ctx.font = "35px Impact, Charcoal, sans-serif, cursive";
  ctx.textAlign = "center";
  ctx.fillText("Tic Tac toe", canvas.width / 2, 70);
}

function drawExistingText() {
  ctx.fillStyle = "black";
  ctx.font = "24px Arial";
  ctx.fillText("Welcome to the Game!", 220, 150);
}
function addNewText() {
  ctx.fillStyle = "#757575";
  ctx.font = "20px Arial";
  ctx.fillText("Enjoy the game", 230, 190);
}
function startGame() {
  currentPlayer = Math.random() < 0.5 ? "X" : "O";
  ctx.fillStyle = "rgb(243, 237, 237)";
  ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
  drawBoard();
  drawScoreboard();
  drawTurn();
  gameActive = true;
  playButton.style.display = "none";
  restartButton.style.display = "block";
  exitButton.style.display = "block";
}
function drawBoard() {
  ctx.strokeStyle = "black";
  ctx.lineWidth = 2;
  const canvasCenterX = canvas.width / 2;
  const canvasCenterY = canvas.height / 2;
  const boardWidth = 300;
  const boardHeight = 300;
  const boardStartX = canvasCenterX - boardWidth / 2;
  const boardStartY = canvasCenterY - boardHeight / 2;

  ctx.beginPath();
  ctx.moveTo(boardStartX, boardStartY + 100);
  ctx.lineTo(boardStartX + boardWidth, boardStartY + 100);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(boardStartX, boardStartY + 200);
  ctx.lineTo(boardStartX + boardWidth, boardStartY + 200);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(boardStartX + 100, boardStartY);
  ctx.lineTo(boardStartX + 100, boardStartY + boardHeight);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(boardStartX + 200, boardStartY);
  ctx.lineTo(boardStartX + 200, boardStartY + boardHeight);
  ctx.stroke();
}
function drawMarker(cellIndex) {
  ctx.fillStyle = currentPlayer === "X" ? "grey" : "black";
  ctx.font = "70px Arial";
  ctx.textAlign = "center";
  ctx.fillText(
    currentPlayer,
    getCellX(cellIndex) + 50,
    getCellY(cellIndex) + 80
  );
}
function placeMarker(cellIndex) {
  if (!gameActive || board[cellIndex] !== "") return;

  board[cellIndex] = currentPlayer;
  drawMarker(cellIndex);
  checkWinner();
  togglePlayer();
  drawTurn();

}
function togglePlayer() {
  currentPlayer = currentPlayer === "X" ? "O" : "X";
}
function checkWinner() {
  const winningCombinations = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8],
    [0, 3, 6], [1, 4, 7], [2, 5, 8],
    [0, 4, 8], [2, 4, 6]
  ];

  for (let i = 0; i < winningCombinations.length; i++) {
    const [a, b, c] = winningCombinations[i];
    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
      setTimeout(() => {
        alert(`${board[a]} wins!`);
        updateScores(board[a]);
        drawScoreboard();
        restartGame();
      }, 500);
      return;
    }
  }

  if (!board.includes("")) {
    setTimeout(() => {
      alert("It's a draw!");
      restartGame();
    }, 500);
  }
}
function getCellX(cellIndex) {
  const canvasCenterX = gameCanvas.width / 2;
  const boardStartX = canvasCenterX - 150;
  return boardStartX + (cellIndex % 3) * 100;
}
function getCellY(cellIndex) {
  const canvasCenterY = gameCanvas.height / 2;
  const boardStartY = canvasCenterY - 150;
  return boardStartY + Math.floor(cellIndex / 3) * 100;
}
function restartGame() {
  currentPlayer = "X";
  board.fill("");
  gameActive = true;
  ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
  drawScoreboard();
  startGame();
}

function drawScoreboard() {
  ctx.fillStyle = "rgb(243, 237, 237)";
  ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
  drawBoard();
  ctx.fillStyle = "black";
  ctx.font = "24px Arial";
  ctx.textAlign = "center";
  ctx.fillText(`Player X: ${playerXScore}`, canvas.width / 2 - 80, 50);
  ctx.fillText(`Player O: ${playerOScore}`, canvas.width / 2 + 80, 50);
}

function drawTurn() {
  ctx.fillStyle = "rgb(243, 237, 237)";
  ctx.fillRect(canvas.width / 2 - 50, 60, 100, 30);
  ctx.fillStyle = "black";
  ctx.font = "20px Arial";
  ctx.textAlign = "center";
  ctx.fillText(`Turn: ${currentPlayer}`, canvas.width / 2, 90);
}
function updateScores(winner) {
  if (winner === "X") {
    playerXScore++;
  } else if (winner === "O") {
    playerOScore++;
  }
  setCookie("playerXScore", playerXScore);
  setCookie("playerOScore", playerOScore);
}
function setCookie(name, value) {
  document.cookie = `${name}=${value}`;
}
function getCookie(name) {
  const cookieValue = document.cookie
    .split("; ")
    .find((row) => row.startsWith(`${name}=`))
    ?.split("=")[1];
  return cookieValue;
}

gameCanvas.addEventListener("click", function (event) {
  const mouseX = event.clientX - gameCanvas.getBoundingClientRect().left;
  const mouseY = event.clientY - gameCanvas.getBoundingClientRect().top;

  const column = Math.floor((mouseX - getCellX(0)) / 100);
  const row = Math.floor((mouseY - getCellY(0)) / 100);
  if (column >= 0 && column < 3 && row >= 0 && row < 3) {
    const cellIndex = row * 3 + column;
    placeMarker(cellIndex);
  }
});

playButton.addEventListener("click", startGame);
restartButton.addEventListener("click", restartGame);
exitButton.addEventListener("click", function() {
  gameActive = false;
  playButton.style.display = "block";
  restartButton.style.display = "none";
  exitButton.style.display = "none";
  ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
  drawTitle();
  drawExistingText();
  addNewText();
});

drawTitle();
drawExistingText();
addNewText();

🎯 Available Actions