🐚 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/scriptlevel1.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("highScoreLevel1");
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 = "../leoniespelpage/leoniepage2.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", canvas.width / 4, 550, 50, 50, img1);
let play2 = new player("ArrowLeft", "ArrowRight", "ArrowUp", 500, 550, 50, 50, img2);

//blue platforms
let platform1 = new platformBlue(350, 100, 150, 50, img4);
let platform2 = new platformBlue(0, 400, 220, 50, img4);
let platform3 = new platformBlue(340, 500, 160, 50, img4);
let platform4 = new platformBlue(300, 300, 100, 50, img4);
let platform5 = new platformBlue(30, 230, 150, 50, img4);
let platform6 = new platformBlue(0, 120, 100, 50, img4);
let platform7 = new platformBlue(170, 60, 80, 50, img4);
let finishPlatform1 = new finishPlatform(410, 100, 100, 1);
//pink platforms
let platform8 = new platformPink(510, 100, 150, 50, img3);
let platform9 = new platformPink(510, 500, 160, 50, img3);
let platform10 = new platformPink(750, 400, 100, 50, img3);
let platform11 = new finishPlatform(500, 0, 10, 1000);
let platform12 = new platformPink(900, 300, 100, 50, img3);
let platform13 = new platformPink(550, 250, 200, 50, img3);
let platform14 = new platformPink(800, 120, 100, 50, img3);
let finishPlatform2 = new finishPlatform(490, 100, 100, 1);

let platforms = []; // dit is een lijstje
// platforms level 1
platforms.push(platform1); // 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);
platforms.push(platform9);
platforms.push(platform10);
platforms.push(platform11);
platforms.push(platform12);
platforms.push(platform13);
platforms.push(platform14);
platforms.push(finishPlatform1);
platforms.push(finishPlatform2);
//platforms level 2


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, 200);

  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('highScoreLevel1');

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 stopStopWatch() {
  clearInterval(interValId);
}

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 = `highScoreLevel1=${score}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
}

// Load data from cookies
function getCookie(cookieKey) {
  const cookieData = document.cookie
    .split('; ')
    .find(row => row.startsWith(cookieKey + '='));

  if (cookieData) {
    var data = (cookieData.split('=')[1]);
    console.log(data);
    return data;
  }
};

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('highScoreLevel1');
  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, "ms. Best score remains:", bestScore, "ms");
  }
}

🎯 Available Actions