Chicken Crossing

About

Chicken Crossing is a classic game of Frogger. Using the arrow keys, player can help the chicken across the road.

Controls

Arrow Keys: UP, Down, Left, Right - navigate the chicken
N - start / restart

Game

Used JavaScript for game logic and HTML5 Canvas to render animations.

  document.addEventListener('DOMContentLoaded', () => {
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');

      new Game(ctx).loadingScreen();
  });

Each car is an object that generated by feeding in x position, speed, image extracted randomly from a pool called CARS and y position from a pool called LANES.

CARS = [
  [{ x: 50, speed: 0.5, img: 'assets/right.png'}, {x: 130, speed: 0.5, img: 'assets/right.png'}, {x: 210, speed: 0.5, img: 'assets/right.png'}, {x: 350, speed: 0.5, img: 'assets/right.png'}],

  [{ x: 130, speed: -1, img: 'assets/left.png'},{x: 210, speed: -1, img: 'assets/left.png'}, {x: 290, speed: -1, img: 'assets/left.png'}, {x: 500, speed: -1, img: 'assets/left.png'}],

  [{ x: -80, speed: 0.5, img: 'assets/right.png'},{x: 0, speed: 0.5, img: 'assets/right.png'}, {x: 250, speed: 0.5, img: 'assets/right.png'}, {x: 340, speed: 0.5, img: 'assets/right.png'}],

  [{ x: 70, speed: 1, img: 'assets/right.png'},{x: 250, speed:1, img: 'assets/right.png'}, {x: 420, speed: 1, img: 'assets/right.png'}],

  [{ x: 0, speed: -0.5, img: 'assets/left.png'},{x: 80, speed: -0.5, img: 'assets/left.png'}, {x: 300, speed: -0.5, img: 'assets/left.png'}],

  [{ x: 130, speed: -0.5, img: 'assets/left.png'},{x: 210, speed: -0.5, img: 'assets/left.png'}, {x: 400, speed: -0.5, img: 'assets/left.png'}],

];

LANES = [380, 300, 225, 150, 70];

Using canvas requestAnimationFrame we then able to render each object movement smoothly at 60fps.

  start() {
    this.draw(this.ctx);
    if(this.chicken.isCollideWith(this.cars)){
      this.lives -= 1;
      this.relocateChicken();
    }
    if(this.gameOver()){
      this.stopAnimation(this.animationID);
      this.endGame(this.ctx);
    }else {
      this.animationID = requestAnimationFrame(this.start.bind(this));
    }
  }

Before each animation frame we will need to check the isCollideWith condition / checkPass condition. Then update each object's position by calling each object's move() function.

  draw(ctx) {
    this.checkPass(ctx);
    ctx.clearRect(0, 0, 500, 500);
    Util.background(ctx);
    this.drawLevel(ctx);
    this.drawLives(ctx);
    this.cars.forEach( car => {
      car.draw(ctx);
    });
    this.chicken.draw(ctx);
  }

Difficulty

Game difficulty and car speed increases as the player help the chicken successfully across the road.

The current game level is displayed at the top left corner of the screen.
As well as the lives of the chicken is also displayed on the top right corner

Future direction for the project