This is the last part of the “Snake in CreateJS Tutorial”. Here you can check the other ones: Part 1 and Part 2.

In this part, we are going to implement a scoring system and add new views – main menu and game over.

The code can be found in the repository: Repository.

Implementation of score

The score is a really simple thing. You just need to add the points every time when the snake eats food and draw a new score on the screen.

So, let’s add a score field to World class:

// source/objects/World.js

export class World {
  constructor(stage) {
    this.stage = stage;
    this.score = 0;

    ...
  }

  ...
}

And increase it by 10 every time when the snake eats food:

// source/objects/World.js

export class World {
  render() {
    ...

    if (this.checkFoodCollision()) {
      this.score += 10;

      this.snake.grow();
      this.food.generateRandomPosition();
      this.drawFood();
    }

    ...
  }
}

This is the second part of the “Snake in CreateJS Tutorial”. Here you can check the first one: Part 1.

In this part of the tutorial, we are going to implement collisions between the snake and borders, the snake with food, and the snake’s self-collision. We are also going to implement a food generation and snake growing system.

The code can be found in the repository: Repository.

Snake limited by the game borders

In order to check the collision between the snake and borders we need to check if the position of the snake is higher or lower than canvas dimensions:

// source/objects/World.js

export class World {
  ...

  checkBordersCollision() {
    return (
      this.snake.head.x > CONFIG.canvasWidth ||
      this.snake.head.x < 0 ||
      this.snake.head.y > CONFIG.canvasHeight ||
      this.snake.head.y < 0
    );
  }

  checkSnakeCollision() {
    return this.checkBordersCollision();
  }

  render() {
    this.stage.update();

    if (this.isPaused) {
      return;
    }

    if (!this.checkSnakeCollision()) {
      this.snake.move();
      this.drawSnake();
    } else {
      this.snake.stop();
      document.removeEventListener("keydown", this.handleKeydown.bind(this));
    }
  }
}

Hello

The snake is a really simple game that depends on moving a Snake and eating a food. Moving is restricted by a game borders and food position is randomly generated, so the player needs to move from one position to other having longer snake (each time he eats the food).

We are going to use the CreateJS library and it’s boilerplate that I’ve shown here: https://frontendgamedev.com/createjs-in-5-minutes/.

If you have any troubles with the CreateJS itself, I suggest you check the https://createjs.com/ site.

The code can be found in the repository: https://github.com/szymkab/frontendgamedev-snake.

So… let’s start.

Preparation of repository

In order to start working on the game, we need to clone the repository and run setup commands. I’ve described that process in the article mentioned above, so make sure you have done it and we can start.

Rendering a snake in a game world

Firstly, open the app.js file and remove the objects (graphics and text) that are added (line 25 to 38). Instead of sample code we are going to create a World class that will be responsible for rendering and controlling user input.

Create a World.js file in source/objects directory with class World:

// source/objects/World.js

export class World {
  constructor(stage) {
    this.stage = stage;
  }
}