Game loop + tile map

by mnk

HTML

<canvas id="stage"></canvas>
<p id="loop">loop</p>
<ul>
    <li id="ballx"></li>
    <li id="bally"></li>
    <li id="speedx"></li>
    <li id="speedy"></li>
</ul>

CSS

body {
    background-color: #888;
}
canvas {
    background-color: #eee;
    float: left;
}
ul {
    margin-left: 20px;
}
ul {
    float: left;
}

JavaScript

var isRunning = true;

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

var mapHasBlock = function(x, y){
    return MAP[y][x] == 1;
};

var MAP_UNITY = 20;
           
var FPS = 60;
var CANVAS_WIDTH = MAP[0].length * MAP_UNITY;
var CANVAS_HEIGHT = MAP.length * MAP_UNITY;

canvas = document.getElementById('stage');
context = canvas.getContext('2d');
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;

var Game = function(){
    var self = this;

    this.user = new User();
    this.userX = 3;
    this.userY = 12;
    
    this.resolveCollisions = function(){
       self.user.checkCollisions();
    };
    this.update = function(){
        self.updateUser(self.speed);
        self.updateEnemies();
    };
    this.draw = function(ctx){
        ctx.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT);
        self.renderMap();
        self.user.draw(ctx);
        
    };
    this.playSound = function(){
        
    };
    this.render = function(ctx){
        self.update();
       ...