JSFiddle - React, Tailwind, and code Playground

by path411

HTML

<div id="Screen">
    
    
    <canvas id="Screen-Background"></canvas>
    <canvas id="Screen-Foreground"></canvas>
    <canvas id="Screen-Main"></canvas>
</div>

CSS

canvas {
    width:500px;
    height:500px;
    position:absolute;
}

#Screen {
    position:relative;
    width:500px;
    height:500px;
}

JavaScript

// Global functions

function Random(min, max) {
    return (Math.random() * ((max - min) + 1)) + min | 0;
}

function NewCanvas() {
    return document.createElement('canvas');
}


// Setup
var Screen = {
    Main : document.getElementById('Screen-Main').getContext('2d'),
    Background: document.getElementById('Screen-Background').getContext('2d'),
    Foreground: document.getElementById('Screen-Foreground').getContext('2d')
};

Screen.Main.canvas.width = 500;
Screen.Main.canvas.height = 500;

var Settings = {
    GridSize: 20
};

// CharacterClass Data
var CharacterClasses = {
    "Knight": {
        "Name": "Knight",
        "Skills": [
            {
                "Name": "Bash",
                "Range": 1,
                "TargetType": "Single",
                "CastTime": 0,
                "CoolDown": 5,
                "Events": [
                    {
                        "Type": "Damage",
                        "Source": "Self",
                        "Target": "Target",
                        "RequireHit": true,
                        "DamageStat": "AttackPhysical",
                        "ArmorStat": "ArmorPhysical",
                        "DamageMultiplier": 1.2
                    },
                    {
                        "Type": "StatusEffect",
                        "Source": "Self",
                        "Target": "Target",
                        "RequireHit": true,
                        "StatusEffect": "Stun",
                        "Duration": 2                        
                    }
                ]
            }   
        ]
    }
};



// Data Models
var Models = {};
Models.Player = function(playername) {
    this.PlayerName = playername;
}

Models.Game = function() {
    this.Player1 = new Models.Player("Ben");
    this.Player2 = new Models.Player("Dan");
}

Models.GameSession = function() {
}

Models.Character = function() {
    this.Level = 1;
    this.HealthMax = 20;
    this.HealthCurrent = 20;
   ...