HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Add a red square onto the game area
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
:
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.
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:
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();
}
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:
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
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:
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
You can control the width and height of the component:
Create a 10x140 pixels rectangle:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
You can control the color of the component:
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
You can also use other colorvalues like hex, rgb, or rgba:
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
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:
X
You can position the components wherever you like on the game area:
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
You can put as many components as you like on the game area:
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();
}
Make all three components move in different directions:
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();
}