JSFiddle - React, Tailwind, and code Playground

by Admiral Potato

HTML

<script src="https://raw.github.com/AdmiralPotato/npos3d/master/src/core.js"></script>
<script src="https://raw.github.com/AdmiralPotato/npos3d/master/src/geom.circle.js"></script>
<script src="https://raw.github.com/AdmiralPotato/npos3d/master/src/utils.color.js"></script>
<script src="https://raw.github.com/AdmiralPotato/npos3d/master/src/fx.explosion.js"></script>

JavaScript

var n = NPos3d;
var scene = new n.Scene();

var bugList = [];

var Bug = function(args) {
	var t = this, type = 'Bug';
	if(t.type !== type){throw type + ' constructor requires the use of the `new` keyword.';}
	args = args || {};
	n.blessWith3DBase(t,args);
    t.vel = [2,0,0];
    t.health = 10;
    bugList.push(t);
	s.add(t);
};

Bug.prototype = {
	type: 'Bug',
	shape: n.Geom.cube,
    color: '#f00',
    points: 10,
    money: 5,
	update: function() {
		var t = this, fac;
		t.rot[0] += deg;
        
		t.pos[0] += t.vel[0];
		t.pos[1] += t.vel[1];
		t.pos[2] += t.vel[2];
        
		fac = (Math.sin(t.rot[0]) * 0.25) + 1;

        t.scale[0] = t.scale[1] = t.scale[2] = fac;
		t.render();
	},
    onRemove: function() {
        var index = bugList.indexOf(this);
        bugList.splice(index, 1);
    }
};

var developerRadiusConfig = {
    shape: new n.Geom.Circle({
        radius: 1
    }),
    color: '#990'
};


var developerList = [];
var Developer = function(args) {
	var t = this, type = 'Developer';
	if(t.type !== type){throw type + ' constructor requires the use of the `new` keyword.';}
	args = args || {};
	n.blessWith3DBase(t,args);
    t.age = 0;
    t.radiusDisplay = new n.Ob3D(developerRadiusConfig);
    t.add(t.radiusDisplay);
    developerList.push(t);
    s.add(t);
};

Developer.prototype = {
	type: 'Developer',
	shape: n.Geom.cube,
    color: '#0f0',
    attackRange: 100,
    attackPower: 5,
    attack: function(target) {
        target.health -= this.attackPower;
        if(target.health <= 0){
            target.destroy();
            
        }
    },
	update: function() {
		var t = this,
            i,
            len = bugList.length,
            bug;
        for(i = 0; i < len; i += 1) {
            bug = bugList[i];
            if(bug)
        }
        t.radiusDisplay.scale[0] = t.radiusDisplay.scale[1] = t.radiusDisplay.scale[2] = t.attackRange;
        
        t.render();
	}
};

var codeBase = new n.Ob3D({
    color: '#00f',
    scale:...