Skip to content

Commit 9968a3f

Browse files
cucucucu
committed
added capture trays
1 parent 1ebfe31 commit 9968a3f

File tree

1 file changed

+43
-35
lines changed

1 file changed

+43
-35
lines changed

‎client.html‎

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,10 @@
8383

8484
//variable set up
8585
var selectedPiece=null;
86-
//Credit for canvas image draw https://stackoverflow.com/questions/14012768/html5-canvas-background-image
8786
var canvas = document.getElementById("myCanvas"),
8887
ctx = canvas.getContext("2d");
8988
canvasWidth=512
90-
canvasHeight=512
89+
canvasHeight=512+(64*4) //two extra rows top and bottom to keep captured pieces
9190
canvas.width = canvasWidth;
9291
canvas.height = canvasHeight;
9392

@@ -104,11 +103,20 @@
104103
//console.log(x, y, (x*squareSize), (y*squareSize), black, ctx.fillStyle);
105104
if (black) { ctx.fillStyle = "black"; }
106105
else { ctx.fillStyle = "white"; }
107-
ctx.fillRect(x*squareSize, y*squareSize, squareSize, squareSize);
106+
ctx.fillRect(x*squareSize, y*squareSize+(squareSize*2), squareSize, squareSize);
108107
black = !black;
109108
}
110109
black = !black
111110
}
111+
112+
//draw white capture area
113+
ctx.fillStyle="red"
114+
ctx.fillRect(0,0, 8*squareSize, 2*squareSize)
115+
116+
//draw black capture area
117+
ctx.fillStyle="blue"
118+
ctx.fillRect(0, canvasHeight-(squareSize*2), canvasWidth, canvasHeight)
119+
112120
}//end of drawBoard
113121

114122
var wPieces=[] //array to hold all white pieces
@@ -126,88 +134,88 @@
126134
}
127135

128136
//init all white pieces (16 total
129-
var wKing = new Piece("White King", 64*4-32, 64/2, 'white',"K")
137+
var wKing = new Piece("White King", squareSize*4-squareSize/2, squareSize*2+(squareSize/2), 'white',"K")
130138
wPieces.push(wKing)
131-
var wQueen=new Piece("White Queen", 64*5-32, 64/2, 'white',"Q")
139+
var wQueen=new Piece("White Queen", squareSize*5-squareSize/2, squareSize*2+squareSize/2, 'white',"Q")
132140
wPieces.push(wQueen)
133-
var wKnight1 = new Piece("White Knight", 64*3-32, squareSize/2, 'white', "K1")
141+
var wKnight1 = new Piece("White Knight", squareSize*3-(squareSize/2), squareSize*2+squareSize/2, 'white', "K1")
134142
wPieces.push(wKnight1)
135-
var wKnight2 = new Piece('White Knight', 64*6-(squareSize/2), squareSize/2, 'white', "K2")
143+
var wKnight2 = new Piece('White Knight', squareSize*6-(squareSize/2), squareSize*2+squareSize/2, 'white', "K2")
136144
wPieces.push(wKnight2)
137-
var wBishop1 = new Piece("White Bishop", 64*2-(squareSize/2), squareSize/2, 'white', "B1")
145+
var wBishop1 = new Piece("White Bishop", squareSize*2-(squareSize/2), squareSize*2+squareSize/2, 'white', "B1")
138146
wPieces.push(wBishop1)
139-
var wBishop2= new Piece("White Bishop", 64*7-(squareSize/2), squareSize/2, 'white', "B2")
147+
var wBishop2= new Piece("White Bishop", squareSize*7-(squareSize/2), squareSize*2+squareSize/2, 'white', "B2")
140148
wPieces.push(wBishop2)
141-
var wRook1 = new Piece("White Rook", squareSize/2, squareSize/2, 'white', "R1")
149+
var wRook1 = new Piece("White Rook", squareSize/2, squareSize*2+squareSize/2, 'white', "R1")
142150
wPieces.push(wRook1)
143-
var wRook2 = new Piece("White Rook", squareSize*8-(squareSize/2), squareSize/2, 'white', "R2")
151+
var wRook2 = new Piece("White Rook", squareSize*8-(squareSize/2), squareSize*2+squareSize/2, 'white', "R2")
144152
wPieces.push(wRook2)
145153
var i=1
146-
var wPon1 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize+squareSize/2, 'white', "P1")
154+
var wPon1 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize*2+squareSize+squareSize/2, 'white', "P1")
147155
wPieces.push(wPon1)
148156
i+=1
149-
var wPon2 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize+squareSize/2, 'white', "P2")
157+
var wPon2 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize*2+squareSize+squareSize/2, 'white', "P2")
150158
wPieces.push(wPon2)
151159
i+=1
152-
var wPon3 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize+squareSize/2, 'white', "P3")
160+
var wPon3 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize*2+squareSize+squareSize/2, 'white', "P3")
153161
wPieces.push(wPon3)
154162
i+=1
155-
var wPon4 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize+squareSize/2, 'white', "P4")
163+
var wPon4 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize*2+squareSize+squareSize/2, 'white', "P4")
156164
wPieces.push(wPon4)
157165
i+=1
158-
var wPon5 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize+squareSize/2, 'white', "P5")
166+
var wPon5 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize*2+squareSize+squareSize/2, 'white', "P5")
159167
wPieces.push(wPon5)
160168
i+=1
161-
var wPon6 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize+squareSize/2, 'white', "P6")
169+
var wPon6 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize*2+squareSize+squareSize/2, 'white', "P6")
162170
wPieces.push(wPon6)
163171
i+=1
164-
var wPon7 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize+squareSize/2, 'white', "P7")
172+
var wPon7 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize*2+squareSize+squareSize/2, 'white', "P7")
165173
wPieces.push(wPon7)
166174
i+=1
167-
var wPon8 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize+squareSize/2, 'white', "P8")
175+
var wPon8 = new Piece("White Pon", squareSize*i-(squareSize/2), squareSize*2+squareSize+squareSize/2, 'white', "P8")
168176
wPieces.push(wPon8)
169177

170178

171179
//init all black pieces
172-
var bKing=new Piece("Black King", 64*4-32, canvasHeight-32, 'black', "K")
180+
var bKing=new Piece("Black King", squareSize*4-squareSize/2, canvasHeight-squareSize/2-squareSize*2, 'black', "K")
173181
bPieces.push(bKing)
174-
var bQueen=new Piece("Black Queen", 64*5-32, canvasHeight-32, 'black', "Q")
182+
var bQueen=new Piece("Black Queen", squareSize*5-squareSize/2, canvasHeight-squareSize/2-squareSize*2, 'black', "Q")
175183
bPieces.push(bQueen)
176-
var bKnight1=new Piece("Black Knight", squareSize*3-(squareSize/2), canvasHeight-(squareSize/2), 'black', "K1")
184+
var bKnight1=new Piece("Black Knight", squareSize*3-(squareSize/2), canvasHeight-(squareSize/2)-squareSize*2, 'black', "K1")
177185
bPieces.push(bKnight1)
178-
var bKnight2=new Piece("Black Knight", squareSize*6-(squareSize/2), canvasHeight-(squareSize/2), 'black', "K2")
186+
var bKnight2=new Piece("Black Knight", squareSize*6-(squareSize/2), canvasHeight-(squareSize/2)-squareSize*2, 'black', "K2")
179187
bPieces.push(bKnight2)
180-
var bBishop1=new Piece("Black Bishop", squareSize*2-(squareSize/2), canvasHeight-(squareSize/2), 'black', "B1")
188+
var bBishop1=new Piece("Black Bishop", squareSize*2-(squareSize/2), canvasHeight-(squareSize/2)-squareSize*2, 'black', "B1")
181189
bPieces.push(bBishop1)
182-
var bBishop2=new Piece("Black Bishop", squareSize*7-(squareSize/2), canvasHeight-(squareSize/2), 'black', "B2")
190+
var bBishop2=new Piece("Black Bishop", squareSize*7-(squareSize/2), canvasHeight-(squareSize/2)-squareSize*2, 'black', "B2")
183191
bPieces.push(bBishop2)
184-
var bRook1=new Piece("Black Rook", squareSize*1-(squareSize/2), canvasHeight-(squareSize/2), 'black', "R1")
192+
var bRook1=new Piece("Black Rook", squareSize*1-(squareSize/2), canvasHeight-(squareSize/2)-squareSize*2, 'black', "R1")
185193
bPieces.push(bRook1)
186-
var bRook2=new Piece("Black Rook", squareSize*8-(squareSize/2), canvasHeight-(squareSize/2), 'black', "R2")
194+
var bRook2=new Piece("Black Rook", squareSize*8-(squareSize/2), canvasHeight-(squareSize/2)-squareSize*2, 'black', "R2")
187195
bPieces.push(bRook2)
188196
i=1
189-
var bPon1 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2), 'black', "P1")
197+
var bPon1 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2)-squareSize*2, 'black', "P1")
190198
bPieces.push(bPon1)
191199
i+=1
192-
var bPon2 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2), 'black', "P2")
200+
var bPon2 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2)-squareSize*2, 'black', "P2")
193201
bPieces.push(bPon2)
194202
i+=1
195-
var bPon3 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2), 'black', "P3")
203+
var bPon3 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2)-squareSize*2, 'black', "P3")
196204
bPieces.push(bPon3)
197205
i+=1
198-
var bPon4 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2), 'black', "P4")
206+
var bPon4 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2)-squareSize*2, 'black', "P4")
199207
bPieces.push(bPon4)
200208
i+=1
201-
var bPon5 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2), 'black', "P5")
209+
var bPon5 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2)-squareSize*2, 'black', "P5")
202210
bPieces.push(bPon5)
203211
i+=1
204-
var bPon6 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2), 'black', "P6")
212+
var bPon6 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2)-squareSize*2, 'black', "P6")
205213
bPieces.push(bPon6)
206214
i+=1
207-
var bPon7 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2), 'black', "P7")
215+
var bPon7 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2)-squareSize*2, 'black', "P7")
208216
bPieces.push(bPon7)
209217
i+=1
210-
var bPon8 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2), 'black', "P8")
218+
var bPon8 = new Piece("Black Pon", squareSize*i-(squareSize/2), canvasHeight-(squareSize+squareSize/2)-squareSize*2, 'black', "P8")
211219
bPieces.push(bPon8)
212220

213221

0 commit comments

Comments
 (0)