1
\$\begingroup\$

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?

\$\endgroup\$
  • \$\begingroup\$ Are you looking to rotate the actual canvas element, or the contents inside of it? Rotating the canvas itself sounds a little crazy (in a good way). \$\endgroup\$ – Fault Mar 16 '14 at 18:47
  • \$\begingroup\$ Rotating the canvas seems like a possible way to do it. If you rotate the canvas one way and counter actively rotate the character the same amount in the opposite direction, he should stay still and everything will spin around him. I just don't know how to program it in JavaScript. \$\endgroup\$ – Blooker Mar 16 '14 at 18:49
  • \$\begingroup\$ Are you essentually asking how to rotate around a given point? You can control that by translating by that amount before rotating, then translating back. All of your questions are good, but would you mind if we split this into multiple questions? \$\endgroup\$ – Anko Mar 16 '14 at 18:54
  • \$\begingroup\$ Sure, okay. I'll fix this one question at a time. Regarding your solution, I understand the numbers behind it, but I have no idea how to program it into my code. \$\endgroup\$ – Blooker Mar 16 '14 at 19:14
  • 1
    \$\begingroup\$ I think right now, the code given hasn't really isolated the issue. There's a bunch of extra things in there that probably aren't needed to show the problem you're having. It'd be easier to answer that way, and you might even solve it on your own if you try it. \$\endgroup\$ – awsumpwner27 Mar 16 '14 at 20:50
1
\$\begingroup\$

The context has two functions relevant to this. There's context.rotate(angle) which you already know about, and then there's context.translate(x,y). Here's a fiddle for it.

http://jsfiddle.net/awsumpwner27/k7CVw/

I also used context.save() and context.restore() which store the state of the context for convenience.

\$\endgroup\$
  • \$\begingroup\$ I tried doing this with an image, but the image didn't appear. I spelled the image source correctly and used the correct syntax, but nothing happened. \$\endgroup\$ – Blooker Mar 16 '14 at 20:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.