Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Practice exercises CHAPTER 13 529

$('#gameBoard').on('dragenter', preventDefault);

$('#gameBoard').on('dragover', preventDefault);

$('#gameBoard').on('drop', drop);

});

function createBoard() {

for (var i = 0; i < squareCount; i++) {

var $square = $('<div id="square' + i + '" data-square="' + i

+ '" class="square"></div>');

$square.appendTo($('#gameBoard'));

}

}

function addTiles() {

emptySquare = squareCount - 1;

for (var i = 0; i < emptySquare; i++) {

var $square = $('#square' + i);

var $tile = $('<div draggable="true" id="tile' + i

+ '" class="tile">' + (i + 1) + '</div>');

$tile.appendTo($square);

}

}

function dragStarted(e) {

var $tile = $(e.target)

$tile.addClass('dragged');

var sourceLocation = $tile.parent().data('square');

e.dataTransfer.setData('text', sourceLocation.toString());

e.dataTransfer.effectAllowed = 'move';

}

function dragEnded(e) {

$(e.target).removeClass('dragged');

}

function preventDefault(e) {

e.preventDefault();

}

function drop(e) {

var $square = $(e.target);

if ($square.hasClass('square')) {

var destinationLocation = $square.data('square');

if (emptySquare != destinationLocation) return;

var sourceLocation = Number(e.dataTransfer.getData('text'));

moveTile(sourceLocation);

}

}

function moveTile(sourceLocation) {

var distance = sourceLocation - emptySquare;

if (distance < 0) distance = -(distance);

if (distance == 1 || distance == 4) {

swapTileAndEmptySquare(sourceLocation);

}