JSFiddle - React, Tailwind, and code Playground

by szivak009

JavaScript

/* Let's have some fun with tiles */

/*
 * Specification
 * 
 * I'm developing a 2D game and the game is created from 2D graphics. Map will also based on 2D
 * graphics, so it means I will implement a 2D tile based multilayer map.
 * Objects (tables, desks, houses) are seperated from map generation.
 * 
 * Tiles are multilayered. Bottom layer is for example sand, and the second layer is dust on it and there is an object layer. Objacts can be anything such as:
 * - complete rock objects placed together
 * - houses
 * - stairs, towers etc
 *
 * Tile texture ids:
 * 0 - empty
 *
 *
 * 
 * So, map structure (also xml) looks like this:
 * - Map properties
 * - Tiles list
 * - Object list and object properties (animated, event triggering)
 * - Boundaries (no-go places, triggers, etc)
 *
 * Map directory structure
 * maps/<mapname>/<mapname>.xml
 * maps/<mapname>/images/
 * maps/<mapname>/sounds/
 * maps/<mapname>/scripts/
 *
 *
 *
 *
 *
 */

// Remove self executing function and rewrite it to singleton!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

var map = (function(opts){

    if(opts === undefined) opts = {};
    
    /* No engine :S */
    if(opts.engine === undefined) return false;
    
    var mapSys = function(opts){
        
        var _self = this;
        
        var baseUrl = opts.baseUrl;
        
        /* Tile, basic element of map */
        var tile = function(obj) {
            if(obj === undefined) obj = {};
            
            var texId = [];
            var x = obj.x === undefined ? 0 : obj.x;
            var y = obj.y === undefined ? 0 : obj.y;
            var w = obj.w === undefined ? 0 : obj.w;
            var h = obj.h === undefined ? 0 : obj.h;
        };
        
        /* default map settinsg */
        var _default = {
            name : '',
            version : '',
            width : 0,
            height : 0,
            tiles : [],
            objects : []
        };
        
        /* actually loaded map */
        var _map = $.extend(true,...