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.