Interactivo 2

by Aijoona

HTML

<div id="container"></div>

CSS

canvas {
    position: absolute;
    top: 0;
    left: 0;
    border: solid 1px #000;
}

JavaScript

var Map = function() {
    this.width = 10 * Map.UNIT;
    this.height = 10 * Map.UNIT;
};

// Unidad minima de medida, cada bloque tendra una unidad (20px)
Map.UNIT = 20;

Map.prototype.fill = function() {
    var ctx, map, seed;

    ctx = this.canvas.getContext('2d');
    map = this.map = [];
    seed = this.seed();    
    
    // Recorremos el array generado
    seed.forEach(function(current, index) {
        var x, y;

        x = (index % 10);
        // Sobre el eje y usamos una densidad menor (1/3)
        y = Math.ceil(index / 3);

        if (current != '0') {
            ctx.fillRect(x * Map.UNIT, y * Map.UNIT, Map.UNIT, Map.UNIT);
            
            // Registramos el obstaculo
            map[y * 10 + x] = true;
        }
    });
};

// Genera un array de 30 posiciones de '1' y '0' que usaremos como mapa
Map.prototype.seed = function() {
    return Math.floor(
        Math.pow(2, Map.UNIT) | (Math.random() * Math.pow(2, Map.UNIT))
    ).toString(2).split('');
};

// Verifica si la coordenada (x, y) es "caminable"
Map.prototype.check = function(x, y) {    
    // Validamos que no se salga por izquierda ni derecha
    if(x > 9|| x < 0) {
        return false;        
    }
    
    // Ni por abajo ni arriba de lo permitido
    if(y > 9|| y < 0) {
        return false;       
    }      
    
    // Luego, nos fijamos que no exista un obstaculo en dicha
    // posicion
    return !this.map[y * 10 + x];
};

Map.prototype.renderTo = function(container) {
    this.canvas = $('<canvas/>')
        .attr('width', this.width)
        .attr('height', this.height).get(0);
    
    // Rellenamos el mapa con obstaculos
    this.fill();

    $(container).append(this.canvas);
};

//-----------------------------------------------------------------------------
var Char = function(map) {
    this.map = map;
    this.width = 10 * Map.UNIT;
    this.height = 10 * Map.UNIT;

    this.x = 9;
    this.y = 9;
};

// Nuestra funcion que dibuja el...