I've been making a 2D sidescrolling game using JavaScript and HTML. The game is set in space, where the player character can fly around (Up, Down, Left and Right keys) and rotate the world around him (A and D keys). Here is the HTML and JavaScript code:
<body onkeydown="keyDown(event)" onkeyup="keyUp(event)">
<canvas id="graphics" width=600 height=400 style="position:absolute;margin:0 auto;vertical-align:middle;background-image:url('Black.png');"</canvas>
<script>
//VARIABLES
var gameCanvas = document.getElementById("graphics");
var grafx = gameCanvas.getContext("2d");
var player = new GameObject("Character1NoAAInvert.png", 268, 160, 64, 59);
var maxBlock = 5;
var block = new Array();
for (var i = 0; i <= maxBlock; i++) {
block[i] = new GameObject('BlockInvert.png', i * 60 + 100, 300, 62, 62);
}
var img = new Image();
img.src = "Character1NoAAInvert.png";
var isA = false;
var isD = false;
var isUp = false;
var isDown = false;
var isLeft = false;
var isRight = false;
var rotation = 0;
var rotationVelocity = 0;
var canvasCenterX = gameCanvas.width / 2;
var canvasCenterY = gameCanvas.height / 2;
document.body.appendChild(img);
player.Gravity = 20;
player.Weight = 0.4;
//EVENTS
function keyDown(e) {
if (String.fromCharCode(e.keyCode) === "A") isA = true;
if (String.fromCharCode(e.keyCode) === "D") isD = true;
if (String.fromCharCode(e.keyCode) === "&") isUp = true;
if (String.fromCharCode(e.keyCode) === "(") isDown = true;
if (String.fromCharCode(e.keyCode) === "%") isLeft = true;
if (String.fromCharCode(e.keyCode) === "'") isRight = true;
}
function keyUp(e) {
if (String.fromCharCode(e.keyCode) === "A") isA = false;
if (String.fromCharCode(e.keyCode) === "D") isD = false;
if (String.fromCharCode(e.keyCode) === "&") isUp = false;
if (String.fromCharCode(e.keyCode) === "(") isDown = false;
if (String.fromCharCode(e.keyCode) === "%") isLeft = false;
if (String.fromCharCode(e.keyCode) === "'") isRight = false;
}
//MAINLOOP
MainLoop();
function MainLoop() {
//PRE VARIABLE ADJUSTMENTS
for (var i=0;i<=maxBlock;i++) block[i].X += -player.Velocity_X;
for (var i=0;i<=maxBlock;i++) block[i].Y += -player.Velocity_Y;
grafx.rotate(rotation * Math.PI / 7200);
player.Velocity_X = player.Velocity_X * 0.98;
player.Velocity_Y = player.Velocity_Y * 0.98;
player.Rotation -= rotationVelocity;
rotation += rotationVelocity;
rotationVelocity = rotationVelocity * 0.5;
//LOGIC
if (isA) rotationVelocity += 0.1;
if (isD) rotationVelocity += -0.1;
if (!isUp && !isDown) player.Velocity = 0;
if (isUp) player.Velocity_Y += -0.1;
if (isDown) player.Velocity_Y += 0.1;
if (isLeft) player.Velocity_X += -0.1;
if (isRight) player.Velocity_X += 0.1;
//if (player.Velocity_Y < player.Gravity) player.Velocity_Y += player.Weight;
for (var i = 0; i <= maxBlock; i++) {
if (player.isColliding(block[i]) && player.Y + player.Height < block[i].Y + player.Velocity_Y) {
player.Y = block[i].Y - player.Height;
player.Velocity_Y = 0;
}
}
//POST VARIABLE ADJUSTMENTS
//RENDERING
grafx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
grafx.drawImage(player.Sprite, player.X, player.Y);
for (var i = 0; i <= maxBlock; i++) {
grafx.drawImage(block[i].Sprite, block[i].X, block[i].Y);
}
setTimeout(MainLoop, 1000 / 60);
}
function GameObject(img, x, y, width, height) {
this.Sprite = new Image();
this.Sprite.src = img;
this.X = x;
this.Y = y;
this.Previous_X = this.X;
this.Previous_Y = this.Y;
this.Velocity_X = 0;
this.Velocity_Y = 0;
this.Width = width;
this.Height = height;
this.Gravity = 0;
this.Weight = 0;
this.isColliding = function (obj) {
if (this.X > obj.X + obj.Width) return false;
else if (this.X + this.Width < obj.X) return false;
else if (this.Y > obj.Y + obj.Height) return false;
else if (this.Y + this.Height < obj.Y) return false;
else return true;
};
}
</script>
</body>
However, I don't know how to program the canvas to rotate around its center, not the origin (Top Left corner). I know this has been asked and answered before on Stack Overflow, but I found it hard to understand the examples and I couldn't manage to apply them to my code successfully. When the A or D key is pressed, the canvas should rotate clockwise or counter clockwise from its center.
What would be the best way to achieve these things?
