CHOMP GAME

From 1/24/17 "Basic JavaScript Games - Thirs Meetup!"

by lasha

HTML

<div>
  Players: <span class="players"></span> |
  Current Player: <span class="currentPlayer"></span>
</div>
<div class="board"></div>

CSS

.board {
  border: 1px solid #000;
}
.piece {
  box-shadow: 1px 1px 1px #000;
  display: inline-block;
  vertical-align: bottom;
  transition: background-color 0.3s ease-in-out;
}
.piece.disabled {
  background-color: gray;
}

JavaScript

var $board = $('.board');
var $players = $('.players');
var $currentPlayer = $('.currentPlayer');
var gameConfig = {};

function init(config){
	gameConfig = config;
	$board.width(config.pieceSize * config.xitems);
  $board.height(config.pieceSize * config.yitems);
  $players.text(config.players);
  $currentPlayer.text(config.currentPlayer);
  insertItems(config.xitems, config.yitems);
}

function insertItems(xitems, yitems){
	for(var y = 0; y < yitems; y++){
  	for(var x = 0; x < xitems; x++){
    	$board.append('<div class="piece" style="width:50px;height:50px" data-y="'+y+'" data-x="'+x+'"></div>')
    }
  }
}

function removeItems(clickedX, clickedY){
	var delayCounter = 0;
	if(clickedX === 0 && clickedY === 0){
  	alert("PLAYER " + gameConfig.currentPlayer + " LOST! :(");
    resetBoard();
    return;
  }
	for(var x = clickedX; x < gameConfig.xitems; x++){
  	for(var y = clickedY; y < gameConfig.yitems; y++){
    	
      /*(function(delayCounter, x, y){
      	//console.log(delayCounter);
      	setTimeout(function(){
          $board.find('[data-x="'+x+'"][data-y="'+y+'"]').addClass('disabled');
        }, (50 * delayCounter));
      })(delayCounter, x, y);*/
      
      // This second approach adds the "disabled" class to each block IMMEDIATELY
      // so that if user clicks really fast on a block already disabled, we can
      // prevent from re-triggering removeItems()
      (function(delayCounter, x, y){
      	//console.log(delayCounter);
      	setTimeout(function(){
          $board.find('[data-x="'+x+'"][data-y="'+y+'"]')
          	.css('transitionDelay', (delayCounter * 30 / 1000) + 's')
          	.addClass('disabled');
        }, 1);
      })(delayCounter, x, y);
      
      delayCounter++;
    }
  }
  nextPlayer();
}

function nextPlayer(){
	if(gameConfig.currentPlayer < gameConfig.players){
  	gameConfig.currentPlayer++;
  	$currentPlayer.text(gameConfig.currentPlayer);
  } else {
  	gameConfig.currentPlayer = 1;
 ...