Game Movement
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Game Movement
❮ Previous
Next ❯
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 represents the current speed of the component.
Also make some changes in the newPos() method, to calculate the
position of the component, based on speed and angle.
By default, the components are facing up, and by setting the speed
property to 1, the component will start 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 »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
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 theangle 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 »
var myGameArea;
var myGamePiece;
//var myGameArea2;
//var myGamePiece2;
function startGame() {
myGameArea = new gamearea("");
myGamePiece = new component(20, 20, "red", 15, 110);
myGameArea.start();
// myGameArea2 = new gamearea("2");
// myGamePiece2 = new component(myGameArea2, "50px", "Consolas", "red", 100, 15, "text");
// myGamePiece2.text = "u00BB";
// myGameArea2.start();
}
function gamearea(x) {
this.canvas = document.createElement("canvas");
this.canvas.width = 320;
this.canvas.height = 180;
document.getElementById("canvascontainer" + x).innerHTML = "";
document.getElementById("canvascontainer" + x).appendChild(this.canvas);
this.context = this.canvas.getContext("2d");
this.frameNo = 0;
this.start = function() {
this.interval = setInterval(updateGameArea, 20);
}
this.stop = function() {
clearInterval(this.interval);
}
this.clear = function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.speed = 0;
this.angle = 0;
this.moveangle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
width = ctx.measureText(this.text).width;
height = ctx.measureText("m").width
ctx.fillText(this.text, width/ -2, height/2);
} else {
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);
this.angle += this.moveangle
}
}
var rotation;
function updateGameArea(y) {
myGameArea.clear();
myGameArea.frameNo++;
myGamePiece.speed = 1;
if (myGameArea.frameNo == 1) {
rotation = 0;
document.getElementById("playagain").disabled = true;
// document.getElementById("playagain2").disabled = true;
}
rotation++;
if (rotation == 40) {
myGamePiece.moveangle = 1 * Math.PI / 180;
}
if (rotation == 130) {
myGamePiece.moveangle = 0;
}
if (myGameArea.frameNo >= 520) {
myGamePiece.speed = 0;
myGamePiece.moveangle = 0;
document.getElementById("playagain").disabled = false;
// document.getElementById("playagain2").disabled = false;
}
myGamePiece.newPos();
myGamePiece.update();
// myGameArea2.clear();
// myGameArea2.frameNo++;
// myGamePiece2.speed = 1;
// if (rotation == 40) {
// myGamePiece2.moveangle = 1 * Math.PI / 180;
// }
if (rotation == 130) {
// myGamePiece2.moveangle = 0;
rotation = 0;
}
// if (myGameArea2.frameNo >= 520) {
// myGamePiece2.speed = 0;
// myGamePiece2.moveangle = 0;
// }
// myGamePiece2.newPos();
// myGamePiece2.update();
}
function clickPlayagain() {
myGameArea.stop();
// myGameArea2.stop();
startGame();
}
startGame();
❮ Previous
Next ❯
