template for checkers game for single player

Question

i make template for checkers game. while there is the functionality for only one player. but it worked. Checkers can already move

Board = function(){ 
    var self = this;

    self.fillBoard = function(){
        for (var x = 0; x < self.x; x++){
            self.board[x] = [];

            for (var y = 0; y < self.y; y = y + 2){
                x%2 ? self.board[x][y] = 0 : self.board[x][y] = 1;
            }

            for (var y = 1; y < self.y; y = y + 2){
                x%2 ? self.board[x][y] = 1 : self.board[x][y] = 0;              
            }           
        }
    }

    self.outputLabelsBoard = function(){
        for (var x = 0; x < self.x; x = x + 1){
            $('#board').append('<div class="label_num" style="bottom: ' + ((40 * x) + 10) + 'px">' + (x + 1) + '</div>');
            $('#board').append('<div class="label_letter" style="left: ' + ((40 * x) + 10) + 'px">' + String.fromCharCode(x + 65) + '</div>');
        }
    }

    self.x = 8; 
    self.y = 8; 
    self.board = [];
    self.fillBoard();
    self.outputLabelsBoard();

    self.outputBoardSchemaInversed = function(){
        for (var x = 0; x < self.x; x++){
            var row = '';
            for (var y = 0; y < self.y; y++){
                row += self.board[x][y].toString();
            }
            console.log(row);
        }
    }

    self.outputBoard = function(){
        for (var x = 0; x < self.x; x = x + 1){
            for (var y = 0; y < self.y; y = y + 1){
                if(self.board[x][y] == 1){
                    $('#board').append('<div class="board_cell" style="left: ' + x * 40 + 'px; top: ' + (280 - (y * 40)) + 'px">' + x + ':' + y + '</div>');
                };
            }
        }       
    }
}

Board.getInstance = function(){
  if(!this.instance){
    this.instance = new this();
  }
  return this.instance;
};

function Checker(x, y, id){ 
    var self = this;

    this.x_coord = x;   
    this.y_coord = y;   
    this.color = 'red'; 
    this.id = this.color + id;      

    self.putChecker = function(){
        $('#board').append('<div class="checker" id="' + this.id + '" style="left: ' + ((this.x_coord * 40) + 15) + 'px; top: ' + (280 - ((this.y_coord * 40) - 15)) + 'px"></div>');       
    };

    self.removeChecker = function(){
        $('#' + this.id).remove()           
    };  

}


// ------------------------------------------------------------------------------------ init
$(document).ready(function(){
    // game preparation
    board1 = Board.getInstance();
    board1.outputBoard();

    var coords_array = new Array();
    coords_array[0] = [0, 0];
    coords_array[1] = [2, 0];
    coords_array[2] = [4, 0];
    coords_array[3] = [6, 0];
    coords_array[4] = [1, 1];
    coords_array[5] = [3, 1];
    coords_array[6] = [5, 1];
    coords_array[7] = [7, 1];
    coords_array[8] = [0, 2];
    coords_array[9] = [2, 2];
    coords_array[10] = [4, 2];
    coords_array[11] = [6, 2];  

    var checkers_array = [];

    coords_array.forEach(function(coords, i){
      checkers_array[i] = new Checker(coords[0], coords[1], i);
      checkers_array[i].putChecker();
    }); 

    // game process imitation
    setTimeout(function() { 
        checkers_array[8].removeChecker() 
    }, 1000);

    setTimeout(function() { 
        checkers_array[8].x_coord = 1;
        checkers_array[8].y_coord = 3;
        checkers_array[8].putChecker() 
    }, 1000);
});

live example here: http://codepen.io/anon/pen/PZNxGZ

Answer 1

That's not really how you're supposed to use internals and this variables.

Consider using the prototype chain instead.

---

self:

Using self the way you did is literally pointless. I don't know whether you're a Python dev and that feels familiar, but that's wrong.

---

jQuery:

You use jQuery for document.ready, $(selector) and .append, I would recommend removing it. Using a library of jQuery's size for those three functions is just pointless when you can use polyfills from vanilla JavaScript.