Skip to content

Commit 04ad34d

Browse files
author
guludo
committed
Commit of Version 1.0
0 parents  commit 04ad34d

16 files changed

+1257
-0
lines changed

‎board.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
#board{
2+
border-radius: .2em;
3+
overflow: hidden;
4+
border: 2px solid #555;
5+
}
6+
7+
.Checkers-Box{
8+
width: 4em;
9+
height: 4em;
10+
display: inline-block;
11+
vertical-align: top;
12+
position: relative;
13+
}
14+
15+
.Checkers-Box[data-color=black]{
16+
background-color: #333;
17+
}
18+
19+
.Checkers-Box[data-color=white]{
20+
background-color: #EEE;
21+
}
22+
23+
.Checkers-Box[data-selected=white]{
24+
background-color: #35608a;
25+
}
26+
27+
.Checkers-Box[data-selected=black]{
28+
background-color: #BED8F3;
29+
}
30+
31+
.Checkers-Man{
32+
position: absolute;
33+
margin: .5em;
34+
border-radius: 3.5em;
35+
top: 0;
36+
left: 0;
37+
bottom: 0;
38+
right: 0;
39+
height: auto;
40+
width: auto;
41+
}
42+
43+
.Checkers-Man[data-color=white]{
44+
background-color: #c6e2ff;
45+
}
46+
47+
.Checkers-Man[data-color=black]{
48+
background-color: #5186bb;
49+
}
50+
51+
.Checkers-KingTag{
52+
position: absolute;
53+
margin: 1em;
54+
border-radius: 3.5em;
55+
top: 0;
56+
left: 0;
57+
bottom: 0;
58+
right: 0;
59+
height: auto;
60+
width: auto;
61+
display: none;
62+
}
63+
64+
.Checkers-Man[data-king] .Checkers-KingTag{
65+
display: block;
66+
}
67+
68+
.Checkers-Man[data-color=white] > .Checkers-KingTag{
69+
background-color: #5186bb;
70+
}
71+
72+
.Checkers-Man[data-color=black] > .Checkers-KingTag{
73+
background-color: #c6e2ff;
74+
}
75+
76+
.Checkers-Row{
77+
white-space: nowrap;
78+
}
79+
80+
@media screen and (max-width: 320px){
81+
.Checkers-Box{
82+
width: 34px;
83+
height: 34px;
84+
}
85+
.Checkers-KingTag{
86+
border-radius: 2px;
87+
margin: 7px;
88+
}
89+
}
90+
91+
@media screen and (min-width: 321px) and (max-width: 360px){
92+
.Checkers-Box{
93+
width: 40px;
94+
height: 40px;
95+
}
96+
.Checkers-KingTag{
97+
border-radius: 6px;
98+
margin: 8px;
99+
}
100+
}

‎board.js

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
(function($){
2+
3+
$(document).ready(function(){
4+
Board = {};
5+
6+
var console = window.console || {
7+
warn : function(){},
8+
info : function(){}
9+
};
10+
11+
var container = $('#board');
12+
var resetingBoard = false;
13+
Board.dimension = parseInt(container.attr('data-dimension'));
14+
Board.menCount = (Board.dimension/2)*((Board.dimension-2)/2);
15+
Board.options = {
16+
canCaptureBackwards : true,
17+
kingCanCaptureBackwards : true
18+
};
19+
Board.men = [];
20+
Board.boxes = [];
21+
Board.state = new state.State();
22+
23+
function capture(captureI, captureJ){
24+
var targetMan = Board.manAt(captureI, captureJ);
25+
Board.men[captureI*Board.dimension + captureJ] = null;
26+
targetMan.element.detach();
27+
}
28+
29+
Board.move = function(i, j, man){
30+
31+
if(!resetingBoard){
32+
var i0 = man.position.i;
33+
var j0 = man.position.j;
34+
35+
var moveObj = Board.state.getMoveObject(i0, j0, i, j);
36+
if(typeof moveObj == "string"){
37+
var message = state.moveError[moveObj];
38+
console.warn(message);
39+
if(typeof Board.onInvalidMove == 'function'){
40+
Board.onInvalidMove(message);
41+
}
42+
return false;
43+
}
44+
if(moveObj.isCapture){ //If the game has capture moves
45+
var captureI = i0 +((i-i0)/Math.abs(i-i0));
46+
var captureJ = j0 +((j-j0)/Math.abs(j-j0));
47+
capture(captureI, captureJ);
48+
}
49+
50+
this.men[i0*this.dimension + j0] = null;
51+
}
52+
53+
54+
this.men[i*this.dimension + j] = man;
55+
Board.boxAt(i, j).append(man.element);
56+
man.position.i = i;
57+
man.position.j = j;
58+
59+
60+
if(!resetingBoard){
61+
if(Board.state.turn == state.WHITE && i == 0 && !man.isKing) man.setKing(true);
62+
if(Board.state.turn == state.BLACK && i == (Board.dimension-1) && !man.isKing) man.setKing(true);
63+
64+
Board.state.setMove({i0:i0, j0:j0, i:i, j:j}, moveObj.isCapture);
65+
66+
if(typeof Board.onMove == 'function') Board.onMove();
67+
}
68+
return true;
69+
};
70+
Board.manAt = function(i, j){
71+
return this.men[i*this.dimension + j];
72+
};
73+
Board.boxAt = function(i, j){
74+
return this.boxes[i*this.dimension + j];
75+
};
76+
Board.reset = function(){
77+
resetingBoard = true;
78+
79+
Board.state = new state.State();
80+
81+
var d = Board.dimension*Board.dimension;
82+
var i;
83+
for(i = 0; i<d; i++){
84+
this.men[i] = null;
85+
}
86+
87+
Board.state[state.WHITE] = [];
88+
Board.state[state.BLACK] = [];
89+
90+
d = Board.dimension / 2;
91+
for(i = 0; i<Board.menCount; i++){
92+
var mi = Math.floor(i / d);
93+
var mjw = 2*(i % d);
94+
var mj = mjw+1;
95+
if(mi % 2 == 1) {
96+
mjw++;
97+
mj--;
98+
}
99+
100+
101+
recycler.allMen.black[i].setKing(false);
102+
recycler.allMen.white[i].setKing(false);
103+
104+
recycler.allMen.black[i].moveTo(mi, mj);
105+
recycler.allMen.white[i].moveTo(Board.dimension -1 -mi, mjw);
106+
107+
var man = new state.Man();
108+
man.i = recycler.allMen.black[i].position.i;
109+
man.j = recycler.allMen.black[i].position.j;
110+
Board.state[state.BLACK].push(man);
111+
112+
man = new state.Man();
113+
man.i = recycler.allMen.white[i].position.i;
114+
man.j = recycler.allMen.white[i].position.j;
115+
Board.state[state.WHITE].push(man);
116+
117+
}
118+
119+
Board.state.turn = state.WHITE;
120+
d = Board.dimension*Board.dimension;
121+
for(i = 0; i<d; i++){
122+
123+
if(this.men[i]){
124+
this.state.colorMatrix[i] = this.men[i].color;
125+
}else{
126+
this.state.colorMatrix[i] = state.NONE;
127+
}
128+
this.state.kingMatrix[i] = false;
129+
}
130+
resetingBoard = false;
131+
};
132+
Board.playerType = {};
133+
Board.playerType[state.WHITE] = 'human';
134+
Board.playerType[state.BLACK] = 'computer';
135+
136+
Board.playerDifficulty = {};
137+
Board.playerDifficulty[state.WHITE] = 1;
138+
Board.playerDifficulty[state.BLACK] = 1;
139+
140+
141+
function boxClick(evt){
142+
if(Board.playerType[Board.state.turn] == 'computer') return;
143+
var i = evt.data.i, j = evt.data.j;
144+
var man = Board.manAt(i, j);
145+
if(!man){
146+
if(boxClick.currentMan){
147+
if(boxClick.currentMan.moveTo(i,j)){
148+
boxClick.currentMan = null;
149+
boxClick.currenBox.removeAttr('data-selected');
150+
boxClick.currenBox = null;
151+
}
152+
}
153+
}else{
154+
if(man.color == Board.state.turn){
155+
if(boxClick.currenBox){
156+
boxClick.currenBox.removeAttr('data-selected');
157+
}
158+
boxClick.currentMan = man;
159+
boxClick.currenBox = $(this);
160+
boxClick.currenBox.attr('data-selected', Board.state.turn == state.WHITE ? 'white' : 'black');
161+
}
162+
}
163+
}
164+
boxClick.currentMan = null;
165+
boxClick.currenBox = null;
166+
167+
var recycler = {
168+
allMen : {
169+
white : [],
170+
black : []
171+
}
172+
};
173+
174+
function Man(color){
175+
this.element = $('<div class="Checkers-Man"><div class="Checkers-KingTag"></div></div>');
176+
this.color = color;
177+
this.element.attr('data-color', color == state.WHITE ? 'white' : 'black');
178+
this.position = {
179+
i : 0,
180+
j : 0
181+
};
182+
this.king = false;
183+
}
184+
Man.prototype.moveTo = function(i, j){
185+
return Board.move(i, j, this);
186+
};
187+
Man.prototype.setKing = function(isKing){
188+
this.king == !!isKing;
189+
if(isKing) this.element.attr('data-king', 1);
190+
else this.element.removeAttr('data-king');
191+
};
192+
193+
//Creating all the men necessary
194+
(function(){
195+
for(var i = 0; i<Board.menCount; i++){
196+
var w = new Man(state.WHITE);
197+
var b = new Man(state.BLACK);
198+
recycler.allMen.white.push(w);
199+
recycler.allMen.black.push(b);
200+
}
201+
})();
202+
203+
//Creating board boxes
204+
(function(){
205+
var d = Board.dimension;
206+
for(var i = 0; i<d; i++){
207+
var $row = $('<div class="Checkers-Row"></div>');
208+
container.append($row);
209+
for(var j = 0; j<d; j++){
210+
var $box = $('<div class="Checkers-Box" data-color="' + ((i+j) % 2 == 1 ? 'black' : 'white') + '"></div>');
211+
$row.append($box);
212+
$box.bind('click', {i:i, j:j}, boxClick);
213+
Board.boxes[i*d + j] = $box;
214+
Board.men[i*d + j] = null;
215+
}
216+
}
217+
})();
218+
219+
Board.reset();
220+
221+
function computerMove(){
222+
var newState = Board.state.search(Board.playerDifficulty[Board.state.turn]);
223+
console.info(newState);
224+
console.info(newState.toString());
225+
Board.move(newState.move.i, newState.move.j, Board.manAt(newState.move.i0, newState.move.j0));
226+
}
227+
228+
Board.onMove = function (){
229+
clearTimeout(Board.onMove.moveTimeoutId);
230+
231+
if(typeof Board.onTurnEnd == 'function'){
232+
Board.onTurnEnd(state.opositeColor(Board.state.turn));
233+
}
234+
235+
236+
if(Board.state.getPossibleMoves().length == 0 && Board.state.captureMoves.length == 0){
237+
if(typeof Board.onFinish == 'function'){
238+
Board.onFinish(state.opositeColor(Board.state.turn));
239+
}
240+
return;
241+
}
242+
243+
if(typeof Board.onTurnStart == 'function'){
244+
Board.onTurnStart(Board.state.turn);
245+
}
246+
247+
if(Board.playerType[Board.state.turn] == 'computer'){
248+
Board.onMove.moveTimeoutId = setTimeout(computerMove, 500);
249+
}
250+
};
251+
Board.onMove.moveTimeoutId = null;
252+
253+
Board.onFinish = null;
254+
255+
Board.onTurnStart = null;
256+
257+
Board.onTurnEnd = null;
258+
259+
Board.onInvalidMove = null;
260+
});
261+
262+
})(jQuery);

‎desktop.ini

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[.ShellClassInfo]
2+
InfoTip=This folder is shared online.
3+
IconFile=C:\Program Files (x86)\Google\Drive\googledrivesync.exe
4+
IconIndex=12
5+

0 commit comments

Comments
 (0)