Tile Map Editor

by Raul Bojalil

HTML

<div id="debug"></div>
<input id="is-obstacle" type="checkbox"  /> Is obstacle
<canvas id="dest_canvas" style="border: 1px solid red"></canvas>
<canvas id="canvas" style="border: 1px solid blue"></canvas>
<img style="display: none" id="img" width="220" height="277" src="https://www.w3schools.com/graphics/pic_the_scream.jpg" alt="The Scream">

JavaScript

var DEST_CANVAS_SIZE = 300;
var CANVAS_SIZE = 300;

var DEST_TILE_SIZE = 32;
var TILE_SIZE = 16;

var canvas = document.getElementById('canvas');
var destCanvas = document.getElementById('dest_canvas');

var ctx = canvas.getContext('2d');
var destCtx = destCanvas.getContext('2d');

var debug = document.getElementById("debug");
var img = document.getElementById("img");

var x = 0;
var y = 0;

var destX = 0;
var destY = 0;

var map = window.localStorage.getItem("map") ? JSON.parse(window.localStorage.getItem("map")) : [];

canvas.width = CANVAS_SIZE;
canvas.height = CANVAS_SIZE;

destCanvas.width = DEST_CANVAS_SIZE;
destCanvas.height = DEST_CANVAS_SIZE;            

window.addEventListener("mousemove", (e) => {

  var destRect = destCanvas.getBoundingClientRect();
  destX = e.clientX - destRect.left;
  destY = e.clientY - destRect.top;

  debug.innerHTML = JSON.stringify(map.find(m => m.dx == positionToIndex(destX, DEST_TILE_SIZE) && m.dy == positionToIndex(destY, DEST_TILE_SIZE))); 

});

window.addEventListener("click", (e) => {

  var rect = canvas.getBoundingClientRect();
  var destRect = destCanvas.getBoundingClientRect();

  if (e.clientX > destRect.x 
      && e.clientX - destRect.left < destRect.width 
      && e.clientY - destRect.top < destRect.height
      && e.clientY > destRect.y) {
    destX = e.clientX - destRect.left;
    destY = e.clientY - destRect.top;

    addTile();
    debug.innerHTML = JSON.stringify(map.find(m => m.dx == positionToIndex(destX, DEST_TILE_SIZE) && m.dy == positionToIndex(destY, DEST_TILE_SIZE))); 
  }

  if (e.clientX > rect.x 
      && e.clientX - rect.left < rect.width 
      && e.clientY - rect.top < rect.height
      && e.clientY > rect.y) {
    x = e.clientX - rect.left;
    y = e.clientY - rect.top;
  }
});


function drawTile(tileX, tileY, x, y) {
  destCtx.drawImage(img, 
                    tileX * TILE_SIZE, tileY * TILE_SIZE, 
                    TILE_SIZE, TILE_SIZE, 
                    x * DEST_TILE_SIZE, y *...