一款HTML5 3D块状地图编辑器

tile map editor

h5, editor, map

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3506
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

let selectedTreeElement = undefined;
let selectedTreeItem = undefined;

let inspectorPanel = document.querySelector(".selector");
let inspectorLayerTools = inspectorPanel.querySelector(".layer-tools");
let inspectorGroupTools = inspectorPanel.querySelector(".group-tools");
let inspectorTileSelector = inspectorPanel.querySelector(".tile-selector");
let inspectorBrushSize = inspectorLayerTools.querySelector(".brush-size");
let inputBrushSize = inspectorBrushSize.querySelector("#brush-size");
let tileListElement = inspectorPanel.querySelector(".tile-list");

let itemDetailElement = inspectorPanel.querySelector(".item-details");
let itemDetailTypeIconElement = itemDetailElement.querySelector(".item-type-icon");
let itemDetailNameInputElement = itemDetailElement.querySelector(".item-name");

let mapTreeElement = document.querySelector(".project-item-tree");
let container = document.querySelector(".editor-container");

let windowBackgroundTint = document.querySelector(".window-tint");
let createMapWindow = document.querySelector("#create-map-window");
let loadMapWindow = document.querySelector("#load-map-window");
let loadTilesetWindow = document.querySelector("#load-tilesets-window");
let loadTilesetWindowProgressBarValue = loadTilesetWindow.querySelector(".progress-bar-value");

let backToolName = undefined;
let activeTool = undefined;
let activeToolName = "cursor";
let tools = ["cursor", "brush", "eraser", "move", "fill"];
let isWindowOpen = false;
let isRenamingTreeItem = false;
let zoomIntensity = 0.1;
let brushSize = 1;
let maxBrushSize = 8;
let selectedTilePage = 0;
let selectedTileElement = undefined;
let selectedTile = undefined;
let tilePageCount = 1; // should be the same as tilesets.length
let tilesets = [];
let isLoadingTilesets = true;
let tilesetLoadCount = 0;
let tilesetLoadCompleteCount = 0;
let toastyPlayed = false;
let tilesetPagingForIsoEnabled = false;

class IsometricMapRenderer {
    constructor() {
        this.tileDepth = 80;
        this.renderIndex = 0;
    }
    draw(map) {
        this.renderIndex = 0;
        if (!map) return;

this.drawGrid(map);
        this.drawRecursive(map);
        if (map.hoverVisible) {
            this.drawBrush(map);
        }
    }

drawBrush(map) {
        let mousePoint = this.screenToWorldPoint(map, mouse.x / ctxScaleX, mouse.y / ctxScaleY);
        for (let y = 0; y < brushSize; ++y) {
            for (let x = 0; x < brushSize; ++x) {
                let renderPoint = this.getRenderPoint(mousePoint.x + x, mousePoint.y + y);
                this.drawTileHover(renderPoint.x, renderPoint.y, map.tileWidth, map.tileHeight);
            }
        }
    }

drawRecursive(map, currentLayer) {
        if (typeof currentLayer == "undefined") {
            for (let item of map.children) {
                this.drawRecursive(map, item);
            }
        } else {
            if (currentLayer.visible) {
                if (currentLayer instanceof MapLayerGroup) {
                    for (let item of currentLayer.children) {
                        this.drawRecursive(map, item);
                    }
                } else {
                    this.drawLayer(map, currentLayer);
                }
            }
            this.renderIndex++;
        }
    }

drawGrid(map) {
        let camera = Camera.getMainCamera();
        let tileWidth = map.tileWidth;
        let tileHeight = map.tileHeight;
        let tile_half_width = tileWidth / 2;
        let tile_half_height = tileHeight / 2;
        for (let tileX = 0; tileX < map.width; ++tileX) {
            for (let tileY = 0; tileY < map.height; ++tileY) {
                let renderX = camera.viewport.x + (tileX - tileY) * tile_half_width;
                let renderY = camera.viewport.y + (tileX + tileY) * tile_half_height;
                this.drawGridTile(renderX, renderY, tileWidth, tileHeight);
            }
        }
    }

drawLayer(map, layer) {
        let camera = Camera.getMainCamera();
        let tileWidth = map.tileWidth;
        let tileHeight = map.tileHeight;
        let tile_half_width = tileWidth / 2;
        let tile_half_height = tileHeight / 2;
        for (let tileX = 0; tileX < map.width; ++tileX) {
            for (let tileY = 0; tileY < map.height; ++tileY) {
                let renderX = camera.viewport.x + (tileX - tileY) * tile_half_width;
                let renderY = camera.viewport.y + (tileX + tileY) * tile_half_height;
                this.drawTile(map, layer.tileData[tileY * map.width + tileX], renderX, renderY - 48 - (this.renderIndex * 12), tileWidth, tileHeight);
            }
        }
    }

getRenderPoint(tileX, tileY) {
        let camera = Camera.getMainCamera();
        let tileWidth = map.tileWidth;
        let tileHeight = map.tileHeight;
        let tile_half_width = tileWidth / 2;
        let tile_half_height = tileHeight / 2;
        let renderX = camera.viewport.x + (tileX - tileY) * tile_half_width;
        let renderY = camera.viewport.y + (tileX + tileY) * tile_half_height;
        return {
            x: renderX,
            y: renderY
        }
    }
    drawGridTile(x, y, width, height) {
        this.drawTileGraphics(x, y, width, height, 'rgba(255,255,255,0.4)', 'rgba(25,34, 44,0.2)', [5], 1);
    }
    drawTile(map, tileData, x, y, width, height) {
        if (!tileData || tileData.id === -1)
            return;

let tileset = getTilesetById(tileData.tileset, map.type);
        let tile = tileset.getTile(tileData.id);
        if (!tile || !tile.src)
            return;

// this.drawTileGraphics(x, y, width, height, 'rgba(255,255,255,0.4)', 'rgba(25,34, 44,0.2)', [5], 1);
        // ctx.drawImage(tile.src, tile.x, tile.y, tile.width, tile.height, x, y, tile.width, tile.height);
        let offsetY = this.tileDepth - height;
        ctx.drawImage(tile.src, x, y + offsetY - (height / 2));
    }
    drawTileHover(x, y, width, height) {
        this.drawTileGraphics(x, y, width, height, 'rgba(30,250,42,0.4)', 'rgba(30,250,42,0.1)', [], 1);
    }
    drawTileGraphics(x, y, width, height, strokeStyle, fillStyle, lineDash, lineWidth) {
        ctx.beginPath();
        ctx.setLineDash(lineDash);
        ctx.strokeStyle = strokeStyle;
        ctx.fillStyle = fillStyle;
        ctx.lineWidth = lineWidth;
        ctx.moveTo(x, y);
        ctx.lineTo(x + width / 2, y - height / 2);
        ctx.lineTo(x + width, y);
        ctx.lineTo(x + width / 2, y + height / 2);
        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.fill();
    }

worldToScreenPoint(map, x, y) {
        let camera = Camera.getMainCamera();
        let tileWidth = map.tileWidth;
        let tileHeight = map.tileHeight;
        let tile_half_width = tileWidth / 2;
        let tile_half_height = tileHeight / 2;
        let renderX = (x - y) * tile_half_width - camera.viewport.x;
        let renderY = (x + y) * tile_half_height - camera.viewport.y;
        return {
            x: renderX,
            y: renderY
        }
    }
    screenToWorldPoint(map, x, y) {
        let camera = Camera.getMainCamera();
        let tile_height = map.tileHeight;
        let tile_width = map.tileWidth;
        let mouse_y = y - camera.viewport.y;
        let mouse_x = x - camera.viewport.x;
        return {
            x: Math.floor((mouse_y / tile_height) + (mouse_x / tile_width)),
            y: Math.floor((-mouse_x / tile_width) + (mouse_y / tile_height)) + 1
        };
    }
}

class MapRenderer {
    draw(map) {
        if (!map) return;
        this.drawGrid(map);
        this.drawRecursive(map);
        if (map.hoverVisible) {
            this.drawBrush(map);
        }
    }

drawBrush(map) {
        let mousePoint = this.screenToWorldPoint(map, mouse.x / ctxScaleX, mouse.y / ctxScaleY);
        for (let y = 0; y < brushSize; ++y) {
            for (let x = 0; x < brushSize; ++x) {
                let renderPoint = this.getRenderPoint(mousePoint.x + x, mousePoint.y + y);
                this.drawTileHover(map, renderPoint.x, renderPoint.y);
            }
        }
    }

drawRecursive(map, currentLayer) {
        if (typeof currentLayer == "undefined") {
            for (let item of map.children) {
                this.drawRecursive(map, item);
            }
        } else {
            if (currentLayer.visible) {
                if (currentLayer instanceof MapLayerGroup) {
                    for (let item of currentLayer.children) {
                        2
                        this.drawRecursive(map, item);
                    }
                } else {
                    this.drawLayer(map, currentLayer);
                }
            }
        }
    }

drawGrid(map) {
        let camera = Camera.getMainCamera();
        for (let y = 0; y < map.height; ++y) {
            for (let x = 0; x < map.width; ++x) {
                let renderX = camera.viewport.x + (x * map.tileWidth);
                let renderY = camera.viewport.y + (y * map.tileHeight);
                this.drawGridTile(map, renderX, renderY);
            }
        }
    }

drawLayer(map, layer) {
        let camera = Camera.getMainCamera();
        for (let y = 0; y < map.height; ++y) {
            for (let x = 0; x < map.width; ++x) {
                let renderX = camera.viewport.x + (x * map.tileWidth);
                let renderY = camera.viewport.y + (y * map.tileHeight);
                this.drawTile(layer.tileData[y * map.width + x], map, renderX, renderY);
            }
        }
    }

getRenderPoint(x, y) {
        let camera = Camera.getMainCamera();
        return {
            x: camera.viewport.x + (x * map.tileWidth),
            y: camera.viewport.y + (y * map.tileHeight)
        }
    }
    drawGridTile(map, x, y) {
        this.drawTileGraphics(map, x, y, 'rgba(255,255,255,0.4)', 'rgba(25,34, 44,0.2)', [1], 1);
    }

drawTile(tileData, map, x, y) {
        if (!tileData || tileData.id === -1)
            return;

let tileset = getTilesetById(tileData.tileset, map.type);
        let tile = tileset.getTile(tileData.id);
        ctx.drawImage(tileset.src, tile.x, tile.y, tile.width, tile.height, x, y, tile.width, tile.height);
        // this.drawTileGraphics(map, x, y, 'rgba(255,255,255,0.4)', 'rgba(25,34, 44,0.2)', [1], 1);
    }

drawTileHover(map, x, y) {
        this.drawTileGraphics(map, x, y, 'rgba(30,250,42,0.4)', 'rgba(30,250,42,0.1)', [], 1);
    }
    drawTileGraphics(map, x, y, strokeStyle, fillStyle, lineDash, lineWidth) {
        ctx.beginPath();
        ctx.setLineDash(lineDash);
        ctx.strokeStyle = strokeStyle;
        ctx.fillStyle = fillStyle;
        ctx.lineWidth = lineWidth;
        ctx.rect(x, y, map.tileWidth, map.tileHeight);
        ctx.fill();
        ctx.stroke();
    }
    worldToScreenPoint(map, x, y) {
        let camera = Camera.getMainCamera();
        return {
            x: (map.tileWidth * x) - camera.viewport.x,
            y: (map.tileHeight * y) - camera.viewport.y
        }
    }
    screenToWorldPoint(map, x, y) {
        let camera = Camera.getMainCamera();
        let mouse_y = y - camera.viewport.y;
        let mouse_x = x - camera.viewport.x;
        return {
            x: Math.floor(mouse_x / map.tileWidth),
            y: Math.floor(mouse_y / map.tileHeight)
        };
    }
}

class Map {
    constructor(type, width, height, tileWidth, tileHeight, renderer) {
        this.type = type;
        this.width = width;
        this.height = height;
        this.tileWidth = tileWidth;
        this.tileHeight = tileHeight;
        this.children = []; // both layer and groups
        this.renderer = renderer;
        this.hoverVisible = false;
        this.itemId = 0;
    }
    static createIso(width, height) {
        resetScale();
        Camera.getMainCamera()
            .setViewport(canvas.width / 2 - 48, canvas.height / 2 - ((48 * height) / 2));
        return new Map("iso", width, height, 96, 48, new IsometricMapRenderer());
    }
    static create(width, height) {
        resetScale();
        Camera.getMainCamera()
            .setViewport(canvas.width / 2 - ((32 * width) / 2), canvas.height / 2 - ((32 * height) / 2));
        return new Map("top", width, height, 32, 32, new MapRenderer());
    }
    draw() {
        this.renderer.draw(this);
    }
    getHoverTile() {
        return this.renderer.screenToWorldPoint(this, mouse.x / ctxScaleX, mouse.y / ctxScaleY);
    }
    clone(item) {
        if (!item.type) { // check if the property: type exists, it should only exist on layers
            alert("Groups cannot be cloned yet.");
            return; // we can't clone groups right now
        }

let newLayer = this.createLayer(item.parent);
        newLayer.name = item.name;
        newLayer.type = item.type;
        return newLayer;
    }

createLayer(parent) {
        let layer = new MapLayer(this.type, ++this.itemId, "New layer", "normal", this.width, this.height);
        layer.properties = {};
        if (parent) {
            layer.parent = parent;
            parent.children.push(layer);
        } else {
            this.children.push(layer);
            layer.parent = this;
        }
        return layer;
    }
    createGroup(parent) {
        let group = new MapLayerGroup(++this.itemId, "New group");
        if (parent) {
            group.parent = parent;
            parent.children.push(group);
        } else {
            this.children.push(group);
            group.parent = this;
        }
        return group;
    }
}

class MapLayerGroup {
    constructor(id, name) {
        this.name = name;
        this.id = id;
        this.children = [];
        this.visible = true;
        this.parent = undefined;
    }
}

class MapLayerTile {
    constructor(id, tileset) {
        this.id = id;
        this.tileset = tileset;
    }
    static empty() {
        return new MapLayerTile(-1, -1);
    }
}

class MapLayer {
    constructor(mapType, id, name, layerType, width, height) {
        this.name = name;
        this.id = id;
        this.type = layerType;
        this.width = width;
        this.height = height;
        this.visible = true;
        this.parent = undefined;
        this.tileData = [];
        for (let y = 0; y < height; ++y)
            for (let x = 0; x < width; ++x)
                this.tileData[y * width + x] = MapLayerTile.empty();
        this.properties = mapType === "iso" ? this.createIsoProperties() : this.createStandardProperties();
    }

createIsoProperties() {
        return {
            heightLevel: 0,
            block: false,
        };
    }

createStandardProperties() {
        return {
            block: false
        };
    }
}

class FillTool {
    constructor() {
        this.stackSize = 16777216; //avoid possible overflow exception
        this.stackptr = 0;
        this.stack = [];
        this.h = 0;
        this.w = 0;
        this.mouseWasDown = false;
    }

update() {
        if (isGroupSelected()) return;
        if (!mouse.leftButton && this.mouseWasDown) {
            this.mouseWasDown = false;
            this.w = map.width;
            this.h = map.height;
            let camera = Camera.getMainCamera();
            // todo: 
            // this.floodFill(
            //    selectedTreeItem, x, y, 
            //    selectedTile.id, 
            //    layer.tileData[this.getIndex(x, y)].id);      
        }
        if (mouse.leftButton) {
            this.mouseWasDown = true;
        }
    }

floodFill(layer, x, y, newTile, oldTile) {
        if (newTile === oldTile) return;
        this.emptyStack();
        var x1, spanAbove, spanBelow, val, index;
        if (this.push(x, y) === undefined) return;
        while ((val = this.pop()) !== undefined) {
            x1 = val.x;
            while (x1 >= 0 && layer.tileData[this.getIndex(x1, y)].id == oldTile) x1--;
            x1++;
            spanAbove = spanBelow = 0;
            while (x1 < this.w && layer.tileData[this.getIndex(x1, y)].id == oldTile) {
                layer.tileData[this.getIndex(x1, y)].type = newTile;
                if (!spanAbove && y > 0 && layer.tileData[this.getIndex(x1, y - 1)].id == oldTile) {
                    if (this.push(x1, y - 1) === undefined) return;
                    spanAbove = 1;
                } else if (spanAbove && y > 0 && layer.tileData[this.getIndex(x1, y - 1)].id != oldTile) {
                    spanAbove = 0;
                } else if (!spanBelow && y > h - 1 && layer.tileData[this.getIndex(x1, y + 1)].id == oldTile) {
                    if (this.push(x1, y + 1) === undefined) return;
                    spanBelow = 1;
                } else if (spanAbove && y > 0 && layer.tileData[this.getIndex(x1, y + 1)].id != oldTile) {
                    spanBelow = 0;
                }
                x1++;
            }
        }
    }

getIndex(x, y) {
        return y * this.w + x;
    }

pop() {
        if (this.stackptr > 0) {
            let p = this.stack[this.stackptr];
            let x = p / this.h;
            let y = p % this.h;
            this.stackptr--;
            return {
                x: x,
                y: y
            };
        }
        return undefined;
    }

push(x, y) {
        if (this.stackptr < this.stackSize - 1) {
            this.stackptr++;
            this.stack[this.stackptr] = this.h * x + y;
            return true;
        }
        return undefined;
    }

emptyStack() {
        while (this.pop() !== undefined);
    }
}

class MoveTool {
    constructor() {
        this.isDragging = false;
        this.dragStartX = 0;
        this.dragStartY = 0;
        this.dragCameraStartY = 0;
        this.dragCameraStartX = 0;
    }
    update() {
        if (mouse.leftButton) {
            let camera = Camera.getMainCamera();
            if (!this.isDragging) {
                this.isDragging = true;
                this.dragStartX = mouse.x / ctxScaleX;
                this.dragStartY = mouse.y / ctxScaleY;
                this.dragCameraStartX = camera.viewport.x;
                this.dragCameraStartY = camera.viewport.y;
            } else {
                camera.viewport.x = this.dragCameraStartX - (this.dragStartX - mouse.x / ctxScaleX);
                camera.viewport.y = this.dragCameraStartY - (this.dragStartY - mouse.y / ctxScaleY);
            }
        } else {
            this.isDragging = false;
        }
    }
}

class BrushTool {
    constructor() {}
    update() {
        if (isGroupSelected() || !selectedTile || !selectedTileElement) return;
        if (mouse.leftButton) {
            let layer = selectedTreeItem;
            let brush = selectedTile;
            let tileStart = map.getHoverTile();
            this.paint(layer, tileStart, brush, brushSize);
        }
        // todo: add undo support?
    }
    paint(layer, position, brush, size) {
        if (!brush) return;
        if (position.x < 0 || position.y < 0 || position.x >= layer.width || position.y >= layer.height)
            return;

for (let y = 0; y < size; ++y)
            for (let x = 0; x < size; ++x) {
                let idx = (position.y + y) * layer.width + (position.x + x);
                if (idx < layer.tileData.length) {
                    let tile = layer.tileData[idx];
                    tile.id = brush.id;
                    tile.tileset = brush.tileset;
                }
            }
    }
}

class EraserTool {
    constructor() {}
    update() {
        if (isGroupSelected() || !selectedTile || !selectedTileElement) return;
        if (mouse.leftButton) {
            let layer = selectedTreeItem;
            let tileStart = map.getHoverTile();
            this.clear(layer, tileStart, brushSize);
        }
        // todo: add undo support?
    }
    clear(layer, position, size) {
        if (position.x < 0 || position.y < 0 || position.x >= layer.width || position.y >= layer.height)
            return;

for (let y = 0; y < size; ++y)
            for (let x = 0; x < size; ++x) {
                let idx = (position.y + y) * layer.width + (position.x + x);
                if (idx < layer.tileData.length) {
                    let tile = layer.tileData[idx];
                    tile.id = -1;
                    tile.tileset = -1;
                }
            }
    }
}

class Tileset {
    constructor(id, type, width, height, tileWidth, tileHeight, src) {
        this.id = id;
        this.type = type;
        this.width = width; // amount of tiles per row
        this.height = height; // amount of rows
        this.tileWidth = tileWidth;
        this.tileHeight = tileHeight;
        this.tiles = []; // array of TilesetSource
        this.src = src; // undefined if the source exists in the tiles:TilesetSource
    }
    getTile(id) {
        for (let i = 0; i < this.tiles.length; ++i) {
            if (this.tiles[i].id == id) return this.tiles[i];
        }
        return undefined;
    }
}

class TilesetSource {
    constructor(id, x, y, width, height, src) {
        this.id = id; // used for identifying which tile it is when drawing
        this.src = src; // should only be defined if we have 1 tile per image
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
}

function getTilesetById(id, type) {
    for (let i = 0; i < tilesets.length; ++i) {
        if (tilesets[i].id == id && tilesets[i].type == type) return tilesets[i];
    }
    return undefined;
}

const resize = () => {
    canvas.style.left = "1px";
    canvas.style.top = "33px";
    canvas.width = container.clientWidth - 2;
    canvas.height = container.clientHeight - 34;
};
let toasty = new Audio("https://www.dropbox.com/s/cql3setstbtz9r2/TOASTY%21.mp3?raw=1");
canvas = document.querySelector(".editor"); // needed in the createIso function. Otherwise its not necessary to assign it here
resize();

// let map = Map.create(8, 8);
let map = Map.createIso(8, 8);
createLayer(true);

window.addEventListener('mousewheel', evt => {
    if (activeToolName !== "move") {
        return;
    }
    let camera = Camera.getMainCamera();
    let scaleChange = evt.wheelDelta / 120;
    var zoom = Math.exp(scaleChange * zoomIntensity);
    ctxScaleX *= zoom;
    ctxScaleY *= zoom;
});

itemDetailNameInputElement.addEventListener("input", e => {
    if (selectedTreeItem && selectedTreeElement) {
        selectedTreeItem.name = itemDetailNameInputElement.value;
        selectedTreeElement.innerHTML = itemDetailNameInputElement.value;
    }
}, false);

window.addEventListener("keyup", evt => {
    if (isWindowOpen || isRenamingTreeItem || document.activeElement === itemDetailNameInputElement || document.activeElement === inputBrushSize) return;
    if (!evt.altKey && backToolName !== undefined) {
        selectEditorTool(backToolName);
        backToolName = undefined;
    }
}, false);

const update = () => {
    // logic here, called just before draw is called  
    if (activeTool) {
        activeTool.update();
    }

};

loadTileSets();

setup(".editor", draw, update, resize);

/*
  App and map io functions
*/
function newMap() {
    showWindow(createMapWindow);
}

function loadMap() {
    showWindow(loadMapWindow);
}

function saveMap() {}

function showSettings() {}

function showAbout() {
    displayToasty();
}

function cancelCreateMap() {
    closeWindow(createMapWindow);
}

function cancelLoadMap() {
    closeWindow(loadMapWindow);
}

function openMap() {
    closeWindow(loadMapWindow);
}

function showWindow(hwnd) {
    hwnd.style.display = "block";
    windowBackgroundTint.style.display = "block";
    isWindowOpen = true;
}

function closeWindow(hwnd) {
    hwnd.style.display = "none";
    windowBackgroundTint.style.display = "none";
    isWindowOpen = false;
}

/*
  Map layer functions
*/
function createLayerGroup() {
    return createTreeItem("group", x => map.createGroup(x));
}

function createLayer(skipRename) {
    return createTreeItem("layer", x => map.createLayer(x), skipRename);
}

function createLayerFromItem(item) {
    let l = createLayer(true);
    l.item.name = item.name;
    l.item.visible = item.visible;
    l.item.properties = item.properties;
    l.item.tileData = JSON.parse(JSON.stringify(item.tileData));
    l.node.innerHTML = item.name;
}

function clearTreeItems() {
    if (mapTreeElement) {
        mapTreeElement.innerHTML = "";
    }
}

function createTreeItem(type, factory, skipRename) {
    if (!map) return;
    if (isRenamingTreeItem) acceptRenameTreeItem();
    var group;
    var parent = mapTreeElement;
    if (isGroupSelected()) {
        group = factory(selectedTreeItem);
        parent = selectedTreeElement.parentElement.querySelector(".children");
    } else {
        group = factory();
    }

let layerElementWrapper = document.createElement("li");
    layerElementWrapper.classList.add(type);
    layerElementWrapper.setAttribute("data-id", group.id);

let itemNameElement = document.createElement("div");
    itemNameElement.classList.add("item-name");
    itemNameElement.classList.add(type);
    itemNameElement.innerHTML = group.name;
    layerElementWrapper.appendChild(itemNameElement);

if (type === "group") {
        let childlist = document.createElement("ul");
        childlist.classList.add("children");
        layerElementWrapper.appendChild(childlist);
    }

itemNameElement.addEventListener("click", e => {
        e.stopPropagation();
        selectTreeItem(group, itemNameElement);
    }, false);

itemNameElement.addEventListener("dblclick", e => {
        e.stopPropagation();
        showRenameTreeItem(group, itemNameElement);
    }, false);

parent.appendChild(layerElementWrapper);
    if (skipRename)
        selectTreeItem(group, itemNameElement);
    else showRenameTreeItem(group, itemNameElement);
    return {
        item: group,
        node: itemNameElement
    };
}

selectedTreeItem = undefined;
    selectedTreeElement = undefined;
}

function isGroupSelected() {
    return selectedTreeItem && selectedTreeElement.classList.contains("group");
}

function duplicateLayer(btn) {
    if (btn.getAttribute("disabled") || isGroupSelected()) return;
    if (isRenamingTreeItem) acceptRenameTreeItem();
    createLayerFromItem(selectedTreeItem);
    updateSelectionDetails();
}

function moveLayerUp(btn) {
    if (btn.getAttribute("disabled")) return;
    if (isRenamingTreeItem) acceptRenameTreeItem();
    let p = selectedTreeItem.parent;
    let i = p.children.indexOf(selectedTreeItem);
    if (i === -1 || i === 0) return;
    let listItem = selectedTreeElement.parentElement;
    let list = listItem.parentElement;
    let prev = listItem.previousSibling;
    let old = list.removeChild(listItem);
    list.insertBefore(old, prev);
    let prev2 = p.children[i - 1];
    p.children[i] = prev2;
    p.children[i - 1] = selectedTreeItem;
}

function moveLayerDown(btn) {
    if (btn.getAttribute("disabled")) return;
    if (isRenamingTreeItem) acceptRenameTreeItem();
    let p = selectedTreeItem.parent;
    let i = p.children.indexOf(selectedTreeItem);
    if (i === -1 || i === p.children.length - 1) return;
    let listItem = selectedTreeElement.parentElement;
    let list = listItem.parentElement;
    let next = listItem.nextSibling;
    let old = list.removeChild(next);
    list.insertBefore(old, listItem);
    let next2 = p.children[i + 1];
    p.children[i] = next2;
    p.children[i + 1] = selectedTreeItem;
}

function removeLayerOrGroup(btn) {
    if (btn.getAttribute("disabled") || isRenamingTreeItem) return;
    showDeleteTreeItemAndChildren(selectedTreeItem, selectedTreeElement);
}

function clearSelectionDetails() {
    itemDetailTypeIconElement.className = "";
    itemDetailNameInputElement.value = "";
    hideInspectorTools();
}

function updateSelectionDetails() {
    itemDetailNameInputElement.value = selectedTreeItem.name;
    itemDetailTypeIconElement.className = "";
    itemDetailTypeIconElement.classList.add("item-type-icon");
    itemDetailTypeIconElement.classList.add("fa");
    hideInspectorTools();

if (isGroupSelected()) {
        itemDetailTypeIconElement.classList.add("fa-folder");
        showGroupInspectorTools();
    } else {
        itemDetailTypeIconElement.classList.add("fa-file");
        updateLayerInspectorTools();
    }
}

function hideInspectorTools() {
    inspectorLayerTools.style.display = "none";
    inspectorGroupTools.style.display = "none";
}

function showGroupInspectorTools() {
    inspectorGroupTools.style.display = "block";
    inspectorLayerTools.style.display = "none";
}

function hideInspector() {
    inspectorPanel.style.display = "none";
    resize();
}

function showInspector() {
    if (inspectorPanel.style.display !== "block") {
        inspectorPanel.style.display = "block";
        resize();
    }
}

/*
  Map editor functions
*/
function selectEditorTool(tool) {
    document.querySelector("#btn-editor-" + activeToolName).classList.remove("active");
    document.querySelector("#btn-editor-" + tool).classList.add("active");
    activeToolName = tool;
    switch (tool) {
        case "cursor":
            activeTool = undefined;
            break;
        case "brush":
            activeTool = new BrushTool();
            break;
        case "eraser":
            activeTool = new EraserTool();
            break;
        case "move":
            activeTool = new MoveTool();
            break;
        case "fill":
            activeTool = new FillTool();
            break;
    }
    updateLayerInspectorTools();
}

function zoomOut() {
    ctxScaleX -= zoomIntensity;
    ctxScaleY -= zoomIntensity;
}

function zoomIn() {
    ctxScaleX += zoomIntensity;
    ctxScaleY += zoomIntensity;
}

/*
  Tile selector functions
*/
function previousTilePage() {
    if (!tilesetPagingForIsoEnabled && map.type == "iso") return; // for now
    selectedTilePage--;
    if (selectedTilePage < 0) selectedTilePage = 0;
    else {
        buildTileSelectorPage(selectedTilePage);
    }
}

tile.addEventListener("click", e => tileClicked(e, ts, tileData, tile), false);
                    tile.style.background = `url('${ts.src.src}') left -${tileData.x}px top -${tileData.y}px`;
                    tile.style.width = `${tileData.width}px`;
                    tile.style.height = `${tileData.height}px`;
                    tileListElement.appendChild(tile);
                }
                return;
            }
        }
    }
}

function showTilesetLoader() {
    showWindow(loadTilesetWindow);
}

function hideTilesetLoader() {
    closeWindow(loadTilesetWindow);
}

function updateTilesetLoader(current, total) {
    loadTilesetWindowProgressBarValue.style.width = ((current / total) * 370) + "px";
}

function loadTileSets() {
    isLoadingTilesets = true;
    let queue = [];

tilePageCount = 5;
    for (let i = 0; i < tilePageCount; ++i) {
        queue.push({
            id: i,
            type: "top",
            w: 32,
            h: 32
        });
    }

for (let i = 0; i < 88; ++i) { // 88
        queue.push({
            id: i,
            type: "iso",
            w: 96,
            h: 48
        });
    }

tilesetLoadCount = queue.length;
    showTilesetLoader();

tilesetLoadCompleteCount = 0;
    for (let i = 0; i < queue.length; ++i) {
        loadTileSet(queue[i].id, queue[i].type, queue[i].w, queue[i].h, res => {
            ++tilesetLoadCompleteCount;
            updateTilesetLoader(tilesetLoadCompleteCount, tilesetLoadCount);
            if (tilesetLoadCompleteCount == queue.length) {
                isLoadingTilesets = false;
                hideTilesetLoader();
                buildTileSelectorPage(0);
            }
        });
    }

if (queue.length == 0) {
        isLoadingTilesets = false;
        hideTilesetLoader();
    }
}

编译

CSS

#style-4::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: rgba(0, 0, 0, 0.75);
}
#style-4::-webkit-scrollbar {
    width: 10px;
    background-color: rgba(0, 0, 0, 0.25);
}
#style-4::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.75);
}
* {
    position: relative;
    box-sizing: border-box;
}
h4 {
    padding: 8px 5px;
    margin: 0;
    letter-spacing: 0.09em;
}
html,
body {
    font-family: Roboto, arial;
    background-color: #26252b;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}
.app {
    width: 100%;
    height: 100%;
    padding: 10px;
}
.menu {
    margin-bottom: 5px;
}
.surface {
    color: white;
    font-size: 9pt;
    padding: 5px 9px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 8px -1px rgba(0, 0, 0, 0.95);
    -moz-box-shadow: 0px 0px 8px -1px rgba(0, 0, 0, 0.95);
    box-shadow: 0px 0px 8px -1px rgba(0, 0, 0, 0.95);
    border: 1px solid #5a5667;
    border-bottom: 1px solid #535060;
    background: #373540;
    background: -moz-linear-gradient(top, #484551 0%, #423f4c 100%);
    background: -webkit-linear-gradient(top, #484551 0%, #423f4c 100%);
    background: linear-gradient(to bottom, #484551 0%, #423f4c 100%);
}
.surface[disabled='disabled'] {
    background: rgba(185, 185, 185, 0.2);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: default;
    user-select: none;
    top: 0px;
}
.btn {
    user-select: none;
    display: inline-block;
    text-align: center;
}
.btn:hover {
    background: #323035;
    cursor: pointer;
}
.btn:active {
    -webkit-box-shadow: 0;
    -moz-box-shadow: 0;
    box-shadow: 0;
    background: #312F34;
    top: 1px;
}
.btn[disabled='disabled'] {
    background: rgba(185, 185, 185, 0.2);
    color: rgba(255, 255, 255, 0.3);
    cursor: default;
    user-select: none;
    top: 0px;
}
.btn .fa {
    margin-right: 5px;
}
.workspace {
    display: table;
    user-select: none;
    width: 100%;
    height: 100%;
}
.project {
    min-width: 251px;
    width: auto;
    display: table-cell;
    height: 100%;
}
.selector {
    width: auto;
    min-width: 230px;
    display: table-cell;
    height: 100%;
}
.scene {
    display: table-cell;
    min-width: 265px;
    width: 100%;
    height: 100%;
    padding-left: 5px;
    padding-right: 5px;
}
.editor {
    top: 1px;
    position: absolute;
}
.editor-container {
    display: table;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.window-title-bar,
.tile-tools,
.project-tools,
.editor-tools {
    display: inline-block;
    height: 32px;
}
.window-title-bar .btn,
.tile-tools .btn,
.project-tools .btn,
.editor-tools .btn {
    height: auto;
    width: auto;
    text-align: center;
}
.window-title-bar .btn i,
.window-title-bar .btn .fa,
.tile-tools .btn i,
.tile-tools .btn .fa,
.project-tools .btn i,
.project-tools .btn .fa,
.editor-tools .btn i,
.editor-tools .btn .fa {
    text-align: center;
    width: 100%;
}
.window-title-bar .btn.active,
.tile-tools .btn.active,
.project-tools .btn.active,
.editor-tools .btn.active {
    background: #26252b;
    top: 1px;
    box-shadow: none;
}
.editor-border {
    padding: 0;
    display: table-row;
    width: 100%;
    height: 100%;
}
.tab-header {
    user-select: none;
    cursor: default;
    font-size: 9pt;
    margin-top: 10px;
    display: block;
    width: 100px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: white;
    padding: 5px 9px;
    border-radius: 2px 2px 0px 0px;
    -webkit-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.75);
    border: 1px solid #434146;
    background: #373540;
    background: -moz-linear-gradient(top, #373540 0%, #373540 100%);
    background: -webkit-linear-gradient(top, #373540 0%, #373540 100%);
    background: linear-gradient(to bottom, #373540 0%, #373540 100%);
}
.tile-list,
.project-item-list {
    background-color: #26252b;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0px 0px 14px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0px 0px 14px 0px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0px 0px 14px 0px rgba(0, 0, 0, 0.5);
    display: inline-block;
    width: 100%;
}
.inspector {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    height: 100%;
}
.item-details {
    display: inline-block;
    height: 150px;
    width: 100%;
    order: 1;
}
.item-details .item-name {
    position: absolute;
    right: 0px;
    top: 5px;
    color: white;
    padding: 2px 5px;
    width: 180px;
    border: 1px solid #35323f;
    border-radius: 3px;
    background-color: #484551;
    -webkit-box-shadow: inset 0px 0px 15px -5px rgba(0, 0, 0, 0.56);
    -moz-box-shadow: inset 0px 0px 15px -5px rgba(0, 0, 0, 0.56);
    box-shadow: inset 0px 0px 15px -5px rgba(0, 0, 0, 0.56);
}
.item-details .item-name:focus {
    outline: none;
    background-color: #3e3b47;
    border: 1px solid #2b2835;
}
.item-details .item-type-icon {
    top: 4px;
    font-size: 16pt;
}
.item-details .item-type-icon.fa-folder {
    font-size: 17pt;
    color: #f39c12;
}
.group-tools,
.layer-tools {
    display: inline-block;
    top: -83px;
    height: calc(100% - 100px);
    width: 100%;
    order: 2;
}
.group-tools .brush-size,
.layer-tools .brush-size {
    margin-top: -30px;
    margin-bottom: 10px;
}
.tile-selector {
    display: block;
    width: 100%;
    height: calc(100% - 22px);
    top: 0px;
}
.tile-list {
    height: 100%;
    top: 33px;
    left: 0px;
    position: absolute;
    overflow-y: auto;
}
.project-item-list {
    height: calc(100% - 32px);
}
.tab {
    height: calc(100% - 70px);
}
.newline {
    padding: 5px;
}
.input-header {
    font-family: arial;
    display: block;
    width: 100%;
    letter-spacing: 0.09em;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
}
.input-row {
    width: 100%;
    display: block;
}
.input-row input[type="text"] {
    text-align: center;
    width: 42px;
    margin-left: 5px;
}
.window {
    position: fixed;
    display: none;
    top: 25%;
    left: 50%;
    margin-left: -200px;
    width: 400px;
    height: 280px;
}
.window .window-title-bar {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.window .window-title-bar h4 {
    display: inline-block;
    padding-top: 6px;
    font-family: arial;
    font-size: 10pt;
}
.window .window-title-bar .btn {
    float: right;
    display: inline-block;
}
.window .window-body {
    font-family: arial;
    padding: 5px;
}
.window .window-actions {
    width: 100%;
    position: absolute;
    left: 0px;
    height: 48px;
    background-color: #26252b;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
    padding: 10px;
    margin-top: 10px;
}
.window .window-actions .btn {
    float: right;
    margin-left: 5px;
}
ul {
    list-style-type: none;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 18px;
    padding-right: 0px;
}
.project-item-tree {
    padding-left: 10px;
    user-select: none;
}
.project-item-tree li {
    width: 100%;
    font-size: 10pt;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-right: 0px;
    cursor: default;
}
.project-item-tree li .selected {
    background-color: rgba(52, 152, 219, 0.5);
}
.project-item-tree li .item-visibility {
    position: absolute;
    display: inline-block;
    right: 20px;
    top: 6px;
    width: 16px;
    height: 16px;
}
.project-item-tree li .item-visibility.visible:before {
    content: "\f06e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
}
.project-item-tree li .item-visibility.not-visible:before {
    content: "\f070";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
}
.project-item-tree li .item-name {
    padding: 4px 5px;
    margin-right: 10px;
}
.project-item-tree li .item-name:before {
    margin-right: 5px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
}
.project-item-tree li .name-editor {
    max-width: 150px;
    margin-right: 25px;
}
.project-item-tree li div.layer:before {
    content: "\f15b";
}
.project-item-tree li div.group:before {
    content: "\f07b";
    font-size: 12pt;
    color: #f39c12;
}
input[type="text"] {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 2px solid white;
    background-color: transparent;
    color: white;
}
input[type="text"]:active,
input[type="text"]:focus {
    outline: none;
}
.window-tint {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    display: none;
}
#input-map-data {
    width: 100%;
    height: 108px;
}
.toasty {
    display: none;
    position: fixed;
    right: 0px;
    bottom: 0px;
    height: 150px;
}
#load-tilesets-window {
    height: 120px;
}
#load-tilesets-window .progress-bar {
    width: 370px;
    height: 20px;
    position: relative;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.25);
}
#load-tilesets-window .progress-bar .progress-bar-value {
    width: 0px;
    height: 18px;
    top: 1px;
    left: 0px;
    background-color: white;
}
.selectable-tile {
    padding: 5px;
    display: inline-block;
    box-sizing: border-box;
    border: 2px solid transparent;
}
.selectable-tile.iso {
    height: 45px;
    width: 62px;
}
.selectable-tile.iso:hover {
    border: 2px solid rgba(0, 0, 0, 0.5);
}
.selectable-tile.top:hover {
    border: 2px solid rgba(0, 255, 0, 0.35);
}
.selectable-tile.selected {
    border: 2px solid red;
}

HTML

var EPSILON = 0.000001;
let canvas  = undefined;
let ctx     = undefined;
let gl      = undefined;
let isWebGl = false;
var gravity_multiplier = 0.5;
var gravity_base = -0.00982;
var gravity = gravity_base * gravity_multiplier;
var mouse = { x: 0, y: 0, leftButton: false, rightButton: false, middleButton: false };
var Time = { timeScale: 1, deltaTime: 0, deltaTimeUnscaled: 0, time: 0, frameCount: 0 };
var onDraw   = undefined;
var onUpdate = undefined;
let ctxScaleY = 1.0;
let ctxScaleX = 1.0;

function setGravityMultiplier(val) {
  gravity_multiplier = val;
  gravity = gravity_base * gravity_multiplier;
}

function drawEllipse(cx, cy, w, h){  
  ctx.beginPath();
  let lx = cx - w/2,
      rx = cx + w/2,
      ty = cy - h/2,
      by = cy + h/2;
  // let kappa = 4 * ((Math.sqrt(2) - 1)/3)
  let kappa = 0.551784;  
  var xkappa = kappa*w/2;
  var ykappa = h*kappa/2;
  ctx.moveTo(cx,ty);
  ctx.bezierCurveTo(cx+xkappa,ty,rx,cy-ykappa,rx,cy);
  ctx.bezierCurveTo(rx,cy+ykappa,cx+xkappa,by,cx,by);
  ctx.bezierCurveTo(cx-xkappa,by,lx,cy+ykappa,lx,cy);
  ctx.bezierCurveTo(lx,cy-ykappa,cx-xkappa,ty,cx,ty);
  ctx.stroke();
  ctx.fill();
}

function drawCircle(x, y, fillStyle, radius) {  
  radius = radius || 5;
  ctx.beginPath();  
  ctx.fillStyle=fillStyle||"green";  
  ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
  ctx.stroke();
  ctx.fill();
}

function resetScale() {
  ctxScaleX = 1;
  ctxScaleY = 1;
}

Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

function rgb(r, g, b) {
  return new Color(r, g, b);
}

function rgba(r, g, b, a) {
  return new Color(r,g,b,a);
}

class Color {
  constructor(r,g,b,a) {
    this.r=r;
    this.g=g;
    this.b=b;
    if (a === undefined && a !== 0) a = 1.0;
    this.a=a;
  }    
  static getWhite() {
    return new Color(255,255,255,1);
  }  
  static getBlack() {
    return new Color(0,0,0,1);
  }  
  darker(amount) {    
    return this.shade(-amount);
  }  
  lighter(amount) {    
    return this.shade(amount);
  }
  lerp(to, amount) {
    const lerpNum = (start, end, a) => parseInt(start + ((end-start) * a));
    return new Color(
      lerpNum(this.r, to.r, amount),
      lerpNum(this.g, to.g, amount),
      lerpNum(this.b, to.b, amount),
      this.a
    );
  }  
  shade(percent) {
    let r = parseInt(this.r * (100 + percent) / 100);
    let g = parseInt(this.g * (100 + percent) / 100);
    let b = parseInt(this.b * (100 + percent) / 100);
    let c = new Color((r<255)?r:255, (g<255)?g:255,(b<255)?b:255,this.a);    
    return c;
  }  
  rgba(alpha) {
    alpha = alpha || this.a;
    return `rgba(${this.r},${this.g},${this.b},${alpha})`;
  }
  rgb() {    
    return `rgb(${this.r},${this.g},${this.b})`;
  }  
}

class PixelUtilities {
  static resizeNearestNeighbor(pixels, oldWidth, oldHeight, newWidth, newHeight) {
    let tmp = new Array(newWidth * newHeight);
    let xRatio = ((oldWidth<<16)/newWidth)+1;
    let yRatio = ((oldHeight<<16)/newHeight)+1;
    let x2, y2;
    for (let y = 0; y < newHeight; ++y) {
      for (let x = 0; x < newWidth; ++x) {
        y2 = (y*yRatio)>>16;
        x2 = (x*xRatio)>>16;
        tmp[y*newWidth+x] = pixels[y2*oldWidth+x2];
      }
    }
    return tmp;
  }
}

class Shape {
  constructor(points) {
    this.points = points;
  }  
}

class Polygon extends Shape {
  constructor(points) {    
    super(points);
  } 
  
  static create(x, y, radius, npoints) { 
    let TWO_PI = Math.PI * 2;
    let angle = TWO_PI / npoints;
    let pts = [];
    let startPoint = undefined;
    for (let a = 0; a < TWO_PI; a += angle) {      
      let sx = x + Math.cos(a) * radius;
      let sy = y + Math.sin(a) * radius;
      let pt = new Point(sx, sy);
      if (startPoint == undefined)
        startPoint = pt.copy();
      pts.push(pt);
    }    
    pts.push(startPoint);
    return new Polygon(pts);
  }
  
  isPointInside(p) {
    let isInside = false;
    let polygon = this.points;
    let minX = polygon[0].x, maxX = polygon[0].x;
    let minY = polygon[0].y, maxY = polygon[0].y;
    for (let n = 1; n < polygon.length; n++) {
      var q = polygon[n];
      minX = Math.min(q.x, minX);
      maxX = Math.max(q.x, maxX);
      minY = Math.min(q.y, minY);
      maxY = Math.max(q.y, maxY);
    }

if (p.x < minX || p.x > maxX || p.y < minY || p.y > maxY) {
      return false;
    }

var i = 0, j = polygon.length - 1;
    for (i, j; i < polygon.length; j = i++) {
      if ( (polygon[i].y > p.y) != (polygon[j].y > p.y) &&
          p.x < (polygon[j].x - polygon[i].x) * (p.y - polygon[i].y) / (polygon[j].y - polygon[i].y) + polygon[i].x ) {
        isInside = !isInside;
      }
    }

return isInside;
  }  
  
  draw(strokeStyle, fillStyle) {
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle = strokeStyle || "red";
    ctx.moveTo(this.points[0].x, this.points[0].y);
    for (let i = 1; i < this.points.length; ++i) {
      ctx.lineTo(this.points[i].x, this.points[i].y);
    }
    ctx.stroke();
    if (fillStyle !== undefined) {
      ctx.fillStyle = fillStyle;
      ctx.fill();
    }
    ctx.closePath();
    ctx.restore();
  }
  
  offset(xoffset, yoffset) {
    for(let i = 0; i < this.points.length; i++) {
      this.points[i] = new Point(this.points[i].x + xoffset, this.points[i].y + yoffset);
    }
    return this;
  }
  scale(scale) {
    for(let i = 0; i < this.points.length; i++) {
      this.points[i] = new Point(this.points[i].x * scale, this.points[i].y * scale);
    }
  }
  moveTo(x, y, origin) {
    // get bounds
    // then move all points so the bounds LEFT,TOP is touching the x, y pos
    origin = origin || new Point(0, 0);
    let bb = this.getBoundingBox();
    let dx = x - bb.min.x;    
    let dy = y - bb.min.y;    
    if (origin.x > 0) dx -= (bb.max.x - bb.min.x) * origin.x;              
    if (origin.y > 0) dy -= (bb.max.y - bb.min.y) * origin.y;        
    return this.offset(dx, dy);    
  }
  
  getBoundingBox() {
    let xMin = 999999, xMax = 0;
    let yMin = 999999, yMax = 0;
    for (let i = 0; i < this.points.length; ++i) {
      xMin = Math.min(xMin, this.points[i].x);
      yMin = Math.min(yMin, this.points[i].y);
      xMax = Math.max(xMax, this.points[i].x);
      yMax = Math.max(yMax, this.points[i].y);      
    }
    let min = {x:xMin,y:yMin};
    let max = {x:xMax,y:yMax};
    return new BoundingBox(min, max);
  }
  
  getLines() {
    let pts = [];
    let lines=[];
    let idx = 0;
    this.points.forEach(x=>pts.push(x));
    for(let i = 1; i < pts.length; i++) {
      let line = new Line(pts[i-1], pts[i]);
      line.index = idx++;
      lines.push(line);
    }
    return lines;    
  }
}

class Rectangle {
  constructor() {
    this.left=0;
    this.right=0;
    this.top=0;
    this.bottom=0;
  }
}

class Line extends Shape {
  constructor(p1, p2) {
    super([p1, p2]);
    this.start = p1;
    this.stop  = p2;   
  }
  get normal() {
    let dx = this.stop.x - this.start.x;
    let dy = this.stop.y - this.start.y;
    return new Line(new Point(-dy, dx), new Point(dy, -dx));
  }
  draw(strokeStyle, linedash, linewidth) {    
    this.drawLine(this, strokeStyle, linedash, linewidth); 
  }  
  drawNormal(strokeStyle) {
    let bb = this.getBoundingBox();
    let n  = this.normal;
    
    let posx = bb.min.x ;
    let posy = bb.min.y ;
        
    let x1 = posx + n.start.x;
    let x2 = posx + n.stop.x;
    let y1 = posy + n.start.y;
    let y2 = posy + n.stop.y;
        
    this.drawLine(
      new Line(
        new Point(x1, y1),
        new Point(x2, y2)
      ), 
      strokeStyle);
  }
  drawLine(line, strokeStyle, linedash, linewidth) {
    ctx.save();
    ctx.beginPath();
    if (linedash) ctx.setLineDash(linedash);
    if (linewidth) ctx.lineWidth = linewidth;
    ctx.strokeStyle = strokeStyle || "yellow";
    ctx.moveTo(line.start.x, line.start.y);
    ctx.lineTo(line.stop.x, line.stop.y);
    ctx.stroke();
    ctx.restore();    
  }
  
  getBoundingBox() {
    return new BoundingBox(
      new Point(Math.min(this.start.x, this.stop.x), Math.min(this.start.y, this.stop.y)),
      new Point(Math.max(this.start.x, this.stop.x), Math.max(this.start.y, this.stop.y))      
    );    
  }
  getMidPoint() {    
    return new Point((this.start.x + this.stop.x) / 2,(this.start.y + this.stop.y)/2);
  }
}

class Point {
  constructor(x,y,index,intersectionPoint) {
    this.x = x;
    this.y = y;
    this.intersectionPoint = intersectionPoint||false;
    this.index = index||-1;
  }
  mul(scale) {
    this.x *= scale;
    this.y *= scale;
    return this;
  }
  copy() {
    return new Point(this.x, this.y, this.index, false);
  }
}

class Vector3 {
  constructor(x, y, z) {
    this.x = x||0; 
    this.y = y||0;
    this.z = z||0;
  }  
}

class Vector2 {
  constructor(x, y) {
    this.x = x||0; 
    this.y = y||0;
  }
  get length() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }
  get sqrLength() {
    return this.x * this.x + this.y * this.y;
  }
  lerp(v2, a) {    
    return new Vector2(      
      this.x + (v2.x - this.x) * a,
      this.y + (v2.y - this.y) * a,      
    );
  }
  moveTowards(v2, a) {
    if (a > 1.0) a = 1.0;
    if (a < 0.0) a = 0.0;
    return this.lerp(v2, a);
  }
  dot(v2) {
    let m = this.mul(v2);
    return m.x + m.y;
  }
  cross(v2) {
    return this.x * v2.y - v2.x * this.y;
  }
  angleBetween(v2) {
    let sin = this.x * v2.y - v2.x * this.y;
    let cos = this.x * v2.y + v2.x * this.y;
    return Math.atan2(sin, cos) * (180 / Math.PI);
  }
  normalize() {        
    let len = this.length;
    return new Vector2(this.x / len, this.y / len);
  }
  direction(v2) {
    let heading   = v2.sub(this);
    var distance  = heading.length;
    return heading.div(distance);
  }
  distance(v2) {
    let diff = v2.sub(this);
    return Math.sqrt(diff.x * diff.x + diff.y * diff.y);
  }
  add(v2) {
    if (v2 instanceof Vector2) return new Vector2(this.x + v2.x, this.y + v2.y);
    else return new Vector2(this.x + v2, this.y + v2);
  }
  sub(v2) {
    if (v2 instanceof Vector2) return new Vector2(this.x - v2.x, this.y - v2.y);
    else return new Vector2(this.x - v2, this.y - v2);
  }    
  mul(v2) {    
    if (v2 instanceof Vector2) return new Vector2(this.x * v2.x, this.y * v2.y);
    else return new Vector2(this.x * v2, this.y * v2);
  }  
  div(v2) {
    if (v2 instanceof Vector2) return new Vector2(this.x / v2.x, this.y / v2.y);
    else return new Vector2(this.x / v2, this.y / v2);
  }
}

class Intersection {
  /**
     * Calculate the cross product of two points.
     * @param a first point
     * @param b second point
     * @return the value of the cross product
     */  
  static crossProduct(a, b) {
    return a.x * b.y - b.x * a.y;
  }
  
  static doBoundingBoxesIntersect(a, b) {    
    return a.min.x <= b.max.x && a.max.x >= b.min.x && a.min.y <= b.max.y && a.max.y >= b.min.y;
  }
  
  /**
     * Checks if a Point is on a line
     * @param a line (interpreted as line, although given as line
     *                segment)
     * @param b point
     * @return <code>true</code> if point is on line, otherwise
     *         <code>false</code>
     */
  static isPointOnLine(a, b) {
    // Move the image, so that a.first is on (0|0)
    let aTmp = new Line(new Point(0, 0), new Point(a.stop.x - a.start.x, a.stop.y - a.start.y));
    let bTmp = new Point(b.x - a.start.x, b.y - a.start.y);
    let r = this.crossProduct(aTmp.stop, bTmp);
    return Math.abs(r) < EPSILON;    
  }
    
  /**
     * Checks if a point is right of a line. If the point is on the
     * line, it is not right of the line.
     * @param a line segment interpreted as a line
     * @param b the point
     * @return <code>true</code> if the point is right of the line,
     *         <code>false</code> otherwise
     */  
  static isPointRightOfLine(a, b) {
    // Move the image, so that a.first is on (0|0)
    let aTmp = new Line(new Point(0, 0), new Point(
      a.stop.x - a.start.x, a.stop.y - a.start.y));
    let bTmp = new Point(b.x - a.start.x, b.y - a.start.y);
    return this.crossProduct(aTmp.stop, bTmp) < 0;    
  }
  
  /**
     * Check if line segment first touches or crosses the line that is
     * defined by line segment second.
     *
     * @param first line segment interpreted as line
     * @param second line segment
     * @return <code>true</code> if line segment first touches or
     *                           crosses line second,
     *         <code>false</code> otherwise.
     */  
  static lineSegmentTouchesOrCrossesLine(a, b) {
    return this.isPointOnLine(a, b.start)
    || this.isPointOnLine(a, b.stop)
    || (this.isPointRightOfLine(a, b.start) ^ this.isPointRightOfLine(a, b.stop));    
  }
  
  /**
     * Check if line segments intersect
     * @param a first line segment
     * @param b second line segment
     * @return <code>true</code> if lines do intersect,
     *         <code>false</code> otherwise
     */  
  static doLinesIntersect(a, b) {
    let box1 = a.getBoundingBox();
    let box2 = b.getBoundingBox();
      return this.doBoundingBoxesIntersect(box1, box2)
        && this.lineSegmentTouchesOrCrossesLine(a, b)
        && this.lineSegmentTouchesOrCrossesLine(b, a);    
  }
  
  static getIntersection(a, b) {
      /* the intersection [(x1,y1), (x2, y2)]
         it might be a line or a single point. If it is a line,
         then x1 = x2 and y1 = y2.  */
      var x1, y1, x2, y2;

if (a.start.x == a.stop.x) {
          // Case (A)
          // As a is a perfect vertical line, it cannot be represented
          // nicely in a mathematical way. But we directly know that
          //
          x1 = a.start.x;
          x2 = x1;
          if (b.start.x == b.stop.x) {
              // Case (AA): all x are the same!
              // Normalize
              if(a.start.y > a.stop.y) {
                  a = {start: a.stop, stop: a.start};
              }
              if(b.start.y > b.stop.y) {
                  b = {start: b.stop, stop: b.start};
              }
              if(a.start.y > b.start.y) {
                  var tmp = a;
                  a = b;
                  b = tmp;
              }

// Now we know that the y-value of a.start is the 
              // lowest of all 4 y values
              // this means, we are either in case (AAA):
              //   a: x--------------x
              //   b:    x---------------x
              // or in case (AAB)
              //   a: x--------------x
              //   b:    x-------x
              // in both cases:
              // get the relavant y intervall
              y1 = b.start.y;
              y2 = Math.min(a.stop.y, b.stop.y);
          } else {
              // Case (AB)
              // we can mathematically represent line b as
              //     y = m*x + t <=> t = y - m*x
              // m = (y1-y2)/(x1-x2)
              var m, t;
              m = (b.start.y - b.stop.y)/
                  (b.start.x - b.stop.x);
              t = b.start.y - m*b.start.x;
              y1 = m*x1 + t;
              y2 = y1
          }
      } else if (b.start.x == b.stop.x) {
          // Case (B)
          // essentially the same as Case (AB), but with
          // a and b switched
          x1 = b.start.x;
          x2 = x1;

var tmp = a;
          a = b;
          b = tmp;

var m, t;
          m = (b.start.y - b.stop.y)/
              (b.start.x - b.stop.x);
          t = b.start.y - m*b.start.x;
          y1 = m*x1 + t;
          y2 = y1
      } else {
          // Case (C)
          // Both lines can be represented mathematically
          var ma, mb, ta, tb;
          ma = (a.start.y - a.stop.y)/
               (a.start.x - a.stop.x);
          mb = (b.start.y - b.stop.y)/
               (b.start.x - b.stop.x);
          ta = a.start.y - ma*a.start.x;
          tb = b.start.y - mb*b.start.x;
          if (ma == mb) {
              // Case (CA)
              // both lines are in parallel. As we know that they 
              // intersect, the intersection could be a line
              // when we rotated this, it would be the same situation 
              // as in case (AA)

// Normalize
              if(a.start.x > a.stop.x) {
                  a = {start: a.stop, stop: a.start};
              }
              if(b.start.x > b.stop.x) {
                  b = {start: b.stop, stop: b.start};
              }
              if(a.start.x > b.start.x) {
                  var tmp = a;
                  a = b;
                  b = tmp;
              }

// get the relavant x intervall
              x1 = b.start.x;
              x2 = Math.min(a.stop.x, b.stop.x);
              y1 = ma*x1+ta;
              y2 = ma*x2+ta;
          } else {
              // Case (CB): only a point as intersection:
              // y = ma*x+ta
              // y = mb*x+tb
              // ma*x + ta = mb*x + tb
              // (ma-mb)*x = tb - ta
              // x = (tb - ta)/(ma-mb)
              x1 = (tb-ta)/(ma-mb);
              y1 = ma*x1+ta;
              x2 = x1;
              y2 = y1;
          }
      }
      // return {start: {"x":x1, "y":y1}, stop: {"x":x2, "y":y2}};
      let intersectionPoint = new Point(x1, y1);
      intersectionPoint.intersectionPoint = true;
      return intersectionPoint;
  }

static anyLineStartsWith(pt, polyLines) {    
    return polyLines.filter(x => x.start.x === pt.x && x.start.y === pt.y).length > 0;
  }
  
  /**
     * Slice a polygon by the provided intersection points
     * @param poly the polygon to slice
     * @param intersections the intersection points used for the slicing
     * @return an array of polygons that is the result of the slice
     */    
  static slice(poly, intersections) {
    // if (intersections.length <= 1) return [poly];
    if (intersections.length == 2) return this.sliceSimplePolygonIntersection( poly, intersections);
    if (intersections.length  > 2) return this.sliceComplexPolygonIntersection(poly, intersections);
    return [poly];
  }  
  
  
  static sliceSimplePolygonIntersection(poly, intersections) {
    let polyLines = poly.getLines();    
    let breakIndex = 0;
    let polyPointsA = [];
    let polyPointsB = [];
    let polys = [];  
    let polyA = undefined;
    let polyB = undefined;    
    let polyPoints = [];

// 1. insert cut points
    // 2. then iterate all points to build new lines

// rotate points until we start on an intersection  
    while(!polyPoints[0].intersectionPoint) {    
      let item = polyPoints.shift();
      polyPoints.push(item);    
    }

// time to create the bottom-piece polygon
    // logic:
    //    start at first intersectionPoint
    //    then skip all points until we find our next intersectionPoint, when we do. We take
    //    the rest of the points until we're at the starting point again. (basically, take the rest)  
    intersectionIndex = 0;
    for (let x = 0; x < polyPoints.length; x++) {
      if (polyPoints[x].intersectionPoint === true) {
        if (intersectionIndex === 0) {
          // our starting point! Add it and continue.
          polyPointsB.push(polyPoints[x].copy());
        } else {
          // alright! We're at our second intersection. Add this point
          polyPointsB.push(polyPoints[x].copy());
          // this means that we can now add polys again :)
        }
        ++intersectionIndex;
      }
      // after adding both intersection points, we are now ready to grab the rest of points!
      else if (intersectionIndex === 2) {      
        polyPointsB.push(polyPoints[x].copy());
      }
    }
    // finally, all points have been added to our bottom-piece.
    // all we have to do now is close the poly by adding starting point
    // and then lets create our polygon :)
    polyPointsB.push(polyPointsB[0].copy());  
    polyB = new Polygon(polyPointsB);
    polys.push(polyB);  
    return polys; // return the new set of polygons    
  }
  
  static sliceComplexPolygonIntersection(poly, intersections) {
    return [poly]; // not implemented, better just return same than breaking the shape.
    // to solve this one we still want to add the intersection points into the polygon.
    // .... todo
    
    
    // possible solution for having more than 2 intersection points are to first do the slice on the first two points
    // then do another slice between 2 and 3rd point.   
    // although its a bit slower than wanted. it is at least simple to follow
  }
  
  static check(a, b) {    
    let linesA = [];
    let linesB = [];
    let intersections = [];
    if (a instanceof Polygon) linesA = this.getPolygonLines(a);    
    if (a instanceof Rectangle) linesA = this.getRectangleLines(a);        
    if (a instanceof Line) linesA = [a];
    if (b instanceof Polygon) linesB = this.getPolygonLines(b);    
    if (b instanceof Rectangle) linesB = this.getRectangleLines(b);
    if (b instanceof Line) linesB = [b];    
    for (let i = 0; i < linesA.length; i++) {
      for (let j = 0; j < linesB.length; j++) {
        if (this.doLinesIntersect(linesA[i], linesB[j])) {
          let result = this.getIntersection(linesA[i], linesB[j]);         
          if (result !== undefined) {
            result.index = linesA[i].index;
            intersections.push(result);
          }
        }
      }
    }
    return intersections;
  }  
  
  static getPolygonLines(poly) {
    return poly.getLines();
  }
  
  static getRectangleLines(rect) {
    return [
      new Line(new Point(rect.left, rect.top), new Point(rect.right, rect.top)), 
      new Line(new Point(rect.right, rect.top), new Point(rect.right, rect.bottom)),
      new Line(new Point(rect.right, rect.bottom), new Point(rect.left, rect.bottom)),
      new Line(new Point(rect.left, rect.bottom), new Point(rect.left, rect.top)),
    ];    
  }
}

class Physics {
    static register(object) {
        if (!this.objects) this.objects = [];        
        this.objects.push(object);
    }
  
    static unregister(object) {
        // note: this would have been super bad if we had multiple threads..
        if (!this.objects) this.objects = [];        
        var index = this.objects.indexOf(object);       
        if (index === -1) return;
        this.objects.remove(index);        
    }
  
    static update() {
      if (!this.objects) this.objects = [];  
      for (let index = 0; index < this.objects.length; ++index) {
        let obj = this.objects[index];
        if (obj.rigidBody) this.updateRigidBody(obj.rigidBody);        
        else if (obj.collider) this.updateCollider(obj.collider);       
      }
    }

static updateRigidBody(rigidBody) {
        let isGrounded = false;
        let velX = rigidBody.velocity.x * Time.deltaTime;
        let velY = rigidBody.velocity.y * Time.deltaTime;
        if (!isNaN(velX) && !rigidBody.constraints.freezePositionX) rigidBody.gameObject.position.x += velX;
        if (!isNaN(velY) && !rigidBody.constraints.freezePositionY) rigidBody.gameObject.position.y += velY;
        // let height = rigidBody.gameObject.collider.bounds.max.y;
        let screenHeight = window.innerHeight / ctxScaleY;
        for (let i = 0; i < this.objects.length; ++i) {
            if (this.objects[i].rigidBody !== rigidBody) {
                let obj = this.objects[i];
                if (obj.collider && obj.collider.isTouching(rigidBody.gameObject.collider)) {
                    if (obj.isTrigger === true) {
                        rigidBody.gameObject.onTriggerEnter(obj.collider);
                    } else {
                        rigidBody.gameObject.onCollisionEnter(obj.collider);
                        if (rigidBody.ignoreCollisionPhysics) return;
                        // check which face of the boundingbox/collider that actually had a collision
                        // and then stop the velocity of that direction

// TODO: RayCast the sides to determine where the blockage is
                        //       and stop the velocity in that direction                      
                        
                        // NOTE: You can jump through objects that whould block your left or right if you jump towards it                      
                        if (obj.position.y + obj.offset.y >= (rigidBody.gameObject.position.y + rigidBody.gameObject.offset.y)) {
                            isGrounded = true;
                            rigidBody.velocity.y = 0;
                            rigidBody.gameObject.position.y = (obj.position.y - rigidBody.gameObject.collider.bounds.max.y) + 1;
                        } else if (obj.position.x + obj.offset.x >= rigidBody.gameObject.position.x) {
                          // collides to the right
                          // + rigidBody.gameObject.collider.bounds.max.x
                          rigidBody.gameObject.position.x -= velX;
                          rigidBody.velocity.x = 0;
                        }
                        else if (obj.position.x + obj.offset.x + obj.collider.bounds.max.x >= 
                                 rigidBody.gameObject.position.x) {
                          // collides to the right
                          // + rigidBody.gameObject.collider.bounds.max.x
                          rigidBody.gameObject.position.x -= velX;
                          rigidBody.velocity.x = 0;
                        }
                    }
                }
            }
        }
        if (!isGrounded) {
            let fall = gravity * Time.deltaTime;
            if (!isNaN(fall)) {
                rigidBody.velocity.y -= fall;
            }
        }
        else {
            if (rigidBody.force.y != 0) {
                rigidBody.velocity.y = rigidBody.force.y;
                rigidBody.force.y = 0;
            }
        }

rigidBody.isGrounded = isGrounded;
    }

static updateCollider(collider) {
        // console.log("update collider");
    }
}

class GameComponent {
    constructor() {
      this.gameObject = null;
      this.isEnabled = true;
      this.tag = '';
      this.layer = '';
    }
    setGameObject(gameObject) {
        this.gameObject = gameObject;
    }
    update() { }
    draw() { }
}

class BoundingBox {
  constructor(min = { x: 0, y: 0 }, max = { x: 0, y: 0 }) {
      this.min = min;
      this.max = max;
    }
  get delta() {
    return {
      x: this.max.x - this.min.x,
      y: this.max.y - this.min.y
    };
  }
}

class Viewport {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.width = window.innerWidth / ctxScaleX;
    this.height = window.innerWidth / ctxScaleY;    
  }
  move (xOffset, yOffset) {
    this.x += xOffset;
    this.y += yOffset;
  }
  reset() {
    this.x = 0;
    this.y = 0;
  }
}

class Camera {
  constructor() {    
    this.viewport = new Viewport();    
  }
  static getMainCamera() {
    if (!this.mainCamera) this.mainCamera = new Camera();
    return this.mainCamera;
  }
  setViewport(x, y, w, h) {
    this.viewport.x = x;
    this.viewport.y = y;
    if (w) this.viewport.width  = w;
    if (h) this.viewport.height = h;
  }
}

class FollowTarget extends GameComponent {
  constructor(target, xOffset, yOffset) {
    super();  
    this.target=target;
    this.xOffset=xOffset||0;
    this.yOffset=yOffset||0;
  }
  draw() {
    if (!this.isEnabled||!this.isVisible) return;
    super.draw();
  }
  update() {
    if (!this.isEnabled) return;
    super.update();
    if (this.target instanceof GameObject) {
      this.gameObject.position.x = this.target.position.x + this.xOffset;
      this.gameObject.position.y = this.target.position.y + this.yOffset;
    }
  }
}

class FadeOut extends GameComponent {
  constructor() {
    super();
    this.isRunning = false;
    this.value = 1.0;    
    this.duration = 5.0;
    this.timer = this.duration;    
    this.destroyObjectOnCompletion = false;
  }
  start() {    
    this.value = this.gameObject.opacity;
    this.timer = this.duration * this.gameObject.opacity;        
    this.isRunning = true;    
  }
  stop() {
    this.isRunning = false;
  }
  update() {
    if (!this.isEnabled || !this.isRunning) return;
    super.update();
    
    this.timer -= Time.deltaTime / 1000;
    this.value = 1-((this.duration - this.timer) / this.duration);
    this.gameObject.opacity = this.value;
    if (this.value <= 0.001 || this.timer <= 0) {
      if (this.onComplete) this.onComplete(this.gameObject);
      this.isRunning = false;
      this.timer = 0;
      this.gameObject.opacity = 0;
      if (this.destroyObjectOnCompletion) {
        this.gameObject.destroy();
      }        
    }

}
  draw() { 
    super.draw();
  }
}

class Mask extends GameComponent {
  constructor() {
    super();
    this.shape = undefined;    
    this.centerShape = false;
    this.drawShape = false;
    this.offset = {x:0,y:0};    
  }
  draw() {
    if (this.shape === undefined) return;
    if (this.isEnabled !== true) return;
    
    if (this.drawShape) {
      this.shape.draw();
    }
    
    let path = new Path2D();
    path.moveTo(this.shape.points[0].x, this.shape.points[0].y);
    for (let i = 1; i < this.shape.points.length; ++i) {
      path.lineTo(this.shape.points[i].x, this.shape.points[i].y);
    }    
    path.closePath();    
    ctx.clip(path, "nonzero");
  }
  update() {
    if (!this.isEnabled || !this.centerShape || !this.shape) return;
    // console.log(this.gameObject.image.src);    
    let goPos = this.gameObject.position;   
    // TODO: move path to center of sprite
    //let bb = this.shape.getBoundingBox();
    
    this.shape.moveTo(goPos.x + this.offset.x, goPos.y + this.offset.y, new Point(0, 0));
  }
}

class Collider extends GameComponent {
  constructor() {
    super();
    this.isTrigger = false;
    this.bounds = new BoundingBox();    
    this.layerMask = undefined;
  }
  isTouching(otherCollider) {
    return false;
  }
}

class PolygonCollider extends Collider {
    constructor(shape) {
      super();
      this.isTrigger = false;
      this.shape = shape;
      this.bounds = new BoundingBox();
      if (this.shape) {
        this.bounds = shape.getBoundingBox();
      }
    }
    isTouching(otherCollider) {
      if (!this.shape) return;

if (this.gameObject && otherCollider && otherCollider.gameObject) {        
        if (this.layerMask && otherCollider.layer !== this.layerMask) {          
            return false;
        }        
        if (this.bounds.max.x == 0) this.bounds = this.shape.getBoundingBox();
        
        // first check if we are inside eachother's bounding box. otherwise theres no point of checking whether they touch
        let aSize = { width: this.bounds.max.x, height : this.bounds.max.y };
        let aPos  = { x: this.gameObject.position.x + this.gameObject.offset.x, y: this.gameObject.position.y + this.gameObject.offset.y};
        let bSize = { width: otherCollider.bounds.max.x, height: otherCollider.bounds.max.y };
        let bPos  = { x: otherCollider.gameObject.position.x + otherCollider.gameObject.offset.x, y: otherCollider.gameObject.position.y + otherCollider.gameObject.offset.y};          
        if(aPos.x + aSize.width >= bPos.x
          && aPos.x <= bPos.x + bSize.width
          && aPos.y + aSize.height >= bPos.y
          && aPos.y <= bPos.y + bSize.height) {          
          let pts = otherCollider.getPoints();                  
          for(let pt of pts) {
            if (this.shape.isPointInside(pt)) return true;
          }                        
        }
      }
      return false;
    }   
  getPoints() {
    return this.shape.points;
  }
}

class BoxCollider extends Collider {
    constructor() {
      super();
      this.isTrigger = false;
      this.bounds = new BoundingBox();
    }
    isTouching(otherCollider) {
      if (this.gameObject && otherCollider && otherCollider.gameObject) {
        if (this.layerMask && otherCollider.layer !== this.layerMask) {          
            return false;
        }
        
        let aSize = { width: this.bounds.max.x, height : this.bounds.max.y };
        let aPos  = { x: this.gameObject.position.x + this.gameObject.offset.x, y: this.gameObject.position.y + this.gameObject.offset.y};
        let bSize = { width: otherCollider.bounds.max.x, height: otherCollider.bounds.max.y };
        let bPos  = { x: otherCollider.gameObject.position.x + otherCollider.gameObject.offset.x, y: otherCollider.gameObject.position.y + otherCollider.gameObject.offset.y};          
        return aPos.x + aSize.width >= bPos.x
        && aPos.x <= bPos.x + bSize.width
        && aPos.y + aSize.height >= bPos.y
        && aPos.y <= bPos.y + bSize.height;          
      }
      return false;
    }
  getPoints() {
    return [      
      new Point(this.bounds.min.x, this.bounds.min.y), new Point(this.bounds.max.x, this.bounds.min.y), 
      new Point(this.bounds.max.x, this.bounds.min.y), new Point(this.bounds.max.x, this.bounds.max.y),
      new Point(this.bounds.max.x, this.bounds.max.y), new Point(this.bounds.min.x, this.bounds.max.y),
      new Point(this.bounds.min.x, this.bounds.max.y), new Point(this.bounds.min.x, this.bounds.min.y),            
    ];
  }
}

class BoxRenderer extends GameComponent {
    constructor() {
        super();
        this.size = { width: 0, height: 0 };
    }
    draw() { 
      if (this.isEnabled !== true) return;
      let camera = Camera.getMainCamera();
      ctx.save();
      ctx.beginPath();
      ctx.rect(
        camera.viewport.x + this.gameObject.position.x, 
        camera.viewport.y + this.gameObject.position.y, 
        this.size.width, 
        this.size.height);        
      ctx.strokeStyle = 'Red';
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
    }
}

class RigidBody extends GameComponent {
    constructor() {
        super();
        this.velocity = { x: 0, y: 0 };
        this.force = { x: 0, y: 0 };  
        this.isStatic = false;        
        this.isGrounded = false;
        this.constraints = { freezePositionX: false, freezePositionY: false };
        this.ignoreCollisionPhysics = false;
    }
}

class GameObject {
    constructor() {
        this.position = { x: 0, y: 0 };
        this.rotation = 0;
        this.opacity = 1;
        this.isEnabled = true;
        this.isVisible = true;
        this.rigidBody = null;
        this.collider = null;
        this.renderer = null;
        this.parent   = null;
        this.isDestroyed = false;
        this.components = [];
        this.children   = [];
        this.name = '';
        this.tag = '';
        this.layer = '';
        this.offset = {x:0, y:0};        
        Physics.register(this);
    }  
  
    // get localPosition() {      
    getLocalPosition() {
      if (this.parent !== null) {
        return {
          x: this.position.x - this.parent.position.x,
          y: this.position.y - this.parent.position.y
        };
      }
      
      return {
        x: this.position.x,
        y: this.position.y
      };      
    }
  
    //set localPosition(value) {
    setLocalPosition(x, y) {
      if (this.parent !== null) {
        this.position = {
          x: this.parent.position.x + x,
          y: this.parent.position.y + y
        };
        return;
      }
      
      this.position = {
        x: value.x,
        y: value.y
      };      
    }
    
    destroy() {
      if (this.isDestroyed) return;
      this.isDestroyed = true;
      Physics.unregister(this);
      if (this.parent) {       
        this.parent.removeChild(this);
      }
    }    
    addComponent(component) {
      this.components.push(component);
      component.setGameObject(this);
      return component;
    }
    addChild(gameObject) {
      this.children.push(gameObject);
      gameObject.setParent(this);
      return gameObject;
    }
  
    removeChild(gameObject) {
      let index = this.children.indexOf(gameObject);
      gameObject.setParent(null);      
      this.children.remove(index);
    }
    getComponent(name) {
      for(let child of this.components) {
        if (child.constructor.name == name) {
          return child;
        }
      }
      return undefined;
    }
    setParent(gameObject) {
      this.parent = gameObject;
    }
    setRenderer(renderer) {
      if (this.renderer) {
        var index = this.components.indexOf(this.renderer);                   
        this.components.remove(index);
      }
      this.renderer = renderer;
      this.addComponent(this.renderer);
    }
    setRigidBody(rigidBody) {
      if (this.rigidBody) {
        var index = this.components.indexOf(this.rigidBody);                   
        this.components.remove(index);
      }
      this.rigidBody = rigidBody;
      this.addComponent(this.rigidBody);
    }
    setCollider(collider) {
      if (this.collider) {            
        var index = this.components.indexOf(this.collider);                   
        this.components.remove(index);          
      }
      this.collider = collider;
      this.addComponent(this.collider);
    }
    update() {   
      for(let i = 0; i < this.components.length; ++i) {
        this.components[i].update();
      }      
      for(let i = 0; i < this.children.length; ++i) {
        this.children[i].update();
      }
    }
    draw() {             
      for(let i = 0; i < this.components.length; ++i) {
        this.components[i].draw();
      }      
      for(let i = 0; i < this.children.length; ++i) {
        this.children[i].draw();
      }
    }
    onCollisionEnter(collider) { }
    onTriggerEnter(collider) { }
}

class ParticleSystem extends GameObject {
  constructor() {    
    super();
    this.isLooping = false;
    this.isEmitting = false;    
    this.startSize = 1;
    this.startDelay = 0;
    this.startSpeed = 5;
    this.startColor = "red";
    this.startLifetime = 1;
    this.startTime = 0;
    this.duration = 1.0;
    this.timer = this.duration;
    this.maxParticleCount = 10;
  }
  update() {
    if (!this.isEnabled) return;    
    super.update();
    // pass-1 update whether we should continue to emit particles
    if (this.isEmitting) {
      this.timer -= Time.deltaTime/1000;       
      if (this.timer <= 0) {
        this.timer = this.isLooping ? this.duration : 0;
        // if its still 0, then stop the emitting
        this.isEmitting = this.timer > 0;
      }
    }    
    // if we are still emitting, keep adding those particles!
    if (this.isEmitting) {
      this.addParticle();
      this.updateParticles();
    }
  }  
  addParticle() {
    if (this.children.length >= this.maxParticleCount) return;
    let velocity = new Point((Math.random()*0.5)-0.25, Math.random()*0.2); 
    let particle = new Particle(this.position.x, this.position.y, this.startLifetime, velocity, this.startColor, (Math.random() * 3)+1);
    this.addChild(particle);
  }  
  updateParticles() {
    let toRemove = this.children.filter(x => x.lifetime <= 0 || x.position.y >= canvas.height);    
    toRemove.forEach(x => x.destroy());
  }  
  destroyParticles() {
    let toRemove = [];    
    this.children.forEach(x => toRemove.push(particle));
    toRemove.forEach(x => x.destroy());
  }  
  draw() {
    if (!this.isEnabled) return;
    super.draw();
  }
  start() {
    this.destroyParticles();
    this.isEmitting = true;
    this.timer = this.duration;
    this.startTime = Time.time;
  }
  stop() {
    this.isEmitting = false;
  }  
  get particleCount() {
    return children.length;
  }
}

class Particle extends GameObject {
  constructor(startX, startY, life, velocity, color, size) {
    super();
    const rigidBody = new RigidBody();    
    rigidBody.velocity.x = velocity.x;
    rigidBody.velocity.y = velocity.y;
    this.size = size;
    this.color = color;
    this.lifetime = life;
    this.setRigidBody(rigidBody);        
    this.position.x = startX;
    this.position.y = startY;
  }
  update() {
    if (!this.isEnabled) return;
    super.update();
    this.lifetime -= Time.deltaTime/1000;
  }
  draw() {
    if (!this.isEnabled || !this.isVisible) return;
    super.draw();
    ctx.save();
    // console.log("draw particle at: " + this.position.x + "," + this.position.y);
    drawCircle(this.position.x, this.position.y, this.color, this.size);
    ctx.restore();    
  }
}

class Animation {
    constructor(name, interval = 150.0, animationFrames = [], playOnce = false, canInterrupt = true) {
        this.name = name;
        this.updateInterval = interval;
        this.playOnce = playOnce;
        this.interruptable = canInterrupt;
        this.isPlaying = false;
        this.updateTimer = 0.0;
        this.frameIndex = 0;
        this.frames = animationFrames;
    }

update() {
        if (!this.isPlaying) return;
        if (this.frameIndex + 1 >= this.frames.length && this.playOnce) {
            this.isPlaying = false;
            this.frameIndex = 0;
            return;
        }
        this.updateTimer += Time.deltaTime;
        if (this.updateTimer >= this.updateInterval) {
            this.updateTimer = 0.0;
            let targetFrameIndex = (this.frameIndex + 1) % this.frames.length;
            let frame = this.getCurrentFrame();
            if (frame) {
                if (!frame.continueWhen) {
                    this.frameIndex = targetFrameIndex;
                    return;
                }
                if (frame.continueWhen() === true) {
                    this.frameIndex = targetFrameIndex;
                }
            }
        }
    }
  
    play() { this.isPlaying = true; }  
  
    stop() { this.isPlaying = false; }  
    
    addFrame(frame) { this.frames.push(frame); }
  
    addFrames(framesToAdd) {
        for (let i = 0; i < framesToAdd.length; ++i) {
            this.addFrame(framesToAdd[i]);
        }
    }      
  
    getCurrentFrame() {
        if (this.frames.length === 0) {
            return null;
        }
        return this.frames[this.frameIndex];
    }
    getFrameAt(index) {
        if (this.frames.length === 0 || index >= this.frames.length) {
            return null;
        }
        return this.frames[index];
    }
}

class AnimationFrame {
    constructor(x, y, width, height, continueWhen) {
      this.position = { x: x, y: y };
      this.size = { width: width, height: height };
      this.continueWhen = continueWhen;
    }
}

class Button extends GameObject {
  constructor() {
    super();
    this.states = [];
    this.states["default"] = {callbacks: []};    
    this.states["hover"]   = {callbacks: []};
    this.states["active"]  = {callbacks: []};  
    this.states["click"]  = {callbacks: []};      
    this.state = "default";
    this.borderOnInside = false;
    this.width = 150;
    this.height = 50;
    this.text = "Button 1";
    this.fontSize = 16;
    this.fontColor = Color.getWhite();
    this.font = "arial";
    this.background = new Color(255, 0, 0);
    this.border = new Color(0, 255, 0);
    this.borderWidth = 1;
    this.doubleBorder = false;
    this.doubleBorderDistance = 5;
    this.content = undefined; // appoint a gameobject and it will draw it as content :-)
    this.contentScale = 1.0;
    this.contentMargin = {top:0,left:0,right:0,bottom:0};
  }
  draw() {
    if (!this.isEnabled || !this.isVisible) return
    super.draw();
    
    this.drawButtonBase();    
    this.drawContent();
    this.drawText();    
  }
  
  drawButtonBase() {
    let fill   = this.background;
    let stroke = this.border;    
    switch (this.state) {
      case "hover":        
        fill   = fill.darker(22);
        stroke = stroke.darker(22);
        break;
      case "active":
        fill   = fill.darker(44);
        stroke = stroke.darker(44);
        break;
    }
    
    const bw =ctx.lineWidth;
    const fs =ctx.fillStyle;
    const ss =ctx.strokeStyle;
    
    ctx.save();    
    ctx.beginPath();
    ctx.lineWidth = this.borderWidth;
    ctx.fillStyle = fill.rgba();
    ctx.strokeStyle = stroke.rgba();
    ctx.rect(this.position.x, this.position.y, this.width, this.height);
    ctx.fill();
    
    if (this.borderOnInside === true) {
      ctx.beginPath();
      ctx.rect(this.position.x + this.borderWidth/2, 
               this.position.y + this.borderWidth/2, 
               this.width   - (this.borderWidth), 
               this.height  - (this.borderWidth));
    }
    ctx.stroke();
    
    if(this.doubleBorder === true) {
       const bd = this.doubleBorderDistance;
      ctx.beginPath();
    ctx.lineWidth = this.borderWidth;
    ctx.fillStyle = fill.rgba();
    ctx.strokeStyle = stroke.rgba();
    ctx.rect(this.position.x + bd, this.position.y + bd, this.width - bd*2, this.height - bd*2);
    ctx.fill();
    ctx.stroke();
  }
    
    
    ctx.restore();
    
    ctx.lineWidth = bw;
    ctx.fillStyle = fs;
    ctx.strokeStyle =ss;
  }
  
  drawContent() {
    if (!this.content) return;
    ctx.save();
        
    
    let x = this.position.x + this.contentMargin.left;
    let y = this.position.y + this.contentMargin.top;
    
    ctx.translate(x, y);
    ctx.scale(this.contentScale,this.contentScale);

this.content.draw();
    ctx.restore();
  }
  
  drawText() {
    if (!this.text || this.text.length === 0) return;
    ctx.save();
    ctx.font = this.fontSize + "px " + this.font;    
    const size = ctx.measureText(this.text);    
    ctx.fillStyle = this.fontColor.rgba();
    ctx.fillText(this.text, this.position.x + (this.width / 2 - size.width/2), (this.position.y + this.fontSize) + (this.height/2 - this.fontSize/2));
    ctx.restore();
  }
  
  update() {
    if (!this.isEnabled) return;
    super.update();
    let oldState = this.state;
    let click = false;
    if (mouse.x >= this.position.x && mouse.x <= this.position.x + this.width &&
       mouse.y >= this.position.y && mouse.y <= this.position.y + this.height) {
      if (mouse.leftButton) {
        if (this.state !== "active") {
          this.state = "active";
        }
      } else {
        if (this.state !== "hover") {
          this.state = "hover";
          click = oldState === "active";
        }
      }
    } else if(this.state !== "default") {
      this.state = "default"
    }
    if (oldState !== this.state) {
      this.states[this.state].callbacks.forEach(x => x());      
      if (click) this.states["click"].callbacks.forEach(x => x());      
    }
  }
  
  on(state, callback) {
    this.states[state].callbacks.push(callback);
  }
}

class Sprite extends GameObject {
  constructor(img) {
    super();
    this.image = img;
    this.width= -1;
    this.height=-1;
    this.imageOffset = {x:0,y:0};
    this.scale = {x:1,y:1};    
    this.origin = {x:0,y:0};    
    this.isTiledRepeat = false;
  }
  static fromUrl(src) {
    const spriteImg = new Image();
    spriteImg.src = src;
    return new Sprite(spriteImg);
  }
  update() {
    if (!this.isEnabled) return;
    super.update();
  }  
  draw() {    
    if (!ctx || !this.isVisible || !this.isEnabled || !this.image) return;   
    
    ctx.save();
    super.draw();
    // ctx.restore();
    
    const w = this.image.width;
    const h = this.image.height;
    const cols = Math.floor(this.width / w) + 1;
    const rows = Math.floor(this.height / h) + 1;
    
    if (this.isTiledRepeat && !isNaN(cols) && !isNaN(rows) && cols > 0 && rows > 0 && cols < 1920 && rows < 1080) {  
      for(let x = 0; x < cols; x++) {
        for(let y = 0; y < rows; y++) {
          ctx.drawImage(this.image, x * w, y * h);
        }
      }
    } else {   
      let camera = Camera.getMainCamera();        
      if (this.width  <= 0) {
        this.width = this.image.width;
        this.height = this.image.height;
      }

const scaledWidth = this.width * this.scale.x;
      const scaledHeight = this.height * this.scale.y;    
      const bb = this.getBoundingBox();    
      const dx = this.origin.x > 0 ? -((bb.max.x - bb.min.x) * this.origin.x) : 0;
      const dy = this.origin.y > 0 ? -((bb.max.y - bb.min.y) * this.origin.y) : 0;     
      const renderX = camera.viewport.x + this.position.x + this.offset.x + this.imageOffset.x + dx;
      const renderY = camera.viewport.y + this.position.y + this.offset.y + this.imageOffset.y + dy;

// ctx.save();
      ctx.globalAlpha = this.opacity;

if (this.rotation !== 0) {
        ctx.translate(renderX-dx, renderY-dy);
        ctx.rotate(this.rotation * Math.PI/180.0);
        ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height, dx, dy, scaledWidth, scaledHeight);      
      } else {

ctx.drawImage(
          this.image,
          0,
          0,
          this.image.width,
          this.image.height,
          renderX,
          renderY,
          scaledWidth,
          scaledHeight);
      }    
    }
    
    ctx.restore(); // do restore again as we saved our context the first thing we did.
  } 
  getBoundingBox() {
    return new BoundingBox(
      new Point(this.position.x, this.position.y),
      new Point(this.position.x + (this.width * this.scale.x), this.position.y + (this.height * this.scale.y))
    ); 
  }
}

class AnimatedSprite extends GameObject {
    constructor(spritesheet) {
      super();
      this.spritesheet = spritesheet;
      this.animations = [];
      this.currentAnimation = null;
      this.flipHorizontal = false;
      this.flipVertical = false;
    }
    addAnimation(animation) {
      this.animations.push(animation);
    }
    playAnimation(key) {
      if (this.currentAnimation) {
        if (!this.currentAnimation.interruptable && this.currentAnimation.isPlaying) {
          return;
        }
        this.currentAnimation.stop();
      }
      let targetAnimation = this.animations.find(x => x.name == key);
      this.currentAnimation = targetAnimation;
      this.currentAnimation.play();
    }
    update() {
      if (!this.isEnabled) {
        return;
      }
      if (this.currentAnimation) {
        this.currentAnimation.update();
      }
      super.update();
    }
    draw() {
      if (!ctx || !this.isVisible || !this.isEnabled || !this.currentAnimation)
        return;      
      let frame = this.currentAnimation.getCurrentFrame();
      if (!frame) return;     
      ctx.save();     
      super.draw();  
      if (this.collider) this.offset.x = (this.collider.bounds.max.x/2);       
      let camera = Camera.getMainCamera();       
      if (this.flipHorizontal) {
        ctx.translate(camera.viewport.x + (this.position.x + this.offset.x + this.collider.bounds.max.x), this.position.y);
        ctx.scale(-1, 1);
      } else {          
        ctx.translate(this.position.x + ((-this.offset.x)+this.collider.bounds.max.x), this.position.y);
      }              
      ctx.globalAlpha = this.opacity;
      ctx.drawImage(
        this.spritesheet,
        frame.position.x,
        frame.position.y,
        frame.size.width,
        frame.size.height,
        this.flipHorizontal ? 0 : camera.viewport.x,
        camera.viewport.y,
        frame.size.width,
        frame.size.height);
      ctx.restore();
    }
}

class Scene extends GameObject {
  constructor() {
    super();
  }
  update() {
    super.update();
  }
  draw() {
    super.draw();
  }
}

function getMousePos(element, evt) {
  var rect = element.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

function getTouchPos(canvas, evt) {
  var rect = element.getBoundingClientRect();
  return {
    x: evt.touches[0].clientX - rect.left,
    y: evt.touches[0].clientY - rect.top
  };  
}

function run(time) {  
  Time.deltaTime = (time - Time.time) * Time.timeScale;
  Time.deltaTimeUnscaled = time - Time.time;  
  Time.time = time;
  Physics.update();
  if(onUpdate) onUpdate();
  if(onDraw) onDraw();  
  Time.frameCount++;
  window.requestAnimationFrame(run);  
}

function mouseMove(evt) {
  let pos = getMousePos(canvas, evt);
  mouse.x = pos.x;
  mouse.y = pos.y;
}

function touchMove(evt) {
  evt.preventDefault();
  let pos = getTouchPos(canvas, evt);
  mouse.x = pos.x;
  mouse.y = pos.y;
}

function mouseDown(evt) {
  if (evt.button === 0) mouse.leftButton = true;  
  if (evt.button === 1) mouse.rightButton = true;  
  if (evt.button === 3) mouse.middleButton = true;
}

function mouseUp(evt) {
  if (evt.button === 0) mouse.leftButton = false;  
  if (evt.button === 1) mouse.rightButton = false;  
  if (evt.button === 3) mouse.middleButton = false;  
}
</script>

tile map editor

h5, editor, map

编辑器支持Emmet

快捷键

tile map editor

h5, editor, map

HTML5 Canvas交互式三维地图编辑器

HTML5/Three.js 3D地形高度图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：