JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="game"></canvas>

JavaScript

'use strict';

class Map { 
	constructor(x, y, width, height, container) {
		this.x = x;
		this.y = y;
		this.width = width;
		this.height = height;
		this.ctx = container.getContext('2d');
		this.grid = [];
		
		container.width = x * width;
		container.height = y * height;
		
		this.states = {
			grass: {
				name: 'grass',
				passability: true,
				destructible: false,
				pattern: 'green'
			},
			wall: {
				name: 'wall',
				passability: false,
				destructible: true,
				pattern: 'gray'
			},
			hq: {
				name: 'hq',
				passability: false,
				destructible: true,
				pattern: 'yellow'
			},
			water: {
				name: 'water',
				passability: false,
				destructible: false,
				pattern: 'blue'
			},
			wood: {
				name: 'wood',
				passability: true,
				destructible: false,
				pattern: 'brown',
				slowdown: 0.5
			}
		};
		
		this._DEFAULT_STATE = this.states.grass;
	}
	makeGrid() {
		for (let x = 0; x < this.x; x++) {
			this.grid[x] = [];
			
			for(let y = 0; y < this.y; y++) {
				this.grid[x][y] = this._DEFAULT_STATE.name;
			}
		}
	}
	render() {
		for (let x = 0; x < this.x; x++) {
			for(let y = 0; y < this.y; y++) {
				this.ctx.fillStyle = this.states[this.getState(x, y)].pattern;
				this.ctx.fillRect(this.width * x, this.height * y, this.width, this.height);
				this.ctx.strokeRect(this.width * x, this.height * y, this.width, this.height);
			}
		}
	}
	setState(x, y, state) {
		if (this.states.hasOwnProperty(state)) {
			this.grid[x][y] = state;
		}
		else {
			alert('ERROR: Undefined state');
		}
	} 
	getState(x, y) {
		return this.grid[x][y];
	}
}

let map = new Map(11, 11, 50, 50, document.querySelector('#game'));

map.makeGrid();
// player 1 base
map.setState(4, 0, 'wall');
map.setState(4, 1, 'wall');
map.setState(5, 1, 'wall');
map.setState(6, 1, 'wall');
map.setState(6, 0, 'wall');
map.setState(5, 0, 'hq');

//player 2 base
map.setState(4, 10, 'wall');
map.setState(4, 9, 'wall');
map.setState(5, 9, 'wall');
map.setState(6, 9,...