Skip to content

Commit bd48b7f

Browse files
kossovkossov
committed
small fixes, added first player turn
choosing which player must throw dices first
1 parent 659eaf8 commit bd48b7f

3 files changed

Lines changed: 66 additions & 75 deletions

File tree

‎index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
<link rel="stylesheet" href="styles/style.css"/>
77
</head>
88
<body>
9-
<canvas id="board-canvas" width="718" height="530"></canvas>
9+
<canvas id="board-canvas" width="718" height="530">
10+
Your browser does not support canvas. Please try again with a different browser.
11+
</canvas>
1012
<script src="scripts\index.js"></script>
1113
</body>
1214
</html>

‎scripts/index.js‎

Lines changed: 61 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,21 @@ var fieldWidth = 54, // the width of every of the 24 fields
77
checkerHeight = 42, // the height of the checker after being fully drawn in pixels
88
checkerRadius = 21, // full width = 44; outer stroke 1px
99
checkerInnerCircleRadius = 10,
10-
currentPlayer = 0,
11-
playerLooper = -1,
12-
INITIALDICEVALUE = 6,
13-
firstDice,
14-
secondDice;
10+
initialDiceValue = 6;
1511

16-
// GAME ELEMENTS - canvas, ctx, keystate
12+
// GAME ELEMENTS - canvas, ctx, keystate, etc.
1713
var canvas,
1814
ctx,
19-
clickedField;
15+
diceCanvas,
16+
diceCtx,
17+
clickedField,
18+
firstPlayer,
19+
secondPlayer,
20+
firstDice,
21+
secondDice,
22+
firstDiceThrow,
23+
firstPlayerOnTurn,
24+
mustThrowDices;
2025

2126
// DEFINING GAME OBJECTS - player, checker, dice, board(not if it is just a background) ...
2227
var player = (function () {
@@ -99,7 +104,7 @@ var player = (function () {
99104
return player;
100105
}());
101106

102-
var field = function () { /* the board is filled with 24 fields,
107+
var field = (function () { /* the board is filled with 24 fields,
103108
IT IS A RESPONSIBILITY OF THE FIELDS TO GIVE COORDINATES TO THE CHECKERS, WITH RESPECT TO THEIR OWN X,Y COORDINATES
104109
IN THIS WAY WE DON'T CARE HOW TO STACK CHECKERS AND TO TAKE INTO ACCOUNT THEIR Xs AND Ys,
105110
THE FIELD JUST STACKS THEM DEPENDING ON THE COUNT IT IS HOLDING, GIVING HIS OWN X, Y */
@@ -135,8 +140,9 @@ var field = function () { /* the board is filled with 24 fields,
135140
} else {
136141
if (this.y < canvas.height / 2) { // if field is in the upper half of the board, should stack them up to bottom
137142
fieldCenter = this.x + (fieldWidth / 2); // x coordinate for the checker center
138-
this.checkers[i].draw(fieldCenter, this.y + i * checkerHeight + checkerRadius + 2); /* +2 just to look better,
139-
the checker from the board frame */
143+
this.checkers[i].draw(fieldCenter, this.y + i * checkerHeight + checkerRadius + 2);
144+
/* +2 just to look better,
145+
the checker from the board frame */
140146
} else { // when the field is in the lower part, should stack them from bottom to up
141147
fieldCenter = this.x + (fieldWidth / 2); // x coordinate for the checker center
142148
this.checkers[i].draw(fieldCenter, this.y - i * checkerHeight + checkerRadius - 2); // -2 just to look better
@@ -174,9 +180,9 @@ var field = function () { /* the board is filled with 24 fields,
174180
});
175181

176182
return field;
177-
}();
183+
}());
178184

179-
var checker = function () {
185+
var checker = (function () {
180186
var checker = {
181187
init: function (color) {
182188
this.color = color; // can be only 'black' or 'white'
@@ -216,9 +222,9 @@ var checker = function () {
216222
});
217223

218224
return checker;
219-
}();
225+
}());
220226

221-
var board = function () {
227+
var board = (function () {
222228
var bottomSideAllSet, // flag to indicate that we must start with a field having 5 checkers in it(the 12th field)
223229
// at bottom we start with 12. 5 3 5 2 .23
224230
// at top we start with 11. 5 3 5 2 .0
@@ -297,18 +303,15 @@ var board = function () {
297303
}
298304

299305
return gameboard;
300-
}();
306+
}());
301307

302308
var dice = (function () {
303-
304-
var dice = Object.create({});
305-
306-
Object.defineProperty(dice, 'init', {
307-
value: function () {
308-
this.number = INITIALDICEVALUE;
309+
var dice = {
310+
init: function () {
311+
this.number = initialDiceValue;
309312
return this;
310313
}
311-
}); // DICE SHOULD BE CREATED WHEN THE BOARD IS CREATED !!!!!!!!!
314+
};
312315

313316
Object.defineProperty(dice, 'number', {
314317
get: function () {
@@ -320,91 +323,77 @@ var dice = (function () {
320323
}
321324
});
322325

323-
Object.defineProperty(dice, 'drawNewNumber', {
326+
Object.defineProperty(dice, 'generateNewNumber', {
324327
value: function () {
325-
this.number = Math.round(Math.random() * 5) + 1;
328+
return this.number = Math.floor(Math.random() * 6) + 1;
326329
}
327330
});
328331

332+
function checkIfDiceValueIsValid(number) {
333+
if (isNaN(number) || number % 1 != 0 || number < 1 || number > 6) {
334+
// throw new Error('Dice number is invalid!');
335+
}
336+
}
337+
329338
return dice;
330339
}());
331340

332341

333-
function checkIfDiceValueIsValid(number) {
334-
if (isNaN(number) || number % 1 != 0 || number < 1 || number > 6) {
335-
throw new Error('Dice number is invalid!');
336-
}
337-
338-
339-
}
340342
// function newGame() or main()
341343
// create initiate and append game canvas
342-
// keep track of keyboard presses
343344
// INITIATE GAME OBJECTS;
344-
// GAME LOOP, STARTS THE ANIMATION;
345-
346-
347-
348-
349-
350345
function newGame() {
351346
canvas = document.getElementById('board-canvas');
352347
ctx = canvas.getContext('2d');
353348

354349
// INIT GAME OBJECTS, SETS UP GAME
355350
board.init();
351+
firstDice = Object.create(dice).init();
352+
secondDice = Object.create(dice).init();
353+
firstDiceThrow = true;
356354
}
357355
newGame();
358-
// canvas.addEventListener('click', findPressedField);
359356

360357
function play() {
361358
// GAME LOOP - game logic, updating the fields, players turns, dices etc. Update update update
362359
// change fields depending on how the player interact(key presses)
363360
canvas.addEventListener('click', findPressedField);
364-
firstDice = Object.create(dice).init();
365-
secondDice = Object.create(dice).init();
366-
367-
while (true) {
368-
369-
// CHANGE PLAYER
370-
playerLooper++;
371-
currentPlayer = (playerLooper % 2) + 1; //if playerLooper % 2 ===0 -> currentPlayer = 1 , else current player = 2
372-
//LOGIC NEEDS TO BE IMPLEMENTED FOR CURRENT PLAYER
373-
374-
375-
376-
377-
//THROW DISE
378-
firstDice.drawNewNumber();
379-
secondDice.drawNewNumber();
380-
//ANIMATION SHOULD BE IMPLEMENTED
381-
382-
383-
384-
//CHECK IF ANY POSSIBLE MOVE
385-
//TODO
386-
387-
//IF ANY POSSIBLE MOVES AVALIABLE --> CHECK FOR NEW CLICKS AND CATCH START POSITION , else change player
388-
//IF ANY POSSIBLE MOVES AVALIABLE --> CHECK IF NEW SET/CLICKED POSITION IS CORRECT AND MOVE PULL , else try again
389-
390-
391-
break; //JUST NOT TO CRASH IT ALL YET
392361

362+
//LOGIC NEEDS TO BE IMPLEMENTED FOR CURRENT PLAYER
393363

394364

365+
//THROW DICE - at first time, throw to see who will be playing first
366+
if (firstDiceThrow) {
367+
firstDiceThrow = false;
368+
firstDice.generateNewNumber();
369+
secondDice.generateNewNumber();
370+
if (firstDice.number > secondDice.number) {
371+
firstPlayerOnTurn = true;
372+
} else if (firstDice.number < secondDice.number) {
373+
firstPlayerOnTurn = false;
374+
} else {
375+
firstDiceThrow = true;
376+
play();
377+
}
378+
} else {
379+
firstDice.generateNewNumber();
380+
secondDice.generateNewNumber();
395381
}
396382

397-
draw();
398-
requestAnimationFrame(play);
383+
//CHECK IF ANY POSSIBLE MOVE
399384

400-
// calls function update()
401-
// checkForWinner etc... this all should go here
385+
//IF ANY POSSIBLE MOVES AVAILABLE --> CHECK FOR NEW CLICKS AND CATCH START POSITION , else change player
386+
//IF ANY POSSIBLE MOVES AVAILABLE --> CHECK IF NEW SET/CLICKED POSITION IS CORRECT AND MOVE PULL , else try again
402387

388+
// DRAW
403389
// draws every time and if we have changes its ok
390+
draw();
404391

392+
// CHANGE PLAYER
393+
firstPlayerOnTurn ? firstPlayerOnTurn = false : firstPlayerOnTurn = true;
405394

395+
requestAnimationFrame(play);
406396
}
407-
408397
play();
409398

410399
function findPressedField(event) {

‎styles/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ body {
22
background-image: url("../images/niceTry_background.jpg");
33
background-repeat: no-repeat;
44
margin: 0;
5+
padding: 10px;
56
}
67
#board-canvas {
78
background-image: url("../images/niceTry_Board.jpg");
8-
margin-top: 10px;
9-
margin-left: 10px;
109
box-shadow: 10px 15px 30px black;
10+
float: left;
1111
}

0 commit comments

Comments
 (0)