niikita's snakes and ladders w/ gameplay n flow by nikitas89 · Pull Request #33 · wdi-sg/project-1

nikitas89 · 2017-09-30T04:39:54Z

No description provided.

…gger play

soemn · 2017-10-06T17:26:57Z

+  <!-- grid elements -->
+  <div class="wrapper">
+
+    <div class="box" data-id="100"></div>


Recommend using a js loop to append these div elements to the .wrapper div. Data id can be added using jquery's .attr(), or .data(), or an id or class can also be used.

append order can be 100-> 91, 81-> 90, 80-> 71 etc.

soemn · 2017-10-06T17:28:09Z

+    <div class="box" data-id="9"></div>
+    <div class="box" data-id="10"></div>
+  </div>
+  <div class="left">


aside can also be used.

soemn · 2017-10-06T17:37:09Z

+})
+
+var runGame = () => {
+  $('div#gametext').show()


$('#gametext') is enough

soemn · 2017-10-06T17:43:46Z

+  width: 80px;
+  height: 80px;
+  transition: all .2s ease-in;
+  opacity: 0;


is opacity needed? there is no background.

soemn · 2017-10-06T17:46:52Z

+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+    opacity: 1


no-repeat not required if size is bigger than div and set to 100%.
Opacity do not need to be set to 1 if it was not set to 0 beforehand.

soemn · 2017-10-06T17:54:38Z

+    <h3 id="newPos"></h4>
+    <h3 id="jump"></h4>
+    <h1 id="winner"></h1>
+</div>


indentation for various parts need to be updated.

soemn · 2017-10-06T17:59:36Z

@@ -0,0 +1,68 @@
+


indentation style is not consistent

reset.css is not done by her. It is resetting helper.

soemn · 2017-10-06T18:08:39Z

+  // console.log('rollValue', roll);
+  var nextPos = lastMove + roll
+  // console.log('jump', getJump(nextPos));
+  move = getJump(nextPos) === 0 ? nextPos : getJump(nextPos)


When the character move, the grid is updated but the old position is not deleted. Hence if the character takes a snake down. On the next character's turn, it takes the character's furthest traveled position due to grid.lastIndexOf() and starts the next position move from there, this invalidates the role of snakes in the game.

agree. grid should have only one 1 and 2.

soemn · 2017-10-06T18:10:45Z

+}
+
+function getJump(rollValue) {
+  if (jumps[rollValue]) {


maybe update to
if key is valid, return value.
instead of if value is valid, return value. Both works the same though

alexkimin · 2017-10-10T09:43:33Z

+
+}
+
+var player = 1


you may put variables to the top.

alexkimin · 2017-10-10T09:45:08Z

+
+//function set grid
+function playTurn() {
+  // console.log('PLAYER START:', player);


If possible, delete console.log() that is commented out. :)

alexkimin · 2017-10-10T09:51:32Z

+}
+
+function changePlayer() {
+  player === 1 ? player = 2 : player = 1


you may try this player = player === 1 ? 2 : 1

alexkimin · 2017-10-10T09:53:18Z

+  player === 1 ? player = 2 : player = 1
+}
+
+$(document).ready(function() {


I recommend you wrap all variables and functions into the ready function. $(function() { .... })
It will help you to avoid putting your variables and functions into global scope.
Everything in the global scope is weak to manipulation by others.

alexkimin · 2017-10-10T09:56:12Z

+
+$(document).ready(function() {
+  var $dice = $("#dice")
+  $dice.on('click', runGame)


What happens if I put runGame() as a second argument? And why?

alexkimin · 2017-10-10T09:57:16Z

+
+var runGame = () => {
+  $('div#gametext').show()
+  if (whoWon()) {


You may use ternary operator here.

alexkimin · 2017-10-10T09:58:57Z

+var $jump = $("#jump")
+
+function showTexts(lastMove, roll, newPos, move, player) {
+  $diceImg.attr('src', "./assets/images/Dice-" + roll + ".png")


I hope you explorer this : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

alexkimin · 2017-10-10T13:45:52Z

+  move = getJump(nextPos) === 0 ? nextPos : getJump(nextPos)
+  // console.log('move', move)
+  showTexts(lastMove, roll, nextPos, move, player)
+  move > 100 ? move = 100 : grid[move] = player


You may do this with if statement.

If(move > 100) move = 100 grid[move] = player

alexkimin · 2017-10-10T13:48:02Z

+  // console.log('rollValue', roll);
+  var nextPos = lastMove + roll
+  // console.log('jump', getJump(nextPos));
+  move = getJump(nextPos) === 0 ? nextPos : getJump(nextPos)


agree. grid should have only one 1 and 2.

alexkimin · 2017-10-15T08:41:30Z

@@ -0,0 +1,91 @@
+var grid = Array(100).fill(0)


I gave you inappropriate answer about this, so remain new answer here.

Do you remember your var array = Array(10).fill(Array(10).fill(0)) was acting weird?

var array = Array(10).fill(Array(10).fill(0)) var shallowCopied = array.slice() var deepCopied = array.map(e => e.slice()) array[0][3] = 1 console.log(shallowCopied) console.log(deepCopied)

Try above.

That was because .slice() is just shallow copy, inside arrays of 2D were not copied at all. So, when we re-assign value there, our original array was changed also due to sharing references.

I hope you google about shallow copy vs deep copy if you want to know more. :)

nikitas89 added 13 commits September 29, 2017 17:03

niikita's snakes and ladders w/ gameplay n flow

bd6ba8a

working automated js script to simulate game play

24ae9da

2/10 Fix: rmb lasr move of each player. Started on dice button to tri…

de4b6bb

…gger play

update map, showing players. need to animate

b8ac1ca

Snakes and ladders-NS

4575e9a

updated links to root

7344a4b

link 1.49

86944a4

test dice image slash

5baf66a

dice path

4df0d75

changed dice path

f7a567b

added game production link to readme

2e5d16b

6 oct, update readme, cleaned script/css/html

2d21288

code cleaning

da03699

soemn reviewed Oct 6, 2017

View reviewed changes

alexkimin reviewed Oct 10, 2017

View reviewed changes

alexkimin reviewed Oct 15, 2017

View reviewed changes

Uh oh!

Conversation

nikitas89 commented Sep 30, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

soemn Oct 6, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

soemn Oct 6, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexkimin Oct 10, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexkimin Oct 10, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexkimin Oct 10, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexkimin Oct 15, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

soemn Oct 6, 2017 •

edited

Loading

soemn Oct 6, 2017 •

edited

Loading

alexkimin Oct 10, 2017 •

edited

Loading

alexkimin Oct 10, 2017 •

edited

Loading

alexkimin Oct 10, 2017 •

edited

Loading

alexkimin Oct 15, 2017 •

edited

Loading