Canvas Game Engine

by Robodude

JavaScript

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);


var gameTime = 0;
var lastTime = Date.now();
var isGameOver = false;



var data = [
    [1,1,1,1,1],
    [1,0,0,0,1],
    [1,0,0,0,1],
    [1,0,0,0,1],
    [1,0,0,0,1],
    [1,1,1,1,1]
];

var walls = [];

function makeWall(x,y){
    return {
        x: x,
        y: y,
        w: 10,
        h: 10
    };
}

data.forEach(function(row, r){
    
    row.forEach(function(item, c){
 
        if (item === 1)
        {
            walls.push(makeWall(c * 10 + 0.5, r * 10 + 0.5));
        }
        
    });
});

function main() {
    var now = Date.now();
    var dt = (now - lastTime) / 1000.0;

    update(dt);
    render();

    lastTime = now;
    requestAnimationFrame(main);
};

function collides(x, y, r, b, x2, y2, r2, b2) {
    return !(r <= x2 || x > r2 ||
             b <= y2 || y > b2);
}

function boxCollides(pos, size, pos2, size2) {
    return collides(pos[0], pos[1],
                    pos[0] + size[0], pos[1] + size[1],
                    pos2[0], pos2[1],
                    pos2[0] + size2[0], pos2[1] + size2[1]);
}

function render() {
    //ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    canvas.width = canvas.width;
    // Render the player if the game isn't over
    if(!isGameOver) {
        //renderEntity();
    }

    renderEntities(walls);
    //renderEntities(enemies);
    //renderEntities(explosions);
};

function renderEntity(entity){
    ctx.save();
    ctx.strokeStyle = "#000000";
    ctx.rect(entity.x,entity.y,entity.w,entity.h);
    ctx.stroke();    
    ctx.restore();
}

function renderEntities(entities){
    for(var i=0; i<entities.length; i++) {
        renderEntity(entities[i]);
    }   
}

function update(dt) {
    gameTime += dt;
    
    //handleInput(dt);
    //updateEntities(dt);

    //checkCollisions();
};



main();