Part 3: Creating Movement and Time by HTML5

Welcome back gamemakerlab! Do you know how to create movement of objects and setup play time? Today, Gamemakerlab will guide to make it easily. We do step by steps including 6steps to complete this mission.

Step 1: Create new function to group written codes.

Previously, we had many different source codes. At the result, to optimize and make code being simple, we will create a new function in order to group all of source code.

functiondrawEverything(){

console.log(“called drawEverything”);

CanvasContext.fillStyle= ‘red’;

canvasContext.fillRect(0,0,canvas.width,canvas.height);

canvasContext.fillStyle=’blue’;

canvasContext.fillRect(225,210,200,200);

CanvasContext.fillStyle = “white”;

CanvasContext.fillRect(canvas.width/2,200,50,25)

}

In the < script > tag, you shoud add the drawEverything function as the below image. Don’t forget to press combination keys “Ctrl + S” .After that refreshing to review written code.

Step 2: Recall Command

Recall command to create movement of object

drawEverything ();

drawEverything ();

drawEverything ();

Step 3: Using variable to change position of rectangle

In this step, we will use variable as varBallX, setVarBallX = 50;

changecanvas.width/2 toBallX, we will have a command including:

CanvasContext.fillRect(BallX,200,50,25)

Press “ctrl+S” to save code.

functiondrawEverything() {

BallX = BallX +20;

console.log(BallX);

CanvasContext.fillStyle= ‘red’;

canvasContext.fillRect(0,0,canvas.width,canvas.height);

canvasContext.fillStyle=’blue’;

canvasContext.fillRect(225,210,200,200);

CanvasContext.fillStyle = “white”;

CanvasContext.fillRect(canvas.width/2,200,50,25)

}

Step 4: Show movement following play time (simple moving effect)

You can create movement by changing coordinates of object as BallX = BallX +20;

To do that we will setup time to change.

< scrip t>

Window.onload = function()  {

canvas = document.getElementById('gameCanvas');

                canvasContext=canvas.getContext(‘2d’);

SetInterval (drawEverything, 1000);

Untill now, we should delete thepart of code which is not necessary as below code:

drawEverything ();

drawEverything ();

drawEverything ();

Saving edited code and reloading to recheck, the white rectangle will be automatically moved

As same as above guides, you can change coordinates and resize

Step 5: Adjust value to make smoother movement

To change movement of object, we have 2 options including:

+Set interval time

Instead of this, we will set up like as below:

SetInterval (drawEverything, 50); (each 1/20s, the object will be changed moment)

+ Resize and change coordinates of object.

Initially, we set up it as: BallX = BallX +20, in oder to make smooth movement of object, we will change command as below:

BallX = BallX +5, It depends on users.

+edit the rectangle being red rectangleby this code:

canvasContext.fillStyle = 'red';

canvasContext.fillRect(ballX,100,10,10);

This is the final code:

 

This is the result image