niikita's snakes and ladders w/ gameplay n flow #33

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

No description provided.

…gger play

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

index.html

+  <!-- 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

index.html

+    <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

assets/js/script.js

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


$('#gametext') is enough

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

assets/css/style.css

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


is opacity needed? there is no background.

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

assets/css/style.css

+    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

index.html

+    <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

assets/css/style.css

@@ -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

assets/js/script.js

+  // 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

assets/js/script.js

+}
+
+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

assets/js/script.js

+
+}
+
+var player = 1


you may put variables to the top.

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

assets/js/script.js

+
+//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

assets/js/script.js

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


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

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

assets/js/script.js

+  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

assets/js/script.js

+
+$(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

assets/js/script.js

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


You may use ternary operator here.

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

assets/js/script.js

+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

assets/js/script.js

+  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

assets/js/script.js

+  // 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

assets/js/script.js

@@ -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

index.html

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

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

</div>

<div class="left">

Copy link

soemn Oct 6, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aside can also be used.

soemn reviewed Oct 6, 2017

View reviewed changes

assets/js/script.js

})

var runGame = () => {

$('div#gametext').show()

Copy link

soemn Oct 6, 2017 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$('#gametext') is enough

soemn reviewed Oct 6, 2017

View reviewed changes

alexkimin reviewed Oct 10, 2017

View reviewed changes

alexkimin reviewed Oct 15, 2017

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

niikita's snakes and ladders w/ gameplay n flow #33

niikita's snakes and ladders w/ gameplay n flow #33

nikitas89 commented Sep 30, 2017

soemn Oct 6, 2017

soemn Oct 6, 2017

soemn Oct 6, 2017

soemn Oct 6, 2017 •

edited

Loading

soemn Oct 6, 2017

soemn Oct 6, 2017

soemn Oct 6, 2017 •

edited

Loading

soemn Oct 6, 2017

alexkimin Oct 10, 2017

soemn Oct 6, 2017

alexkimin Oct 10, 2017

soemn Oct 6, 2017

alexkimin Oct 10, 2017

alexkimin Oct 10, 2017

alexkimin Oct 10, 2017

alexkimin Oct 10, 2017 •

edited

Loading

alexkimin Oct 10, 2017

alexkimin Oct 10, 2017

alexkimin Oct 10, 2017 •

edited

Loading

alexkimin Oct 10, 2017 •

edited

Loading

alexkimin Oct 10, 2017

alexkimin Oct 15, 2017 •

edited

Loading

niikita's snakes and ladders w/ gameplay n flow #33

Are you sure you want to change the base?

niikita's snakes and ladders w/ gameplay n flow #33

Conversation

nikitas89 commented Sep 30, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soemn Oct 6, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soemn Oct 6, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexkimin Oct 10, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexkimin Oct 10, 2017 • edited Loading

Choose a reason for hiding this comment

alexkimin Oct 10, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexkimin Oct 15, 2017 • edited Loading

Choose a reason for hiding this comment

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