🐚 WEB SHELL ACTIVATED

📁 File Browser

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

📄 Viewing: ./../../../../586648.klas4s23.mid-ica.nl/public_html/Gamecraft/leoniespel/scriptlevel2.js

window.addEventListener("keydown", function (e) {
    if (["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(e.code) > -1) {
      e.preventDefault();
    }
  }, false);
  
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const img1 = new Image();
  img1.src = "../leoniespel/img/katstaan.png";
  const img2 = new Image();
  img2.src = "../leoniespel/img/octo4.png";
  const img3 = new Image();
  img3.src = "../leoniespel/img/pinkmetal.png";
  const img4 = new Image();
  img4.src = "../leoniespel/img/bluemetal.png";
  
  
  let startTime;
  let interValId;
  let millis;
  let seconds;
  let seconds_string = "0";
  let score = getCookie("highScoreLevel2");
  console.log('my cookie score is ' + score);
  
  
  canvas.width = 1000;
  canvas.height = 600;
  
  let time;
  let prevTime = Date.now();
  let offset = 0;
  let gravity = 0.004;
  let deltaTime = 0;
  let jumpSpeed = -1;
  
  class Main {
    constructor() {
    }
  
  
    newPos() {
      this.gravitySpeed += this.gravity;
      this.x += this.speedX;
  
      this.gravitySpeed1 += this.gravity1;
      this.x1 += this.speedX1;
    }
  
    update() {
      time = Date.now();
      deltaTime = time - prevTime;
      prevTime = Date.now();
    }
  }
  
  
  
  class player {
    constructor(movementLeftKey, movementRightKey, movementUpKey, x, y, width, height, img) {
      this.isGrounded = true;
      this.upKey = false;
      this.rightKey = false;
      this.leftKey = false;
      this.x = x;
      this.y = y;
      this.w = width;
      this.h = height;
      this.speedX = 0;
      this.speedY = 0;
      this.dx = 0;
      this.dy = 0;
      this.keyl = movementLeftKey;
      this.keyr = movementRightKey;
      this.keyu = movementUpKey;
      this.img = img;
  
      let keyEvent = (e) => {
        if (e.code == this.keyu) { this.upKey = e.type == 'keydown' };
        if (e.code == this.keyr) { this.rightKey = e.type == 'keydown' };
        if (e.code == this.keyl) { this.leftKey = e.type == 'keydown' };
        if (e.code == "KeyR") { window.location.href = "../leoniespelpage/leoniepage.html" };
        //if (e.code == "KeyF") {window.location.href = "./level2.html"}
        if (e.code == "KeyQ") { window.location.href = "../leoniespel/homepage.html" };
        if (e.code == "KeyT") {window.location.href = "../leoniespelpage/leoniepage2.html"};
      };
  
      addEventListener('keydown', keyEvent);
      addEventListener('keyup', keyEvent);
    }
  
    update() {
      if (this.isGrounded == true) {
        this.speedY = 0;
      }
      this.draw();
  
      if (this.y + this.h >= canvas.height) {
        this.y = canvas.height - this.h;
        this.isGrounded = true;
      }
  
      if (this.upKey && this.isGrounded) {
        this.speedY = jumpSpeed;
        this.isGrounded = false;
      }
  
      // Apply gravity and movement
      if (this.isGrounded == false) {
        this.y += this.speedY * deltaTime;
        this.y += gravity * deltaTime;
        this.speedY += gravity * deltaTime;
      }
  
  
  
      if (this.rightKey) { this.dx += 0.5; }
      if (this.leftKey) { this.dx -= 0.5; }
  
      this.x += this.dx;
      this.y += this.dy;
      this.dx *= 0.9;
      this.dy *= 0.9;
  
      // Prevent player from going out of bounds
      if (this.x <= 0) {
        this.x = 0;
      }
  
      if (this.y <= 0) {
        this.y = 0;
      }
  
      if (this.x > 950) {
        this.x = 950;
      }
  
  
    }
  
  
    draw() {
      ctx.beginPath();
      ctx.fillStyle = 'white';
      //ctx.rect(this.x, this.y, this.w, this.h);
      //ctx.fill();
      ctx.drawImage(this.img, this.x, this.y, this.w, this.h);
      ctx.closePath();
    }
  
    resolveCollision(platform) {
      // Check if colliding with the platform
      const playerBottom = this.y + this.h;
      const playerTop = this.y;
      const playerRight = this.x + this.w;
      const playerLeft = this.x;
  
      const platformTop = platform.y;
      const platformBottom = platform.y + platform.height;
      const platformLeft = platform.x;
      const platformRight = platform.x + platform.width;
  
      if (playerRight > platformLeft &&
        playerLeft < platformRight &&
        playerBottom > platformTop &&
        playerTop < platformBottom) {
  
  
  
        const fromTop = playerBottom - platformTop;
        const fromBottom = platformBottom - playerTop;
        const fromLeft = playerRight - platformLeft;
        const fromRight = platformRight - playerLeft;
  
        // Determine the collision side
        const minCollision = Math.min(fromTop, fromBottom, fromLeft, fromRight);
  
        // elk van deze collisions betekent dat je ergens een overlap hebt. Nu, passen wij de x, y van de speler aan.
        // wil je colliden met een powerup, of een exit. Dan doe je niet die this.y = platformTop - this.h; maar iets anders.
        if (minCollision === fromTop) {
          // Colliding from the top
          this.y = platformTop - this.h;
          //this.speedY = 0;
  
          this.isGrounded = true;
          return true;
        } else if (minCollision === fromBottom) {
          // Colliding from the bottom
          this.y = platformBottom;
          //this.speedY = 0;
        } else if (minCollision === fromLeft) {
          // Colliding from the left
          this.x = platformLeft - this.w;
          this.dx = 0;
        } else if (minCollision === fromRight) {
          // Colliding from the right
          this.x = platformRight;
          this.dx = 0;
        }
  
      }
      return false;
    }
  }
  
  class finishPlatform {
    constructor(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    }
  
    draw() {
      ctx.beginPath();
      ctx.fillStyle = '#9998d5';
      ctx.rect(this.x, this.y, this.width, this.height);
      ctx.fill();
      ctx.closePath();
    }
  
  
  
    get bottom() {
      return this.y + this.height;
    }
  
    get left() {
      return this.x;
    }
  
    get right() {
      return this.x + this.width;
    }
  
    get top() {
      return this.y;
    }
  
  }
  
  class platformPink {
    constructor(x, y, width, height,img) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.img = img;
    }
  
    draw() {
      ctx.beginPath();
      ctx.fillStyle = '#d367d1';
      ctx.rect(this.x, this.y, this.width, this.height);
      //ctx.fill();
      ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
      
      ctx.closePath();
    }
  
    get bottom() {
      return this.y + this.height;
    }
  
    get left() {
      return this.x;
    }
  
    get right() {
      return this.x + this.width;
    }
  
    get top() {
      return this.y;
    }
  
  }
  
  
  
  
  
  class platformBlue {
    constructor(x, y, width, height, img) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.img = img;
    }
  
    draw() {
      ctx.beginPath();
      ctx.fillStyle = '#60c6d8';
      ctx.rect(this.x, this.y, this.width, this.height);
      ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
      //ctx.fill();
      ctx.closePath();
    }
  
    get bottom() {
      return this.y + this.height;
    }
  
    get left() {
      return this.x;
    }
  
    get right() {
      return this.x + this.width;
    }
  
    get top() {
      return this.y;
    }
  
  
  }
  
  let main1 = new Main()
  let play1 = new player("KeyA", "KeyD", "KeyW", 450, 550, 50, 50, img1);
  let play2 = new player("ArrowLeft", "ArrowRight", "ArrowUp", 500, 550, 50, 50, img2);
  
  //blue platforms
  
  let platform2 = new platformBlue(0, 500, 135, 50,img4);
  let platform3 = new platformBlue(250,410,160,50,img4);
  let platform4 = new platformBlue(100, 300, 100, 50,img4);
  let platform5 = new platformBlue(300, 170, 150, 50,img4);
  let platform6 = new platformBlue(100, 190, 130, 50,img4);
  let platform7 = new platformBlue(0, 300, 80, 50,img4);
  let platform8 = new platformBlue(240, 50, 80, 50,img4);
  let finishPlatform1 = new finishPlatform(0, 50, 100, 1);
  //pink platforms
  let platform9 = new platformPink(610,50,250,50, img3);
  let platform10 = new platformPink(510, 500, 160, 50,img3);
  let platform11 = new platformPink(700, 400, 100, 50,img3);
  let platform12 = new platformPink(900, 300, 100, 50,img3);
  let platform13 = new platformPink(510, 250, 200, 50,img3);
  let platform14 = new platformPink(750, 170, 100, 50,img3);
  let platform15 = new platformPink(510,150,70,50,img3);
  let platform16 = new finishPlatform(500, 0, 10, 1000);
  let finishPlatform2 = new finishPlatform(660, 50, 100, 1);
  
  let platforms = []; // dit is een lijstje
  platforms.push(new platformBlue(0, 50, 135, 50,img4)); // dit voeg een platform toe aan het lijstje
  platforms.push(platform2);
  platforms.push(platform3);
  platforms.push(platform4);
  platforms.push(platform5);
  platforms.push(platform6);
  platforms.push(platform7);
  platforms.push(platform8);
 //level 2
  platforms.push(platform9);
  platforms.push(platform10);
  platforms.push(platform11);
  platforms.push(platform12);
  platforms.push(platform13);
  platforms.push(platform14);
  platforms.push(platform15);
  platforms.push(platform16);
  platforms.push(finishPlatform1);
  platforms.push(finishPlatform2);
  
  
  
  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    main1.update();
    collision = false;
    platforms.forEach(platform => {
      platform.draw();
      if (play1.resolveCollision(platform)) { collision = true; }
      if (play2.resolveCollision(platform)) { collision = true; }
  
    });
    if (collision == false) {
      play1.isGrounded = false;
      play2.isGrounded = false;
    }
    play1.update();
    play2.update();
    ctx.font = "50px Arial";
  
    ctx.fillText(seconds_string + ":" + millis, 415, 50);
  
    if (play1.resolveCollision(finishPlatform1)) {
      WinMessagePlayer1();
      stopStopWatch(); // Optional: Stop the stopwatch
    //   saveHighScore(seconds + ":" + millis);
      return; // Stop animation
    }
  
  
    if (play2.resolveCollision(finishPlatform2)) {
      WinMessagePlayer2();
      stopStopWatch(); // Optional: Stop the stopwatch
    //   saveHighScore(seconds + ":" + millis);
      return;
      // Stop animation
    }
  
    requestAnimationFrame(animate)
  }
  
  
  animate()
  
  function WinMessagePlayer1() {
    ctx.fillStyle = "#9998d5";
  ctx.fillRect(350, 170, 300, 220);

  ctx.fillStyle = "white";
  ctx.font = "40px Ariel";

  ctx.textAlign = "center";
  ctx.fillText("Player 1 won!", 500, 220, 300, 300);
  
  ctx.font = "20px Ariel";
  ctx.fillText(`highscore: ${bestScore} seconds`, 500, 250, 300, 500);
  ctx.fillText(`Your time is: ${seconds + "." + millis} seconds`, 500, 280, 300, 300);
  ctx.fillText("Press R to restart level 1", 500, 310, 300, 300);
  ctx.fillText("Press T to restart level 2", 500, 340, 300, 300);
  //ctx.fillText("Press Q to go back to homepage", 500, 370, 300, 300);
  }

  let bestScore = getCookie('highScoreLevel2');

  function WinMessagePlayer2() {
    ctx.fillStyle = "#9998d5";
    ctx.fillRect(350, 170, 300, 220);
  
    ctx.fillStyle = "white";
    ctx.font = "40px Ariel";
  
    ctx.textAlign = "center";
    ctx.fillText("Player 2 won!", 500, 220, 300, 300);
    
    ctx.font = "20px Ariel";
    ctx.fillText(`highscore: ${bestScore} seconds`, 500, 250, 300, 500);
    ctx.fillText(`Your time is: ${seconds + "." + millis} seconds`, 500, 280, 300, 300);
    ctx.fillText("Press R to restart level 1", 500, 310, 300, 300);
    ctx.fillText("Press T to restart level 2", 500, 340, 300, 300);
    //ctx.fillText("Press Q to go back to homepage", 500, 370, 300, 300);
  
  }
  
  function startStopWatch() {
    startTime = new Date().getTime();
    if (!interValId) {
      interValId = setInterval(stopwatch, 100);
    }
  }
  
 
  
  function stopwatch() {
    let currentTime = new Date().getTime();
    let elapsedTime = currentTime - startTime;
    seconds = Math.floor(elapsedTime / 1000);
    millis = elapsedTime % 1000;

    if(seconds < 10){
        seconds_string = "00" + seconds.toString();
      }else if(seconds < 100){
        seconds_string = "0" + seconds.toString();
      } else {
        seconds_string = seconds.toString();
      }
  
  }
  
  startStopWatch();
  
  function saveHighScore(score) {
    document.cookie = `highScoreLevel2=${score}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
  }
  
  function getCookie(cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for (let i = 0; i < ca.length; i++) {
      let c = ca[i].trim(); // Remove spaces
      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }
    return ""; // Return empty if cookie not found
  }
  
  function stopStopWatch() {
    clearInterval(interValId);
    interValId = null;
  
    // Calculate elapsed time in milliseconds
    let currentTime = new Date().getTime();
    let elapsedTime = (currentTime - startTime) / 1000;
  
    // Get the best score from cookies
    let bestScore = getCookie('highScoreLevel2');
    bestScore = bestScore ? parseFloat(bestScore) : null;

    console.log(elapsedTime);
    console.log(bestScore);
  
    // Update the best score if the new time is better
    if (bestScore === null || elapsedTime < bestScore) {
      saveHighScore(elapsedTime); // Save the new best score
      console.log("New best score saved:", elapsedTime, "ms");
    } else {
      console.log("Current run:", elapsedTime, "s. Best score remains:", bestScore, "s");
    }
  }

  
  

🎯 Available Actions