Search code examples
htmlcanvashtml5-canvas

I followed a tutorial, but why does a simple if-statement not work?

I am new to HTML and JS in general so I am currently lost on what I did wrong. I followed a tutorial by Chris Courses on Youtube (link: https://www.youtube.com/watch?v=4q2vvZn5aoo) until 1:27:13. The line of code was:

  if (player.position.y > canvas.width){
    console.log("you lose");
  };

It worked perfectly for him, but I am not getting any console log nor any errors.

I tweaked a little bit of the code in order to fit the project that I need so I don't know if that's where I went wrong. Here is my whole index.js:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

//adjust canvas width/height to take full screen
canvas.width= 1680;
canvas.height= 945;

//img function to easily import images
function img(file){
    const image = new Image();
    image.src = 'sprites/' +file;
    return image;
}

//declaring images
  const platformImg = img('platform.png');
  const bg1 = img('bg1.png');
  const bg2 = img('bg2.png');
  const bg3 = img('bg3.png');
  const bg4 = img('bg4.png');
  const bg5 = img('bg5.png');

//Declaring variables
const gravity = 0.5; //Global Gravity
var firstSplash = 1;
var lastSplash = 210;
var splash = new Image;
var timer = setInterval( function(){
  if (firstSplash>lastSplash){
    clearInterval( timer );
  }else{
    splash.src = "./sprites/Splash/splash("+( firstSplash++ )+").jpg";
  }
}, 1000/30 ); //Draw at 30 frames per second



class Player {
  constructor(){ // Player Position/Width/Height
    this.position = {
      x: 100,
      y: 100
    }
    this.velocity = {  // Player Gravity
      x: 0,
      y: 0
    }

    this.width = 30;
    this.height = 30;
  }

  // Make Player Visible
  draw(){
    ctx.fillStyle = 'red';
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height)
  }

  update(){ 
    this.draw();
    this.position.x += this.velocity.x;
    this.position.y += this.velocity.y;
    
    
    // Gravity to Player
    if (this.position.y + this.height +  this.velocity.y <= canvas.height)
      this.velocity.y += gravity;
  }
}

class Platform {
  constructor({x, y, image}) {
    this.position = {
      x,
      y
    }

    this.width = 600
    this.height = 180
    this.image = image
  }

  draw() {
    ctx.drawImage(this.image, this.position.x, this.position.y)
  }
}

class Decoration {
  constructor({x, y, image}) {
    this.position = {
      x,
      y
    }

    this.width = 16800
    this.height = 945
    this.image = image
  }

  draw() {
    ctx.drawImage(this.image, this.position.x, this.position.y)
  }
}

//Declaring variables
let player = new Player();
let platforms = [new Platform({
  x: -1,
  y: 800,
  image: platformImg
}),
  new Platform({
    x: 600 -1,
    y: 800,
    image: platformImg
  })]
let decorations = [
  new Decoration({
    x:0,
    y:0,
    image: bg1
  }),
  bg2Deco = new Decoration({
    x:0,
    y:0,
    image: bg2
  }),
  bg3Deco = new Decoration({
    x:0,
    y:0,
    image: bg3
  }),
  bg4Deco = new Decoration({
    x:0,
    y:0,
    image: bg4
  }),
  bg5Deco = new Decoration({
    x:0,
    y:0,
    image: bg5
  })
]
const keys = {
  right:{
    pressed: false
  },
  left:{
    pressed: false
  }
}

//Levels
let level = 1
let levels = {
  1: {
    init: () => {
      player = new Player();
      platforms = [new Platform({
        x: -1,
        y: 800,
        image: platformImg
      }),
      Platform({
        x: 600 -1,
        y: 800,
        image: platformImg
      })]
      decorations = [
        new Decoration({
          x:0,
          y:0,
          image: bg1
        }),
        bg2Deco = new Decoration({
          x:0,
          y:0,
          image: bg2
        }),
        bg3Deco = new Decoration({
          x:0,
          y:0,
          image: bg3
        }),
        bg4Deco = new Decoration({
          x:0,
          y:0,
          image: bg4
        }),
        bg5Deco = new Decoration({
          x:0,
          y:0,
          image: bg5
        })
      ]
    }
  }
}


// function drawSplash(){
//   splash.onload = function(){
//     ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
//     ctx.drawImage(splash, 0, 0, ctx.canvas.width, ctx.canvas.height);
//   };
// }


function gameStart(){
    ctx.fillStyle = 'black'
    ctx.fillRect(0,0,canvas.width, canvas.height)
    document.getElementById("btnStart").remove();
    player.draw();
    animate();
}


function animate(){ // Animate
  requestAnimationFrame(animate);
  ctx.fillStyle = 'white';
  ctx.fillRect(0,0,canvas.width, canvas.height)
 
  decorations.forEach(Decoration =>{
    Decoration.draw();
  });

  platforms.forEach(platform =>{
    platform.draw();
  });

  player.update();

  // Hold left/right for moving player
  if (keys.right.pressed && player.position.x < 400){
    player.velocity.x = 5
  } else if (keys.left.pressed && player.position.x > 100) {
    player.velocity.x = -5
  } else {
    player.velocity.x = 0
  
    if (keys.right.pressed){
      platforms.forEach(platform =>{
        platform.position.x -=5 
      });
      bg2Deco.position.x -= 3;
      bg3Deco.position.x -= 4;
      bg4Deco.position.x -= 5;
      bg5Deco.position.x -= 6;
    } else if (keys.left.pressed){
      platforms.forEach(platform =>{
        platform.position.x +=5 
      });
      bg2Deco.position.x += 3;
      bg3Deco.position.x += 4;
      bg4Deco.position.x += 5;
      bg5Deco.position.x += 6;
    }
  }

  // Platform detection for player
  platforms.forEach(platform =>{
  if (player.position.y + player.height <= platform.position.y && player.position.y + player.height + player.velocity.y >= platform.position.y && player.position.x + player.width >= platform.position.x && player.position.x <= platform.position.x + platform.width) {
    player.velocity.y = 0;
  }
  });
}

//lose condition
  if (player.position.y > canvas.width){
    console.log("you lose");
  };

document.body.addEventListener('keydown', keyDown);
document.body.addEventListener('keyup', keyUp);

function keyDown(event){
    if(event.code == "ArrowUp"){
        if(event.repeat){return}
        else player.velocity.y -= 10;
    }

    if(event.code == "ArrowLeft"){
      keys.left.pressed = true;
    }

    if(event.code == "ArrowRight"){
      keys.right.pressed = true;
    }
}

function keyUp(event){
  if(event.code == "ArrowUp"){
      player.velocity.y -= 10;
  }

  if(event.code == "ArrowLeft"){
    keys.left.pressed = false;
  }

  if(event.code == "ArrowRight"){
    keys.right.pressed = false;
  }
}
player.draw();
animate();
//drawSplash();

I feel like I'm being an idiot and missing something trivial. Any help is appreciated! Thank you!

Solution

  • It was confirmed that the function did not work properly.

    The "you loose" if statement was outside.

    Check yours animate function indent plz.

    
function animate() { // Animate
    requestAnimationFrame(animate);
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    decorations.forEach(Decoration => {
        Decoration.draw();
    });

    platforms.forEach(platform => {
        platform.draw();
    });

    player.update();

    // Hold left/right for moving player
    if (keys.right.pressed && player.position.x < 400) {
        player.velocity.x = 5
    } else if (keys.left.pressed && player.position.x > 100) {
        player.velocity.x = -5
    } else {
        player.velocity.x = 0

        if (keys.right.pressed) {
            platforms.forEach(platform => {
                platform.position.x -= 5
            });
            bg2Deco.position.x -= 3;
            bg3Deco.position.x -= 4;
            bg4Deco.position.x -= 5;
            bg5Deco.position.x -= 6;
        } else if (keys.left.pressed) {
            platforms.forEach(platform => {
                platform.position.x += 5
            });
            bg2Deco.position.x += 3;
            bg3Deco.position.x += 4;
            bg4Deco.position.x += 5;
            bg5Deco.position.x += 6;
        }
    }

    // Platform detection for player
    platforms.forEach(platform => {
        if (player.position.y + player.height <= platform.position.y && player.position.y + player.height + player.velocity.y >= platform.position.y && player.position.x + player.width >= platform.position.x && player.position.x <= platform.position.x + platform.width) {
            player.velocity.y = 0;
        }
    });

    //lose condition
    // Check here.
    if (player.position.y > canvas.width) {
        console.log("you lose");
    }
}