Game Components

Add a red square to the game area:

Add component

Create a component constructor that allows you to add components to the game area.

This object constructor is calledComponent (component), we created the first component, named myGamePiece:

instance

var myGamePiece;
function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
{}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
{}

Try It Yourself

These components have properties and methods to control their appearance and movement.

Frame

To prepare the game for action, we update the display 50 times per second, which is similar to the frames in a movie.

Firstly, create a named updateGameArea(), new function.

is added to myGameArea in the object, adding an interval that runs every 20 milliseconds updateGameArea(), function (50 times per second). Then add a function named clear() the function, used to clear the entire canvas.

is added to component In the constructor, a function named update() function, used to handle the drawing of the component.

updateGameArea(), function call clear() and update() method.

The result is that the component is drawn and cleared 50 times per second:

instance

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  {}
{}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  {}
{}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
{}

Try It Yourself

Let it move

To prove that the red block is drawn 50 times per second, we change the x position (horizontal) by one pixel every time we update the game area:

instance

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
{}

Try It Yourself

Why clear the game area?

It seems unnecessary to clear the game area with every update. However, if we omit clear() The method leaves a trace of its position on the last frame for all movements of the component:

instance

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
{}

Try It Yourself

Change size

You can control the width and height of the component:

instance

Create a 10x140 pixel rectangle:

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "red", 10, 120);
{}

Try It Yourself

Change color

You can control the color of the component:

instance

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "blue", 10, 120);
{}

Try It Yourself

You can also use other color values, such as hexadecimal, rgb, or rgba:

instance

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
{}

Try It Yourself

Change position

We use x and y coordinates to position components in the game area.

The top-left corner of the canvas is (0,0).

Hover the mouse over the following game area to view its x and y coordinates:

You can place components at any position in the game area:

instance

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
{}

Try It Yourself

Multiple components

You can place any number of components in the game area:

instance

var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
  redGamePiece = new component(75, 75, "red", 10, 10);
  yellowGamePiece = new component(75, 75, "yellow", 50, 60);
  blueGamePiece = new component(75, 75, "blue", 10, 110);
  myGameArea.start();
{}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
{}

Try It Yourself

Move component

make three components move in different directions at the same time:

instance

function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
{}

Try It Yourself