Roguelike Map Creator

by djwelsh

HTML

<div id="cont">
    <canvas id="canvas-main" width="400" height="400"></canvas>
    <select id="terrain-style">
        <option value="dirt-light">Dirt (light)</option>
        <option value="dirt-dark">Dirt (dark)</option>
        <option value="grass-light">Grass (light)</option>
        <option value="grass-dark">Grass (dark)</option>
        <option value="desert-blank">Desert (blank)</option>
        <option value="desert-water">Desert (water)</option>
        <option value="water-blank">Water (blank)</option>
        <option value="water-grass">Water (grass)</option>
        <option value="canyon-blank">Canyon (blank)</option>
        <option value="lava-blank">Lava (blank)</option>
        <option value="farm-grass">Farm (grass)</option>
    </select>
    <img id="spritesheet"...

CSS

#canvas-main {
    width: 400px;
    height: 400px;
    outline: 1px solid #ccc;
}
img {
    display: none;
}

JavaScript

/*
 Version 1 : Select a style and click a square to cycle through the available textures. Selecting a new style retains the tile objects and merely changes what they paint.
 */
var ctx = document.getElementById('canvas-main').getContext('2d');
var MAP_HEIGHT = 12;
var MAP_WIDTH = 12;
var CELL_SIZE = 32;
var sprite = document.getElementById('spritesheet');


var tiles = [];

currentTerrainStyle = 'dirt-light';

document.getElementById('terrain-style').onchange = function (event) {
    if (!event) event = window.event;
    
    currentTerrainStyle = this.value;
}

$('#canvas-main').click(function (event) {
    var pos = $(this).offset();
    
    var mouseX = event.pageX - pos.left;
    var mouseY = event.pageY - pos.top;
    
    var x = Math.floor(mouseX / 32);
    var y = Math.floor(mouseY / 32);
    
    tiles[y][x].borderColor.a = 1;
    tiles[y][x].type = (tiles[y][x].type + 1) % terrainCycler.length; 
    
});

var terrains = {
    'dirt-light' : { x : 16, y : 3 },
    'dirt-dark' : { x : 19, y : 3 },
    'grass-light' : { x : 22, y : 3 },
    'grass-dark' : { x : 7, y : 27 },
    'desert-blank' : { x : 1, y : 12 },
    'desert-water' : { x : 4, y : 12 },
    'water-blank' : { x : 10, y : 12 },
    'water-grass' : { x : 7, y : 12 },
    'canyon-blank' : { x : 25, y : 3 },
    'lava-blank' : { x : 16, y : 9 },
    'farm-grass' : { x : 6, y : 18 }
};
//relative to the main empty square, where are the other squares? 
var terrainCoords = {
    'empty' : { x : 0, y : 0 },
    'empty-alt-1' : { x : 0, y : 2 },
    'empty-alt-2' : { x : 1, y : 2 },
    'empty-corner-nw' : { x : -1, y : -1 },
    'empty-side-n' : { x : 0, y : -1 },
    'empty-corner-ne' : { x : 1, y : -1 },
    'empty-side-e' : { x : 1, y : 0 },
    'empty-corner-se' : { x : 1, y : 1 },
    'empty-side-s' : { x : 0, y : 1 },
    'empty-corner-sw' : { x : -1, y : 1 },
    'empty-side-w' : { x : -1, y : 0 },
    'empty-single-1' : { x : -1, y : -3 },
    'empty-single-2' : { x : -1, y : -2 },
   ...