Zenek Chapman

Comp Sci 30

Jan 20 2025

​

Created a platformer with 3 levels, and enemies wil animation for jumping

*/

​

let aPressed = false; //create variable for checking keypress

let spacePressed = false;

let dPressed = false;

​

let startXPos = 20;//set starting x & y positions

let startYPos = 340;

​

let lvl = 1;//start the game at level 1

​

let lvlplatX = [];// vreate platform location arrays to be filled for each level

let lvlplatY = [];

​

var lvl1platX = [15, 75, 115, 115, 275, 350]; //create the x and y coordinates for the platforms on each level

var lvl1platY = [350, 300, 225, 160, 140, 170];

​

​

var lvl2platX = [15, 85, 155, 425, 350, 255, 350];

var lvl2platY = [350, 300, 300, 225, 250, 300, 125];

​

var lvl3platX = [15, 50, 120, 180, 220, 270, 320, 350];

var lvl3platY = [350, 250, 190, 300, 170, 230, 150, 100];

​

​

var lvlEndX;//create a variable to store the x and y values that will end each level

var lvlEndY;

​

var grav = 0.5; //create and set gravity value

​

var ground = 450; //ground height

​

var platforms = []; //create an arrays to hold platform and obstacles objects

var obstacles = [];

​

let jumperSquishTimer = 0;

const squishDuration = 10;

​

let song; //create variable for song

​

let pltCol //create variables to hold the colours of each object

let bkgrc

let ballCol

let grndC

​

let palette1 //create palettes for each level

let palette2

let palette3

​

function preload() {

song = loadSound('Music.mp3') //load the song 

}

​

function setup() {

createCanvas(500, 500); 

palette1 = createPalette()//create the palettes for each level, each based off of a platformer, sonic, luigi, and kirby

  palette1

        .add(color("#55A7B9"))

        .add(color("#2bb800"))

        .add(color("#0f81d8"))

        .add(color("#950305 "))  

palette2 = createPalette()

  palette2

        .add(color("#4cbb17"))

        .add(color("#9cd2de"))

        .add(color("#164141"))

        .add(color("#fd6f02"))

palette3 = createPalette()

  palette3

        .add(color("#df6da9"))

        .add(color("#88e65d"))

        .add(color("#a7beea"))

        .add(color("#eed324"))

  loadLevel(lvl)//load the level when you start

  song.loop()//start playing the song

  document.addEventListener("keydown", keyDownChecker, false);//add an event checker to see in keys are pressed

  document.addEventListener("keyup", keyUpChecker, false); 

}

function draw() {

background(bkgrc);

if (lvl == 1){//add special text for each level

  fill(0)

  textAlign(CENTER)

  textSize(13)

  textFont('Comic Sans MS')

  text("Use a and d to move and space to jump! Reach the last platform to advance!", width/2, 75)

} 

if (lvl == 2){

  fill(0)

  textAlign(CENTER)

  textSize(20)

  text("Now there are bad things, avoid them!", width/2, 50)

}

  if (lvl == 3){

  fill(0)

  textAlign(CENTER)

  textSize(20)

  text("They Move!!?!?!?", width/2, 50)

}

if (spacePressed && jumper.onPlatform == true) {//jump when space is pressed

    jumper.deltaY = -10;

    jumper.onPlatform = false;

    jumper.isLanding = false;

}

if (aPressed == true){//move left and right based on if a or d are pressed

  jumper.x -= jumper.sideSpeed

}

if (dPressed == true){

  jumper.x += jumper.sideSpeed

}

​

if (!jumper.onPlatform){///apply grav is not on platform

    jumper.deltaY += grav;

    jumper.y += jumper.deltaY;

}

  else{//stop moving when on platform

    jumper.deltaY = 0

  }

let hasJumperCollided = false; //for squish animation dont think I used it

let jumperCollisionPoint = jumper.y + jumper.size / 2; //set a varible to check if the jumper is about to hit platform

  for (let i = 0; i < platforms.length; i++) { //check if the jumper is about to hit platform ot hittng platform

​

  if (jumper.x + jumper.size / 2 > platforms[i].x && jumper.x - jumper.size / 2 < platforms[i].x + platforms[i].xSiz) 

  {

​

    let platformHalfYsiz = platforms[i].ySiz * 0.5;

    let platformCenterY = platforms[i].y + platformHalfYsiz;

    let distToPlatform = abs(jumperCollisionPoint - platformCenterY);    

​

    if (distToPlatform <= (platformHalfYsiz + jumper.deltaY)){

      jumper.y = platforms[i].y - jumper.size / 2; 

      jumper.deltaY = 0;

      hasJumperCollided = true;

      jumper.isLanding = true;

      jumperSquishTimer = squishDuration;

      break; 

    }

  }

}

​

jumper.onPlatform = hasJumperCollided;//set it to true if jumper is going to land

​

/*

changed the detection loop to detect if the onhect was going to move past the platform on the next frame, if so, put it on the platform

​

This solution was made by EthanStrawside on the p5js reddit after I had posted the fix question.

https://www.reddit.com/r/p5js/comments/1i3ns12/comment/m7p4d33/?context=3

​

this code was directly made for my code by another dev. It did not change a whole lot so I thought it was fair to use it.

*/ 

  for (let i = 0; i < obstacles.length; i++) {

    let obs = obstacles[i]

    let obsWidth = obs.width; //obstacle's hitbox

    let obsHeight = obs.height

    if (jumper.x + jumper.size / 2 > obs.x && jumper.x - jumper.size / 2 < obs.x + obsWidth && 

        jumper.y + jumper.size / 2 > obs.y && jumper.y - jumper.size / 2 < obs.y + obsHeight) {//check is jumper is touching obstacle

      jumper.x = startXPos;//reset when it does

      jumper.y = startYPos;

      jumper.deltaY = 0;

      jumper.onPlatform = true;

      break;

    }

  }

​

if (jumper.y > ground - jumper.size / 2) {// reset jumper when you hit the ground

    jumper.y = startYPos 

    jumper.x = startXPos 

    jumper.deltaY = 0; 

    jumper.onPlatform = true;

  }

jumper.x = constrain(jumper.x, 0, width);//keep jumper on screen

jumper.y = constrain(jumper.y, 0, height);

  if (jumper.x >= lvlEndX && jumper.x <= lvlEndX + 70 && jumper.y <= lvlEndY && jumper.y >= lvlEndY  - jumper.size) {//change level or end game when the last platform is reached

    lvl++;

    if (lvl > 3) {

      clear()//clear screen and end game if you finish lvl 3

      obstacles = []

      platforms = []

      background(255)

      textSize(70)

      text("You Win!!!", width/2, height/2)

      noLoop()

    } else {

      loadLevel(lvl);//load the next level if you didnt finish level 3

    }

  }

  fill(grndC)//add a shape to represent gound

  rect(0, ground, width, height - ground)

  let jumperXSize = jumper.size; //set variables to stretch jumper

  let jumperYSize = jumper.size;

if (!jumper.onPlatform) {

  jumperYSize = jumper.size * 1.5;  // elongate when jumping

} 

  fill(ballCol);

  ellipse(jumper.x, jumper.y, jumperXSize, jumperYSize);//create jumper with stretches

  for (let platform of platforms) {//draw each platforms with their level colours

    platform.c = (pltCol)

    platform.display();

}

  for (let obs of obstacles) {//display each obstacle

    obs.display();

    if (obs instanceof MovingObstacle) { // Check if the obstacle is a MovingObstacle

        obs.move(); // Call move() only for moving obstacles

    }

  }

}

function loadLevel(level) {// array for loading level

  platforms = [];

  obstacles = [];// make sure platforms amd obstacles arrays are empty

if (level == 1) {//load each level

    lvlplatX = lvl1platX.slice(0);//put x & y values for 

    lvlplatY = lvl1platY.slice(0);

    lvlEndX = lvl1platX[5];//set end level coords

    lvlEndY = lvl1platY[5];

    jumper.y = startYPos; 

    jumper.x = startXPos; //reset jumper

    pltCol = palette1.get(1);//change colours

    bkgrc = palette1.get(2);

    ballCol = palette1.get(0);

    grndC = palette1.get(3);

} 

else if (level == 2) {

    lvlplatX = lvl2platX.slice(0);//put x & y values for 

    lvlplatY = lvl2platY.slice(0);

    lvlEndX = lvl2platX[6];//set end level coords

    lvlEndY = lvl2platY[6]; 

    jumper.y = startYPos; //reset jumper

    jumper.x = startXPos; 

    pltCol = palette2.get(1);//change colours

    bkgrc = palette2.get(2);

    ballCol = palette2.get(0);

    grndC = palette2.get(3);

  }

else if (level == 3) {

    lvlplatX = lvl3platX.slice(0);//put x & y values for 

    lvlplatY = lvl3platY.slice(0);

    lvlEndX = lvl3platX[7];//set end level coords

    lvlEndY = lvl3platY[7] 

    jumper.y = startYPos //reset jumper

    jumper.x = startXPos

    pltCol = palette3.get(1)//change colours

    bkgrc = palette3.get(2)

    ballCol = palette3.get(0)

    grndC = palette3.get(3)

  }

​

  for (let i = 0; i < lvlplatX.length; i++) { //create each platform and obstacle from an array

    let newPlatform = new Platform(color(150,75, 0), lvlplatX[i], lvlplatY[i], 70, 8);

    platforms.push(newPlatform);

  if (level == 2 && i % 2 == 1) {

      let newObstacle = new Obstacle(lvlplatX[i] + 35, lvlplatY[i] - 30); // Position the obstacle on the platform

      obstacles.push(newObstacle);

    }

    if (level == 3) {

      if (i % 2 != 0) {

        let newObstacle = new MovingObstacle(lvlplatX[i] + 35, lvlplatY[i] - 30); // Moving obstacle

        obstacles.push(newObstacle);

      } else {

        let newObstacle = new Obstacle(lvlplatX[i] + 35, lvlplatY[i] - 30); // Stationary obstacle

        obstacles.push(newObstacle);

      }

    }

  }

  jumper.x = startXPos;//start jumper

  jumper.y = startYPos;

}

​

function keyDownChecker(e) {//check if keys are pressed

  if (e.keyCode == 65) { 

    aPressed = true;

  } else if (e.keyCode == 68) { 

    dPressed = true;

  } else if (e.keyCode == 32) { 

    spacePressed = true;

  }

}

​

function keyUpChecker(e) {//check if keys are released

  if (e.keyCode == 65) {  

    aPressed = false;

  } else if (e.keyCode == 68) { 

    dPressed = false;

  } else if (e.keyCode == 32) { 

    spacePressed = false;

  }

}