HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
With the new way of drawing components, explained in the Game Rotation chapter, the movements are more flexible
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.
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);
}
}
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:
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);
}
}
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.
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();