Share a Canvas shooting game that combines object-oriented development and Canvas.

Project description

  • Overview: Canvas shooting mini game requires the player to control the plane to fire bullets and destroy moving monsters. If all of them are destroyed, the game succeeds. If the monsters move to the bottom, the game fails.
  • Goal: To achieve a Cavnas shooting mini game

Project Structure (Src)

  • Index.html: Game page
  • Style. CSS: Page style
  • Index.js: logical entry js for the page
  • Img: Stores images for the game
  • Readme. md: Project description document
  • Controller: Split all objects involved in the page
  • Bullet: The object of the Bullet
  • Element: the base class
  • Enemy: monster class
  • Plane, the Plane class
  • Common: common configuration file directory
  • Gameconfig. js: Game configuration information
  • Keyboard: indicates keyboard events
  • Util: boundary judgment function

Project Demo Address

The following is already implemented shooting game demo address, we can refer to the game development: code demo address

The specific requirements

1. Get through the whole process of the game (start -> Game in progress -> success or failure)

The game can be divided into four states: game ready -> game on -> game success or game failure

1.1. Game preparation

When you open the screen for the first time, you will see a game preparation screen with a game title and description and a start game button.

  • Game title: Designing a Game
  • Game description: this is an addictive shooting game, use ← and → to operate your plane, use space to shoot. Let’s destroy the monsters of the universe!

1.2. The game goes on

  • There is a row of seven monsters at the top and a plane in the middle of the bottom
  • Players can control the plane through the keyboard to move around and fire bullets, bullets encounter monsters monsters are destroyed, destroy all monsters will show the success of the game interface
  • Monsters initially move to the right. When the monster moves to the boundary, it moves down one space and in the opposite direction. And so on until the bottom boundary is reached, the game fails screen is displayed.

1.3 success of the game

The successful elimination of all monsters in each level indicates that the game has passed successfully. You can click “Play again” to return to the game interface

1.4. Game failure

In the game, when the monster successfully breaks through to the vertical position of the plane, the game has failed. You can click “Restart” to return to the game interface

2. Draw games on Canvas

Setting the scene

The size of the playing field is 700 * 600, and the playing field is divided into three parts:

  • The scene margin areaThe green is the margin area, with a margin length of 30
  • Monster movement area: The size of the blue area is 640 x 440
  • Aircraft moving area: The yellow area represents the movement area of the aircraft, and the size is 640 x 100

2.1. Implement game Elements – Aircraft (main character of the game)

The plane element is the hero we need to operate. Here’s what to look for in the plane element:

  • The dimensions of the aircraft are 60 by 100
  • The aircraft must be drawn as an image of the aircraftimg/plane.png
  • The plane element can be moved by the left and right arrow keys of the keyboard. The default step length of the plane is 5, and the plane cannot move out of the above mentionedAircraft moving area

2.2. Implement the game element – airplane bullets

By clicking the space bar, the plane will shoot bullets, and the plane can shoot multiple bullets at the same time. Here are some things to look out for in the bullet element:

  • The bullet is a white vertical line with a length of 10 and a width of 1
  • The bullet’s initial abscissa is right in the middle of the planePlane.x + (plane.width / 2)
  • The initial y-coordinate of the bullet is equal to the y-coordinate of the planeplane.y
  • The bullet will continue to travel forward, and the bullet will travel 10 distances per frame
  • When the bullet element flies out of the canvas, it needs to be deleted
  • When a bullet element collides with a monster element, the bullet element should be removed

2.3. Implement game elements – monsters

There are two states (live and dead) in which monsters move when alive and explode into fireworks when dead. Here are some things to look out for in the monster element:

  • Monster size is 50 by 50
  • There are seven monster elements in a row, with 10 Spaces between each monster
  • When a monster element is alive, draw it as a monster imageimg/enemy.png
  • The monster element moves 2 distance per frame while alive
  • When the monster element on the far right moves toThe area where the monster movesWhen the left and right boundaries are set, the next frame will move down with a distance of 50, as shown in the figure below:


  • When the monster moves over toThe area where the monster movesWhen the bottom boundary is reached, the game ends:


  • When the bullet element collides with the monster element, the monster element is dead and the monster element needs to be drawn as an explosionimg/boom.png(It is recommended to draw 3 frames for the explosion process, i.e. the monster death process lasts 3 frames)
  • After the monster death process is complete, remove the monster element
  • When the monster moves over toThe area where the monster movesWhen the bottom boundary is reached, the game ends

2.4. Achieve game scores

There is a score element in the upper left corner of the game scene. Here are some things to note about the score element:

  • The fraction coordinates are (20,20) and the text size of the fraction is 18px
  • The score defaults to 0, and when a monster is destroyed, the score is increased by 1
  • Scores continue to be added up until the end of the game

Game levels

  • Add levels to the game so that different levels have different difficulty levels (e.g. each level has a row of monsters relative to the previous level)

  • The game can be modified by modifying the configuration (as shown below).

    /** * game related configuration * @type {Object} */
var CONFIG = {
  status: 'start'.// The game starts by default
  level: 1.// Default game level
  totalLevel: 6.// Total 6 levels
  numPerLine: 6.// The game defaults to how many monsters per line
  canvasPadding: 30.// Default canvas spacing
  bulletSize: 10.// Default bullet length
  bulletSpeed: 10.// Default bullet movement speed
  enemySpeed: 2.// Default enemy movement distance
  enemySize: 50.// Default enemy size
  enemyGap: 10.// Default spacing between enemies
  enemyIcon: './img/enemy.png'.// Monster image
  enemyBoomIcon: './img/boom.png'.// The image of the monster dying
  enemyDirection: 'right'.// Default enemy moves to the right at first
  planeSpeed: 5.// Defaults to the distance the aircraft moves per step
  planeSize: {
    width: 60.height: 100
  }, // Default plane size,
  planeIcon: './img/plane.png'};Copy the code