untitled.js

var game = {
    isRunning: false,
    ticks: 60
};
var arena = {
    width: 480,
    height: 320     // might be useful
};
var backgroundLayer1 = {
    posY: 0
};
var backgroundLayer2 = {
    posY: 0
};                              // ever heard of classes? yeah, me neither
var ship = {
    posX: 0,
    posY: 0,
    width: 16,
    height: 16,     // just in case I ever change my mind
    hitpoints: 10,
    dir: "up",
    spritePosX: 0,  // I didn't have to do this when I was still using <div>s; I'm not sure whether I need to do this now
    spritePosY: 0
};

// sprite sources
var spriteShip = new Image();
spriteShip.src = "..\/assets\/ship.png";    // I hope this works, otherwise html5canvastutorials.com is going to feel my wrath

// /*setting up*/ initiating <canvas>, or something
var c, ctx;

// pretty important, yep
document.addEventListener('DOMContentLoaded', init, false);

function init() {
    // _now_ setting up <canvas>
    c = document.getElementById('arena');
    ctx = c.getContext("2d");
    // key thingy
    document.onkeydown = function(event) {
        // how convenient that I can just copy and paste this everywhere
        if (!game.isRunning) {
            // enter key
            if (event.keyCode === 13) {
                event.preventDefault();
                // starting game
                game.isRunning = true;
                tick();
                render();
            }
        }
        // left arrow key
        if (event.keyCode === 37) {
            event.preventDefault();
            // möp
        }
        // up arrow key
        if (event.keyCode === 38) {
            event.preventDefault();
            // möp
        }
        // right arrow key
        if (event.keyCode === 39) {
            event.preventDefault();
            // möp
        }
        // down arrow key
        if (event.keyCode === 40) {
            event.preventDefault();
            // möp
        }
    }
}
function tick() {
    // everything calculate-y happens here
    window.setTimeout(tick, 1000/game.ticks);
}
function render() {
    // clearing <canvas> for next animation frame
    ctx.clearRect(0, 0, arena.width, arena.height);
    // everything render-y happens here
    renderShip();       // test, test
    // calling next animation frame
    window.requestAnimationFrame(render);
}
function renderShip() {
    // this looks horrible, but it's just for testing, so it's fine I guess
    spriteShip.onload = function() {
        ctx.drawImage(spriteShip, ship.spritePosX * 16, ship.spritePosY * 16, ship.width, ship.height, ship.posX, ship.posY, ship.width, ship.height);
    }
}