DK Test

by Sam Fereday

HTML

<div id="output"></div>

CSS

.gs {
  width: 32px;
  height: 32px;
  float: left;
  border: 1px solid #ccc;
}

.row {
  width: 100%;
  clear: both;
}

.gs.wall {
  background: #222;
}

.gs.soil {
  background: #777;
}

.gs.claimed {
  background: #444;
}

.gs.selected {
  background: #fff;
}

JavaScript

/*
So this might be how you'd deal with digging walls out and whatnot. Now all that needs to be done is to actually use some pathfinding and make it all interesting. From this point our assumption will simply be that the dungeon hasn't even been build yet of course. This we can change later using some nifty generators such as ROT. Since we're using 1x1 scale, ROT will pretty much be ideal for this sort of thing thankfully.
Beautifully, this stuff can all be placed in to stuff like Unity and whatever else in future. So got a good feeling about it. Only hard part would be getting to multiplayer, but, again, that's for waaaay later.
*/

// Main app
var output = document.getElementById("output");
var x = 6;
var y = 6;
var grid = [];

var types = {
	selected: 0,
	wall: 1,
  soil: 2,
  claimed: 3,
  enemyClaimed: 4
}

function gridGet(x, y) {
	return grid.find(function(sq){
  	return sq.x === x && sq.y === y;
  })
}

function updateGrid() {
	// Work out tile scores
  grid.forEach(function(tile){

    var x = tile.x,
    y = tile.y;

    tile.tileScore = calculateTileIndex(gridGet(x, y - 1), gridGet(x, y + 1), gridGet(x - 1, y), gridGet(x + 1, y));

  });
}

// Should only run once!
function placeHole() {

	// We only want one area to start in
	var placed = false;
  
  // Assume we've placed these coords at a valid position (set later by player start in map editor)
  var startX = 2;
  var startY = 2;

	grid.forEach(function(tile){

    if(tile.x === startX && tile.y === startY && tile.tileScore !== 16 && !placed) {
	    placed = true;
    	tile.tileScore = 0;
      tile.type = types.claimed;
      tile.el.className = "gs claimed";
    }

  });
  
  updateGrid();

}

var GridSquare = function(){

	this.diggable = false;

	this.tileScore = 0;
	this.type = types.wall;
  this.x = -1;
  this.y = -1;
  
	this.el = document.createElement("div");
  this.el.className = "gs wall";
  
 	var self = this;
  
  this.el.addEventListener('click', function(e){
		
    if(this.type !==...