Simpsons Dig

by Laurens Maneschijn

HTML

<div>
	<button id="restart">restart</button>
	gamecnt        : <span id="gamecnt"></span>
	explorecount   : <span id="explorecount"></span>
	exploretotal   : <span id="exploretotal"></span>
	exploreaverage : <span id="exploreaverage"></span>
</div>
<div id="main"></div>

	<p>
		The Simpsons Tapped Out has a simple minigame in it, where one needs to dig up gems.
		There is 1 cell with gems in it, in a random cell anywhere in a 6 by 6 field.
		A gem has a hint rock north,south,east and west of it. Each dig costs 1 shovel.
	</p>
	<p>
		As an experiment, I wanted to figure out the most efficient way to get to the gems, so I made a simulator.
		My current average is about 6.8 moves over 100 seperate games.
	</p>

CSS

#main {
	background-color:#eee;
}

.field {
	display: inline-block;
	box-sizing: border-box;
	width:  300px;
	height: 300px;
	width:  50%;
	height: 50%;
	width:  60vw;
	height: 60vw;
	background-color: #cfc;
	outline: 2px solid #0f0;
}
.cell {
	display: inline-block;
	box-sizing: border-box;
	width:  50px;
	height: 50px;
	width:  16.66%;
	height: 16.66%;
	width:  10vw;
	height: 10vw;
	background-color: #afa;
	border: 2px solid #cfc;
	line-height:50px;
	text-align: center;
}
.cell:hover{
	background-color: #bfb;
	border: 2px solid #ccf;
	z-index:2;
}
.cell.explored{
	border-style: inset;
	background-color: #bbb;
}
.cell.explored.near{
	background-color: #888;
}
.cell.explored.gem{
	background-color: #fd8;
}

.cell::before{
	display: inline-block;
	width:100%;
	text-align:center;
}
.cell.unexplored::before{
	content:'?';
}
.cell.explored::before{
	content:'-';
}
.cell.explored.near::before{
	content:'near';
}
.cell.explored.gem::before{
	content:'gem';
}

JavaScript

////////// FIELD

function Field(parent, $target){
	this.parent = parent;
	this.cells = [];
	this.cellsmap = {};
	this.$target = $target;
	this.$field = null;
	this.init();
}
Field.prototype.init = function(){
	this.createcells();
	this.draw();
}
Field.prototype.draw = function(){
	this.$target.empty();
	this.$field = $(`<div id="field" class="field">`);
	this.$field.appendTo(this.$target);
	$.each(this.cells, function(i, cell){
		cell.draw();
	});
}
Field.prototype.createcells = function(){
	var y,x,i,cell;
	this.cells = [];
	i=0;
	for(y=1; y <= 6; y++){
		for(x=1; x <= 6; x++){
			cell = new Cell(this, i,x,y);
			this.cells[i] = cell;
			this.cellsmap[x + '_' + y] = cell;
			i++;
		}
	}
}
Field.prototype.getCell = function(x,y){
	if(y===undefined){
		return this.cells[x];
	}
	return this.cellsmap[x + '_' + y];
}

////////// CELL

function Cell(parent, i,x,y){
	this.parent = parent;
	this.i = i;
	this.x = x;
	this.y = y;
	this.$cell = null;
	this.near = false;
	this.gem = false;
}
Cell.prototype.draw = function(){
	var $c, x = this.x, y = this.y, i = this.i;
	$c = $('<div>');
	$c.attr('id','cell_' + i);
	$c.addClass('cell');
	$c.addClass('unexplored');
	$c.data('i',i);
	$c.data('x',x);
	$c.data('y',y);
	var that = this;
	$c.bind('click', function(e){
//		$c.toggleClass('unexplored');
//		$c.toggleClass('explored');
		if($c.hasClass('unexplored')){
			$c.removeClass('unexplored');
			$c.addClass('explored');
			that.parent.parent.dig(that);
		} else {
			// ?
		}
		
	});
	this.$cell = $c;
	$c.appendTo(this.parent.$field);
}

////////// GAME

function Game(){
	this.field = null;
	this.gamecnt = 0;
	this.explorecount = 0;
	this.exploretotal = 0;
	this.exploreaverage = 0;
	this.gemfound = false;
}
Game.prototype.dig = function(cell){
	this.explorecount++;
	$('#explorecount').text(this.explorecount);
	if(cell.gem){
		this.gemfound = true;
	}
}

Game.prototype.restart = function(){
	if(this.explorecount && this.gemfound){
		this.gamecnt++;
		this.exploretotal +=...