doodlejump.js

// board
let board;
let boardWidth = 360;
let boardHeight = 576;
let context;
let fps = 60;
let leftBtn;
let rightBtn;
let resetBtn;

// doodler
let doodlerWidth = 46;
let doodlerHeight = 46;
let doodlerX = boardWidth / 2 - doodlerWidth / 2;
let doodlerY = boardHeight * (7 / 8) - doodlerHeight;
let doodlerLeftImage;
let doodlerRightImage;

let doodler = {
  img: null,
  x: doodlerX,
  y: doodlerY,
  width: doodlerWidth,
  height: doodlerHeight,
};

// physics
let velocityX = 0;
let velocityY = 0; // doodler jump speed
let initialVelocityY = -8; // starting velocity Y
let gravity = 0.4;

// platforms
let platformArray = [];
let platformWidth = 60;
let platformHeight = 18;
let platformImg;

// score
let score = 0;
let maxScore = 0;
let gameOver = false;

window.onload = function () {
  // draw the board
  board = document.getElementById("board");
  board.height = boardHeight;
  board.width = boardWidth;
  context = board.getContext("2d");
  leftBtn = document.getElementById("left");
  rightBtn = document.getElementById("right");
  resetBtn = document.getElementById("reset");
  // draw the doodler
  /*
  context.fillStyle = "green";
  context.fillRect(doodler.x, doodler.y, doodler.width, doodler.height);
  */

  //load images
  doodlerRightImage = new Image();
  doodlerRightImage.src = "doodler-right.png";
  doodler.img = doodlerRightImage;
  doodlerRightImage.onload = function () {
    context.drawImage(
      doodler.img,
      doodler.x,
      doodler.y,
      doodler.width,
      doodler.height
    );
  };

  doodlerLeftImage = new Image();
  doodlerLeftImage.src = "doodler-left.png";

  platformImg = new Image();
  platformImg.src = "platform.png";

  velocityY = initialVelocityY;
  placePlatforms();

  setInterval(update, 1000 / fps);
  document.addEventListener("keydown", moveDoodler);
  leftBtn.onclick = function () {
    velocityX = -4;
    doodler.img = doodlerLeftImage;
  };
  rightBtn.onclick = function () {
    velocityX = 4;
    doodler.img = doodlerRightImage;
  };
  resetBtn.onclick = function () {
    if (gameOver) {
      doodler = {
        img: doodlerRightImage,
        x: doodlerX,
        y: doodlerY,
        width: doodlerWidth,
        height: doodlerHeight,
      };
      velocityX = 0;
      velocityY = initialVelocityY;
      score = 0;
      maxScore = 0;
      gameOver = false;
      placePlatforms();
    }
  };
};
function update() {
  if (gameOver) {
    return;
  }

  context.clearRect(0, 0, board.width, board.height);

  // doodler
  doodler.x += velocityX;
  if (doodler.x > boardWidth) {
    doodler.x = 0;
  } else if (doodler.x + doodler.width < 0) {
    doodler.x = boardWidth;
  }
  context.drawImage(
    doodler.img,
    doodler.x,
    doodler.y,
    doodler.width,
    doodler.height
  );
  velocityY += gravity;
  doodler.y += velocityY;
  if (doodler.y - 20 > board.height) {
    gameOver = true;
  }
  // platform
  for (let i = 0; i < platformArray.length; i++) {
    let platform = platformArray[i];
    if (velocityY < 0 && doodler.y < boardHeight * (3 / 4)) {
      platform.y -= initialVelocityY; // slide platform down
    }
    if (detectCollision(doodler, platform) && velocityY >= 0) {
      velocityY = initialVelocityY; // jump
    }
    context.drawImage(
      platform.img,
      platform.x,
      platform.y,
      platform.width,
      platform.height
    );
  }
  // create platforms and add new ones

  while (platformArray.length > 0 && platformArray[0].y >= boardHeight) {
    platformArray.shift(); // remove first element form the array
    newPlatform(); // replace first element with new one to create new platform
  }

  // score
  updateScore();
  context.fillStyle = "black";
  context.font = "16px sans-serif";
  context.fillText(score, 5, 20);
  if (gameOver) {
    context.fillText(
      "Game Over: Press 'Space' to Restart",
      boardWidth / 7,
      (boardHeight * 7) / 8
    );
  }
}

function moveDoodler(e) {
  if (e.code == "ArrowRight" || e.code == "KeyD") {
    velocityX = 4;
    doodler.img = doodlerRightImage;
  } else if (e.code == "ArrowLeft" || e.code == "KeyA") {
    velocityX = -4;
    doodler.img = doodlerLeftImage;
  } else if (e.code == "Space" && gameOver) {
    // reset
    doodler = {
      img: doodlerRightImage,
      x: doodlerX,
      y: doodlerY,
      width: doodlerWidth,
      height: doodlerHeight,
    };
    velocityX = 0;
    velocityY = initialVelocityY;
    score = 0;
    maxScore = 0;
    gameOver = false;
    placePlatforms();
  }
}
function placePlatforms() {
  platformArray = [];

  //starting platform
  let platform = {
    img: platformImg,
    x: boardWidth / 2,
    y: boardHeight - 75,
    width: platformWidth,
    height: platformHeight,
  };
  platformArray.push(platform);

  // platform = {
  //   img: platformImg,
  //   x: boardWidth / 2,
  //   y: boardHeight - 150,
  //   width: platformWidth,
  //   height: platformHeight,
  // };
  // platformArray.push(platform);
  for (let i = 0; i < 6; i++) {
    let randomX = Math.floor((Math.random() * boardWidth * 3) / 4);
    let platform = {
      img: platformImg,
      x: randomX,
      y: boardHeight - 75 * i - 170,
      width: platformWidth,
      height: platformHeight,
    };
    platformArray.push(platform);
  }
}
function newPlatform() {
  let randomX = Math.floor(Math.random() * boardWidth * (3 / 4));
  let platform = {
    img: platformImg,
    x: randomX,
    y: -platformHeight,
    width: platformWidth,
    height: platformHeight,
  };
  platformArray.push(platform);
}

function detectCollision(a, b) {
  return (
    a.x < b.x + b.width &&
    a.x + a.width > b.x &&
    a.y < b.y + b.height &&
    a.y + a.height > b.y
  );
}
function updateScore() {
  let points = Math.floor(50 * Math.random());
  if (velocityY < 0) {
    // negative going up
    maxScore += points;
    if (score < maxScore) {
      score = maxScore;
    }
  } else if (velocityY >= 0) {
    maxScore -= points;
  }
}