Checkers Game JavaScript Documentation

Your Name
May 31, 2024

Abstract
This document provides a comprehensive explanation of the JavaScript
code used to create a checkers game. The code handles game initialization,
player interactions, and game state management.

1 Introduction
The JavaScript code sets up the game logic for a checkers game. It initializes
the board, manages pieces and their movements, and handles player turns and
game state.

2 Initialization and Setup

2.1 Game Board
The game board is represented as a 2D array where each element can be 0,
1, or 2, indicating an empty space, a piece of player 1, or a piece of player 2,
respectively.

Listing 1: Game Board Initialization

// The i n i t i a l s e t u p
var gameBoard = [
[0 , 1 , 0 , 1 , 0 , 1 , 0, 1] ,
[1 , 0 , 1 , 0 , 1 , 0 , 1, 0] ,
[0 , 1 , 0 , 1 , 0 , 1 , 0, 1] ,
[0 , 0 , 0 , 0 , 0 , 0 , 0, 0] ,
[0 , 0 , 0 , 0 , 0 , 0 , 0, 0] ,
[2 , 0 , 2 , 0 , 2 , 0 , 2, 0] ,
[0 , 2 , 0 , 2 , 0 , 2 , 0, 2] ,
[2 , 0 , 2 , 0 , 2 , 0 , 2, 0]
];

1
2.2 Distance Formula
A helper function to calculate the distance between two points on the board.

Listing 2: Distance Formula

var d i s t = f u n c t i o n ( x1 , y1 , x2 , y2 ) {
r e t u r n Math . s q r t ( Math . pow ( ( x1 − x2 ) , 2 ) + Math . pow ( ( y1 − y2 ) , 2 ) ) ;
}

2.3 Piece Object

The Piece object represents each checker piece on the board. It manages the
piece’s position, movement, and king status.

Listing 3: Piece Object

// P i e c e o b j e c t − t h e r e a r e 24 i n s t a n c e s o f them i n a c h e c k e r s game
f u n c t i o n P i e c e ( element , p o s i t i o n ) {
// when jump e x i s t , r e g u l a r move i s not a l l o w e d
// s i n c e t h e r e i s no jump a t round 1 , a l l p i e c e s a r e a l l o w e d t o move i n i t i a l l
t h i s . allowedtomove = t r u e ;
// l i n k e d DOM e l e m e n t
t h i s . element = element ;
// p o s i t i o n s on gameBoard a r r a y i n format row , column
this . position = position ;
// which p l a y e r ’ s p i e c e i s i t
this . player = ’ ’;
// f i g u r e out p l a y e r by p i e c e i d
i f ( t h i s . element . a t t r (” id ”) < 12)
this . player = 1;
else
this . player = 2;
// makes o b j e c t a k i n g
t h i s . king = f a l s e ;
t h i s . makeKing = f u n c t i o n ( ) {
t h i s . e l e m e n t . c s s ( ” backgroundImage ” , ” u r l ( ’ img/ k i n g ” + t h i s . p l a y e r + ” . pn
t h i s . king = true ;
}
// moves t h e p i e c e
t h i s . move = f u n c t i o n ( t i l e ) {
t h i s . e l e m e n t . removeClass ( ’ s e l e c t e d ’ ) ;
i f ( ! Board . i s V a l i d P l a c e t o M o v e ( t i l e . p o s i t i o n [ 0 ] , t i l e . p o s i t i o n [ 1 ] ) ) r e t u r n
//make s u r e p i e c e doesn ’ t go backwards i f i t ’ s not a k i n g
i f ( t h i s . p l a y e r == 1 && t h i s . k i n g == f a l s e ) {
i f ( t i l e . position [ 0 ] < this . position [ 0 ] ) return f a l s e ;
} e l s e i f ( t h i s . p l a y e r == 2 && t h i s . k i n g == f a l s e ) {
i f ( t i l e . position [ 0 ] > this . position [ 0 ] ) return f a l s e ;

2
 }
// remove t h e mark from Board . board and put i t i n t h e new s p o t
Board . board [ t h i s . p o s i t i o n [ 0 ] ] [ t h i s . p o s i t i o n [ 1 ] ] = 0 ;
Board . board [ t i l e . p o s i t i o n [ 0 ] ] [ t i l e . p o s i t i o n [ 1 ] ] = t h i s . p l a y e r ;
this . position = [ t i l e . position [0] , t i l e . position [ 1 ] ] ;
// change t h e c s s u s i n g board ’ s d i c t i o n a r y
t h i s . e l e m e n t . c s s ( ’ top ’ , Board . d i c t i o n a r y [ t h i s . p o s i t i o n [ 0 ] ] ) ;
t h i s . e l e m e n t . c s s ( ’ l e f t ’ , Board . d i c t i o n a r y [ t h i s . p o s i t i o n [ 1 ] ] ) ;
// i f p i e c e r e a c h e s t h e end o f t h e row on o p p o s i t e s i d e crown i t a k i n g (
i f ( ! t h i s . k i n g && ( t h i s . p o s i t i o n [ 0 ] == 0 | | t h i s . p o s i t i o n [ 0 ] == 7 ) )
t h i s . makeKing ( ) ;
return true ;
};

// t e s t s i f p i e c e can jump anywhere

t h i s . canJumpAny = f u n c t i o n ( ) {
r e t u r n ( t h i s . canOpponentJump ( [ t h i s . p o s i t i o n [ 0 ] + 2 , this . position [1] + 2
t h i s . canOpponentJump ( [ t h i s . p o s i t i o n [ 0 ] + 2 , t h i s . position [1] − 2]) |
t h i s . canOpponentJump ( [ t h i s . p o s i t i o n [ 0 ] − 2 , t h i s . position [1] + 2]) |
t h i s . canOpponentJump ( [ t h i s . p o s i t i o n [ 0 ] − 2 , t h i s . position [1] − 2]))
};

// t e s t s i f an opponent jump can be made t o a s p e c i f i c p l a c e

t h i s . canOpponentJump = f u n c t i o n ( n e w P o s i t i o n ) {
// f i n d what t h e d i s p l a c e m e n t i s
var dx = n e w P o s i t i o n [ 1 ] − t h i s . p o s i t i o n [ 1 ] ;
var dy = n e w P o s i t i o n [ 0 ] − t h i s . p o s i t i o n [ 0 ] ;
//make s u r e o b j e c t doesn ’ t go backwards i f not a k i n g
i f ( t h i s . p l a y e r == 1 && t h i s . k i n g == f a l s e ) {
i f ( newPosition [ 0 ] < t h i s . p o s i t i o n [ 0 ] ) return f a l s e ;
} e l s e i f ( t h i s . p l a y e r == 2 && t h i s . k i n g == f a l s e ) {
i f ( newPosition [ 0 ] > t h i s . p o s i t i o n [ 0 ] ) return f a l s e ;
}
// must be i n bounds
i f ( newPosition [ 0 ] > 7 | | newPosition [ 1 ] > 7 | | newPosition [ 0 ] < 0 | | ne
// middle t i l e where t h e p i e c e t o be conquered s i t s
var t i l e T o C h e c k x = t h i s . p o s i t i o n [ 1 ] + dx / 2 ;
var t i l e T o C h e c k y = t h i s . p o s i t i o n [ 0 ] + dy / 2 ;
i f ( tileToCheckx > 7 | | tileToChecky > 7 | | tileToCheckx < 0 | | tileToCh
// i f t h e r e i s a p i e c e t h e r e and t h e r e i s no p i e c e i n t h e s p a c e a f t e r t h a
i f ( ! Board . i s V a l i d P l a c e t o M o v e ( tileToChecky , t i l e T o C h e c k x ) && Board . i s V a l i
// f i n d which o b j e c t i n s t a n c e i s s i t t i n g t h e r e
for ( l e t pieceIndex in pieces ) {
i f ( p i e c e s [ p i e c e I n d e x ] . p o s i t i o n [ 0 ] == t i l e T o C h e c k y && p i e c e s [ p i e c
i f ( t h i s . p l a y e r != p i e c e s [ p i e c e I n d e x ] . p l a y e r ) {
// r e t u r n t h e p i e c e s i t t i n g t h e r e

3
 return pieces [ pieceIndex ] ;
}
}
}
}
return f a l s e ;
};

t h i s . opponentJump = f u n c t i o n ( t i l e ) {
var pieceToRemove = t h i s . canOpponentJump ( t i l e . p o s i t i o n ) ;
// i f t h e r e i s a p i e c e t o be removed , remove i t
i f ( pieceToRemove ) {
pieceToRemove . remove ( ) ;
return true ;
}
return f a l s e ;
};

t h i s . remove = f u n c t i o n ( ) {
// remove i t and d e l e t e i t from t h e gameboard
t h i s . e l e m e n t . c s s ( ” d i s p l a y ” , ” none ” ) ;
i f ( t h i s . p l a y e r == 1 ) {
$ ( ’# p l a y e r 2 ’ ) . append(”< d i v c l a s s =’ c a p t u r e d P i e c e ’></div >”);
Board . s c o r e . p l a y e r 2 += 1 ;
}
i f ( t h i s . p l a y e r == 2 ) {
$ ( ’# p l a y e r 1 ’ ) . append(”< d i v c l a s s =’ c a p t u r e d P i e c e ’></div >”);
Board . s c o r e . p l a y e r 1 += 1 ;
}
Board . board [ t h i s . p o s i t i o n [ 0 ] ] [ t h i s . p o s i t i o n [ 1 ] ] = 0 ;
// r e s e t p o s i t i o n s o i t doesn ’ t g e t p i c k e d up by t h e f o r l o o p i n t h e canO
this . position = [ ] ;
var playerWon = Board . checkifAnybodyWon ( ) ;
i f ( playerWon ) {
$ ( ’# winner ’ ) . html ( ” P l a y e r ” + playerWon + ” has won ! ” ) ;
}
}
}

2.4 Tile Object

The Tile object represents each tile on the game board and checks if a move to
the tile is in range.
Listing 4: Tile Object
// T i l e o b j e c t − r e p r e s e n t s a s q u a r e on t h e board

4
f u n c t i o n T i l e ( element , p o s i t i o n ) {
// l i n k e d DOM e l e m e n t
t h i s . element = element ;
// p o s i t i o n i n gameboard
this . position = position ;
// i f t i l e i s i n r a n g e from t h e p i e c e
t h i s . inRange = f u n c t i o n ( p i e c e ) {
for ( l e t k of pieces )
i f ( k . p o s i t i o n [ 0 ] == t h i s . p o s i t i o n [ 0 ] && k . p o s i t i o n [ 1 ] == t h i s . p o s i t
i f ( dist ( this . position [0] , this . position [1] , piece . position [0] , piece . po
return ’ correct ’ ;
}
}

3 Game Logic
3.1 Player Turns and Interactions
The game handles player turns and interactions, ensuring proper movement and
capturing mechanics.

Listing 5: Player Turns and Interactions

$ ( document ) . ready ( f u n c t i o n ( ) {
// p l a c e t h e p i e c e s on t h e board and s t o r e them i n t h e p i e c e s a r r a y
var p i e c e s = [ ] ;
$ ( ’ . p i e c e ’ ) . each ( f u n c t i o n ( i n d e x ) {
p i e c e s . push ( new P i e c e ( $ ( t h i s ) , [ p a r s e I n t ( $ ( t h i s ) . c s s ( ’ top ’ ) ) / 5 5 , p a r s e
});

// a s s i g n a t i l e o b j e c t t o each t i l e
var t i l e s = [ ] ;
$ ( ’ . t i l e ’ ) . each ( f u n c t i o n ( i n d e x ) {
t i l e s . push ( new T i l e ( $ ( t h i s ) , [ p a r s e I n t ( $ ( t h i s ) . c s s ( ’ top ’ ) ) / 5 5 , p a r s e I n
});

// i n i t i a l i z e gameboard o b j e c t
var Board = new gameBoard ( ) ;

//when a p i e c e i s c l i c k e d , i t i s s e l e c t e d
$ ( ’ . piece ’ ) . c l i c k ( function () {
$ ( ’ . p i e c e ’ ) . removeClass ( ’ s e l e c t e d ’ ) ;
$ ( t h i s ) . addClass ( ’ s e l e c t e d ’ ) ;
});

//when a t i l e i s c l i c k e d , move t h e p i e c e t h e r e

5
 $ ( ’. tile ’ ) . click ( function () {
var s e l e c t e d P i e c e = n u l l ;
for ( l e t k of pieces ) {
i f ( k . element . hasClass ( ’ s e l e c t e d ’ ) ) {
selectedPiece = k ;
break ;
}
}
i f ( ! selectedPiece ) return ;
for ( l e t t i l e of t i l e s ) {
i f ( t i l e . e l e m e n t [ 0 ] == t h i s ) {
i f ( t i l e . inRange ( s e l e c t e d P i e c e ) == ’ c o r r e c t ’ ) {
i f ( ! s e l e c t e d P i e c e . move ( t i l e ) ) c o n t i n u e ;
s e l e c t e d P i e c e . opponentJump ( t i l e ) ;
//make s u r e t o s w i t c h t u r n s and update p i e c e a l l o w e d t o move
Board . s w it c h T ur n s ( ) ;
break ;
}
}
}
});
});

4 Game Board Class

4.1 Board Object
The Board object manages the game state, including checking valid moves,
switching turns, and checking win conditions.

Listing 6: Board Object

// The board o b j e c t manages t h e s t a t e o f t h e game
f u n c t i o n gameBoard ( ) {
t h i s . board = [
[0 , 1 , 0 , 1 , 0 , 1 , 0 , 1] ,
[1 , 0 , 1 , 0 , 1 , 0 , 1 , 0] ,
[0 , 1 , 0 , 1 , 0 , 1 , 0 , 1] ,
[0 , 0 , 0 , 0 , 0 , 0 , 0 , 0] ,
[0 , 0 , 0 , 0 , 0 , 0 , 0 , 0] ,
[2 , 0 , 2 , 0 , 2 , 0 , 2 , 0] ,
[0 , 2 , 0 , 2 , 0 , 2 , 0 , 2] ,
[2 , 0 , 2 , 0 , 2 , 0 , 2 , 0]
];

t h i s . d i c t i o n a r y = [ 0 , 55 , 110 , 165 , 220 , 275 , 330 , 3 8 5 ] ;

6
 this . score = { player1 : 0 , player2 : 0 };

this . currentPlayer = 1;

t h i s . i s V a l i d P l a c e t o M o v e = f u n c t i o n ( row , c o l ) {
r e t u r n t h i s . board [ row ] [ c o l ] == 0 ;
}

t h i s . sw i t c hT u r ns = f u n c t i o n ( ) {
t h i s . c u r r e n t P l a y e r = t h i s . c u r r e n t P l a y e r == 1 ? 2 : 1 ;
for ( l e t k of pieces ) {
k . allowedtomove = k . p l a y e r == t h i s . c u r r e n t P l a y e r ? t r u e : f a l s e ;
}
}

t h i s . checkifAnybodyWon = f u n c t i o n ( ) {
i f ( t h i s . s c o r e . p l a y e r 1 == 1 2 ) r e t u r n 2 ;
i f ( t h i s . s c o r e . p l a y e r 2 == 1 2 ) r e t u r n 1 ;
return f a l s e ;
}
}

5 Conclusion
This JavaScript code provides the functionality to play a checkers game, includ-
ing initializing the board, managing piece movements, enforcing game rules,
and determining win conditions. The code is structured into several objects
and functions to modularize the game logic and make it easier to understand
and maintain.