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

• Simon Forsberg: How exactly do you make the checkers move?
• cyklop77: change attributes of certain checkers object
• Simon Forsberg: I mean... how do you make them move by interacting with them, from a user point of view? I tried clicking on them and stuff but nothing happened. Or is that not implemented?

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.