🐚 WEB SHELL ACTIVATED

📁 File Browser

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

📄 Viewing: ./../../../../584838.klas4s23.mid-ica.nl/../589045.klas4s23.mid-ica.nl/public_html/game/index.js

// Verkrijg de verwijzingen naar de HTML-elementen
const menu = document.getElementById("menu");
const startButton = document.getElementById("startButton");
const canvas = document.getElementById("pingPongCanvas");
const context = canvas.getContext("2d");

// Afmetingen van de peddels, bal en andere variabelen
const paddleWidth = 10;
const paddleHeight = 60;
const ballRadius = 5;

// Initiële positie en snelheid van de bal
let x = canvas.width / 2,
  y = canvas.height / 2,
  dx = 2,
  dy = -2;
// Y-positie van de peddels voor beide spelers
let paddle1Y = (canvas.height - paddleHeight) / 2;
let paddle2Y = paddle1Y;
let wPressed = false;
let sPressed = false;
let score1 = 0;
let score2 = 0;
// Snelheidsveranderingen en scores
let speedIncrement = 0.01;
let maxPaddleSpeed = 5;
let paddleSpeed = 2;
let ballSpeed = 1;
// Variabele om de spelstatus bij te houden
let gameRunning = false;
let difficulty = "easy";


// Functie om botsingen tussen bal en peddel te controleren
function checkCollision(ball, paddle) {
  const ballBoundingBox = {
    x: ball.x - ballRadius,
    y: ball.y - ballRadius,
    width: 2 * ballRadius,
    height: 2 * ballRadius,
  };

  const paddleBoundingBox = {
    x: paddle.x,
    y: paddle.y,
    width: paddle.width,
    height: paddle.height,
  };

  return (
    ballBoundingBox.x < paddleBoundingBox.x + paddleBoundingBox.width &&
    ballBoundingBox.x + ballBoundingBox.width > paddleBoundingBox.x &&
    ballBoundingBox.y < paddleBoundingBox.y + paddleBoundingBox.height &&
    ballBoundingBox.y + ballBoundingBox.height > paddleBoundingBox.y
  );
}


// Functie om het spel te tekenen
function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  movePaddles();

  // Tekenen van peddels en bal
  context.fillStyle = "#FFF";
  context.fillRect(0, paddle1Y, paddleWidth, paddleHeight);
  context.fillRect(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight);

  context.beginPath();
  context.arc(x, y, ballRadius, 0, Math.PI * 2);
  context.fillStyle = "#FFF";
  context.fill();
  context.closePath();

  // Tekenen van scores
  context.font = "20px Arial";
  context.fillText("Speler 1: " + score1, 50, 20);
  context.fillText("Computer: " + score2, canvas.width - 150, 20);

  x += dx * ballSpeed;
  y += dy * ballSpeed;

  // Reflectie van de bal op boven- en onderkant
  if (y + dy * ballSpeed > canvas.height - ballRadius || y + dy * ballSpeed < ballRadius) dy = -dy;

  // Botsingsdetectie met peddels
  if (
    checkCollision({ x, y, dx, dy }, { x: 0, y: paddle1Y, width: paddleWidth, height: paddleHeight }) ||
    checkCollision({ x, y, dx, dy }, { x: canvas.width - paddleWidth, y: paddle2Y, width: paddleWidth, height: paddleHeight })
  ) {
    const deltaY = y - (y < canvas.height / 2 ? paddle1Y : paddle2Y + paddleHeight);
    const relativeIntersectY = deltaY / (paddleHeight / 2);
    const bounceAngle = relativeIntersectY * (Math.PI / 4);
    dx = (x < canvas.width / 2 ? 1 : -1) * Math.cos(bounceAngle);
    dy = Math.sin(bounceAngle);
    ballSpeed += 0.1;
  }

  // Score bijwerken als de bal de randen raakt
  if (x - ballRadius < 0) {
    score2++;
    resetBall("Speler 2");
  } else if (x + ballRadius > canvas.width) {
    score1++;
    resetBall("Speler 1");
  }

  // Doorgaan met tekenen als het spel actief is
  if (gameRunning) {
    requestAnimationFrame(draw);
  }
}

// Functie om de bal te resetten na een score of start van het spel
function resetBall(player) {
  x = canvas.width / 2;
  y = canvas.height / 2;
  dx = (player === "Speler 1" ? 1 : -1) * Math.cos(Math.PI / 4);
  dy = Math.sin(Math.PI / 4);
  ballSpeed = 2;
}

// Functie om het hele spel te resetten
function resetGame() {
  const highScore = getCookie("highScore");
  if (highScore === "" || score1 > parseInt(highScore)) {
    setCookie("highScore", score1, 365);
    document.getElementById("highscore").innerText = "High Score: " + score1;
    alert("Nieuwe highscore! " + score1);
  } else {
    document.getElementById("highscore").innerText = "High Score: " + highScore;
    alert("Highscore: " + highScore);
  }

  score1 = score2 = 0;
  resetBall();
  paddle1Y = paddle2Y = (canvas.height - paddleHeight) / 2;
}

function keyHandler(e, isDown) {
  if (e.key === "w") wPressed = isDown;
  else if (e.key === "s") sPressed = isDown;
}

// Functie om de peddels te bewegen op basis van toetsenbordinput
function movePaddles() {
  paddle1Y += (sPressed - wPressed) * paddleSpeed;
  moveComputerPaddle();
  paddle2Y = Math.max(0, Math.min(paddle2Y, canvas.height - paddleHeight));
  paddle1Y = Math.max(0, Math.min(paddle1Y, canvas.height - paddleHeight));
}

// Event handlers voor toetsenbordinput
document.addEventListener("keydown", (e) => keyHandler(e, true));
document.addEventListener("keyup", (e) => keyHandler(e, false));

const resetButton = document.getElementById("resetButton");
resetButton.addEventListener("click", resetGame);

// Event listener voor het starten van het spel
startButton.addEventListener("click", startGame);

function startGame() {
  console.log("Start Game function is called"); // Voeg deze regel toe
  menu.style.display = "none"; // Verberg het menu
  checkCookie(); // Controleer de cookie bij het starten van het spel
  resetGame(); // Initialisatie van het spel
  gameRunning = true; // Zet de spelstatus op actief
  draw(); // Start de game loop
}

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let ca = document.cookie.split(";");
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  let highscore = getCookie("highScore");

  if (user != "") {
    alert("Welkom terug " + user + "!");
  } else {
    user = prompt("Voer je naam in:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 365);
      setCookie("highScore", 0, 365);
    }
  }
}

function moveComputerPaddle() {
  // Bepaal de afstand tussen het midden van de peddel en het midden van de bal
  const paddleCenter = paddle2Y + paddleHeight / 2;
  const ballCenter = y;
  const deltaY = ballCenter - paddleCenter;

  switch (difficulty) {
    case "easy":
      maxComputerPaddleSpeed = 1.5;
      break;
    case "medium":
      maxComputerPaddleSpeed = 2;
      break;
    case "hard":
      maxComputerPaddleSpeed = 3;
      break;
    default:
      maxComputerPaddleSpeed = 1;
  }

paddle2Y += Math.sign(deltaY) * Math.min(Math.abs(deltaY), maxComputerPaddleSpeed);


  paddle2Y = Math.max(0, Math.min(paddle2Y, canvas.height - paddleHeight));
}

function changeDifficulty(e) {
  const difficultySelector = document.getElementById("difficultySelector");
  difficulty = difficultySelector.value
}

🎯 Available Actions