THE WORLD'S LARGEST WEB DEVELOPER SITE

Game Movement

With the new way of drawing components, explained in the Game Rotation chapter, the movements are more flexible.

How to Move Objects?

Add a `speed` property to the `component` constructor, which speaks to the present speed of the component.

Also roll out certain improvements in the `newPos()` strategy, to figure the position of the segment, in light of `speed` and `angle`.

By default, the segments are looking up, and by setting the speed property to 1, the segment will begin moving forward.

Example

function component(width, height, color, x, y) {
this.gamearea = gamearea;
this.width = width;
this.height = height;
this.angle = 0;
this.speed = 1;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
this.newPos = function() {
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}
Try it yourself »

Making Turns

We also want to be able to make left and right turns. Make a new property called `moveAngle`, which indicates the current moving value, or rotation angle. In the `newPos()` method calculate the `angle` based on the `moveAngle` property:

Example

Set the moveangle property to 1, and see what happens:

function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.angle = 0;
this.moveAngle = 1;
this.speed = 1;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
this.newPos = function() {
this.angle += this.moveAngle * Math.PI / 180;
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}
Try it yourself »

Use the Keyboard

How does the red square move when using the keyboard? Instead of moving up and down, and from side to side, the red square moves forward when you use the "up" arrow, and turns left and right when pressing the left and right arrows.

Example

Try it yourself »