JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id="main" width=500 height=500></canvas>

JavaScript

const S = 50;
const W = 10;
const H = 10;


class Pos{
	constructor(x, y) {
    	this.x = x;
        this.y = y;
    }
    
    distTo({x, y}) {
    	return Math.sqrt((this.x-x)**2 + (this.y-y)**2);
    }
    
    minus({x, y}) {
    	return new Pos(this.x-x, this.y-y);
    }
    
    plus({x, y}) {
    	return new Pos(this.x+x, this.y+y);
    }
    
    times(f) {
    	return new Pos(this.x*f, this.y*f);
    }
    
    mag() {
    	return Math.sqrt(this.x**2 + this.y**2);
    }
    
    unit() {
    	const m = this.mag();
    	return new Pos(this.x/m, this.y/m);
    }
}

class World{
	constructor() {
    	this.monsters = [];
        this.towers = [];
        this.map = `
        	0 0 0 0 0 0 0 0 0 0
        	0 1 0 0 0 0 1 1 1 0
        	0 1 0 0 1 1 1 0 1 0
        	0 1 0 0 1 0 0 0 1 0
        	0 1 0 0 1 0 0 0 1 0
        	0 1 0 0 1 1 0 0 1 1
        	0 1 1 0 0 1 0 0 0 0
        	0 0 1 0 0 1 0 0 0 0
        	0 0 1 1 1 1 0 0 0 0
        	0 0 0 0 0 0 0 0 0 0
        `.split('\n')
        .reverse()
        .map(r => r.trim())
        .filter(r => r.length)
        .map(r => r.split(' ').map(c => +c));
        
        
        this.monsters.push(new Monster(this.getPath()));
    }
    
    getPath() {
    	// returns an array of Pos's
        return [
        	new Pos(10.5, 4.5),
        	new Pos(8.5, 4.5),
        	new Pos(8.5, 8.5),
        	new Pos(6.5, 8.5),
        	new Pos(6.5, 7.5),
        	new Pos(4.5, 7.5),
        	new Pos(4.5, 4.5),
        	new Pos(5.5, 4.5),
        	new Pos(5.5, 1.5),
        	new Pos(2.5, 1.5),
        	new Pos(2.5, 3.5),
        	new Pos(1.5, 3.5),
        	new Pos(1.5, 8.5),
        ];
    }
    
    render() {
    	const ctx = document.getElementById('main').getContext('2d');
        ctx.setTransform(1, 0, 0, -1, 0, H*S);
        ctx.clearRect(0, 0, W*S, H*S);
        
    	for(let x=0; x<W; x++) {
        	for(let y=0; y<H; y++) {
            	let type = this.map[y][x];
                ctx.fillStyle = ['#7c6', '#b85'][type];
   ...