Checkers

by wrxsti85

CSS

body {
    background: #fff;
}

.board {
    width: 320px;
    border: solid 10px #000;
    float: left;
    margin: 50px;
}

.tile {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-bottom: -4px;
    padding: 5px;
}

.black {
    background: #000;
}

.red {
    background: red;
}

.piece {
    cursor: pointer;
    width: 25px;
    height: 25px;
    border: solid 2px #fff;
    border-radius: 30px;
}

.moveable {
    -moz-box-shadow: inset 0 0 10px #fff;
    -webkit-box-shadow: inset 0 0 10px #fff;
    box-shadow: inset 0 0 10px #fff;
    cursor: pointer;
}

.turn-container {
    float: left;
    margin: 50px 0px;
    height: 340px;
    position: relative;
}

.blk-player {
    position: absolute;
    bottom: -4px;
    width: 100px;
}

JavaScript

class Game {

    constructor() {
        this._board = new Board();
        this._turn = true;
        this._pieces = [];
    }

    init() {
        this._board.generate();
        this.generatePieces();
        this.initHandlers();
    }

    get pieces() {
        return this._pieces;
    }
    get turn() {
        return this._turn;
    }

    generatePieces() {
        for (let tile of this._board.tiles) {
            if (tile._color === 'black' && $.inArray(tile._y, [1, 2, 3, 6, 7, 8]) > -1) {
                let player = $.inArray(tile._y, [6, 7, 8]) > -1 ? !this._turn : this._turn;
                let piece = new Piece(tile._x, tile._y, player);
                piece.generate();
                this._pieces.push(piece);
            }
        }
    }

    checkAttackConditions() {
		$.each(game.pieces, function(i, piece){
			if(game.turn === piece._player){
				let x = $(this).parent().data('x');
            	let y = $(this).parent().data('y');
				let moveable = [];
				if (game.turn) {
					moveable.push([x - 1, y + 1]);
					moveable.push([x + 1, y + 1]);
				} else {
					moveable.push([x - 1, y - 1]);
					moveable.push([x + 1, y - 1]);
				}
				$.each(moveable, function(i, o) {
					var taken = game.pieces.map(function(e) {
						return e._x === o[0] && e._y === o[1] && game.turn != e._player;
					}).indexOf(true);
					if (taken > -1) $('.tile[data-x="' + o[0] + '"][data-y="' + o[1] + '"]').find('.piece').text('!');
				});
			}
		});
    }

    initHandlers() {

        $(document).on('click', '.piece', function(e) {
            if ((game.turn && !$(this).hasClass('red')) || (!game.turn && !$(this).hasClass('black'))) {
                return;
            }
            game.checkAttackConditions();
            $('.selected').removeClass('selected');
            $(this).addClass('selected');
            let x = $(this).parent().data('x');
            let y = $(this).parent().data('y');
            let moveable = [];
            if (game.turn) {
 ...