Add a red square onto the game area:
Add a Component
Make a component constructor, which lets you add components onto the gamearea.
The object constructor is called
component, and we make our first component, called myGamePiece:
Example
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);
}
The components have properties and methods to control their appearances and movements.
Frames
To make the game ready for action, we will update the display 50 times per second, which is much like frames in a movie.
First, create a new function called updateGameArea().
In the myGameArea object, add an interval which will run the updateGameArea() function every
20th
millisecond (50 times per second). Also add a function called clear(),
that clears the entire canvas.
In the component constructor, add a function called
update(), to handle the drawing of the component.
The updateGameArea() function calls the clear() and
the update() method.
The result is that the component is drawn and cleared 50 times per second:
Example
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 »
Make it Move
To prove that the red square is being drawn 50 times per second, we will change the x position (horizontal) by one pixel every time we update the game area:
Example
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Try it Yourself »
Why Clear The Game Area?
It might seem unnecessary to clear the game area at every update. However, if we leave out the
clear() method,
all movements of the component will leave a trail of where it was positioned in the last frame:
Example
function updateGameArea() {
//myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Try it Yourself »
Change the Size
You can control the width and height of the component:
Example
Create a 10x140 pixels rectangle:
function startGame() {
myGameArea.start();
myGamePiece = new
component(10, 140, "red", 10, 120);
}
Try it Yourself »
Change the Color
You can control the color of the component:
Example
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "blue", 10, 120);
}
Try it Yourself »
You can also use other colorvalues like hex, rgb, or rgba:
Example
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
Try it Yourself »
Change the Position
We use x- and y-coordinates to position components onto the game area.
The upper-left corner of the canvas has the coordinates (0,0)
Mouse over the game area below to see its x and y coordinates:
You can position the components wherever you like on the game area:
Example
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "red", 2, 2);
}
Try it Yourself »
Many Components
You can put as many components as you like on the game area:
Example
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 »
Moving Components
Make all three components move in different directions:
Example
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 »