Add a square rectangle to the canvas
Step 1: Create a canvas like tutorial 1
Step 2: Create a method create_component(x, y, width, height, color) with 4 parametters.
function create_component(x, y, width, height, color) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
context = gameRoom.context; // gameRoom is the variable of the canvas we created in tutorial 1
context.fillStyle = color;
context.fillRect(this.x, this.y, this.width, this.height);
}
Step 3: Create 2D box to the canvas by using this command
x2dcube = new create_component(10,10,50,50,”black”); // create a black box with width x height : 50 x 50 pixel and place it at x,y: 10,10 position
Step 4: Run the web page and see we will have the black box inside the canvas
Step 5: Get back to the code and create 3 more boxes and place them at the top-right, bottom-right and bottom-left of the canvas with different colors.
Step 6: Run the game again and if you see 4 boxes with different colors at 4 corners of the canvas, you do it well!
Step 7: Now, we will make the boxes change color every second following this rule: black to blue, blue to green, green to orange, and orange to black. With this rule, player will feel like the color boxes are moving and replace their positions each second.
Todo that, inside the method create_component, we add an update function and update the code like this
function create_component(x, y, width, height, color) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.color = color;
this.update = function () {
//gameRoom.clear();
context = gameRoom.context; // gameRoom is the variable of the canvas we created in tutorial 1
context.fillStyle = this.color; // remember to set color first
context.fillRect(this.x, this.y, this.width, this.height);
}
}
Step 8: We create a GameRoomUpdate() method to update the game room every second ( change the color of the boxes). Each time we change the color, we use method update() of the component we create in step 7
function GameRoomUpdate() {
//console.log("dodo");
var tmp = x2dcube.color; // first color will store to the end
x2dcube.color = x2dcube_top_right.color;
x2dcube.update();
x2dcube_top_right.color = x2dcube_bottom_right.color;
x2dcube_top_right.update();
x2dcube_bottom_right.color = x2dcube_bottom_left.color;
x2dcube_bottom_right.update();
x2dcube_bottom_left.color = tmp;
x2dcube_bottom_left.update();
}
Step 9: To set the game update every second (calling the GameRoomUpdate function every second), we have to change the gameRoom = {}; like those codes below (Using the setInterval of javascript to loop the function every second)
var gameRoom = {
canvas: document.getElementById("gameblock"),
startGame: function () {
this.canvas.width = 300;
this.canvas.height = 300;
this.context = this.canvas.getContext("2d");
this.interval = setInterval(GameRoomUpdate,1000);
},
clear: function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
};
Step 10: Refresh your web page and you will see your game with canvas has 4 boxes changing color each second.