Angle movement
- Click on canvas and use keyboard to move tank
// <body onload="startGame()">
var myGamePieceRotating;
var myGamePieceCircle;
var myGamePieceTank;
function startGame() {
myGamePieceRotating = new component(30, 30, "red", 80, 75);
myGamePieceCircle = new component(30, 30, "blue", 100, 150);
myGamePieceTank = new component(30, 30, "../images/tank.png", 200, 200, "image");
myGameArea.start();
}
var myGameArea = {
canvas : document.getElementById("canvas"), // OR document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
// document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
this.canvas.id = "canvas";
this.canvas.setAttribute("tabindex", "1");
document.getElementById("canvas").addEventListener('keydown', function (e) {
e.preventDefault();
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
}, false);
document.getElementById("canvas").addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
}, false);
},
stop : function() { clearInterval(this.interval); },
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
if (this.type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speed = 1;
this.angle = 0;
this.moveAngle = 1;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
if (this.type == "image") {
ctx.drawImage(
this.image,
this.width / -2,
this.height / -2,
this.width,
this.height
);
} else {
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);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePieceRotating.angle += 1 * Math.PI / 180;
myGamePieceRotating.update();
myGamePieceCircle.newPos();
myGamePieceCircle.update();
myGamePieceTank.moveAngle = 0;
myGamePieceTank.speed = 0;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePieceTank.moveAngle = -1; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePieceTank.moveAngle = 1; }
if (myGameArea.keys && myGameArea.keys[38]) {myGamePieceTank.speed= 1; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePieceTank.speed= -1; }
myGamePieceTank.newPos();
myGamePieceTank.update();
}
Back to Main Page