niikita's snakes and ladders w/ gameplay n flow #33
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /* http://meyerweb.com/eric/tools/css/reset/ | ||
| v2.0 | 20110126 | ||
| License: none (public domain) | ||
| */ | ||
|
|
||
| html, body, div, span, applet, object, iframe, | ||
| p, blockquote, pre, | ||
| a, abbr, acronym, address, big, cite, code, | ||
| del, dfn, em, img, ins, kbd, q, s, samp, | ||
| small, strike, strong, sub, sup, tt, var, | ||
| b, u, i, center, | ||
| dl, dt, dd, ol, ul, li, | ||
| fieldset, form, label, legend, | ||
| table, caption, tbody, tfoot, thead, tr, th, td, | ||
| article, aside, canvas, details, embed, | ||
| figure, figcaption, footer, header, hgroup, | ||
| menu, nav, output, ruby, section, summary, | ||
| time, mark, audio, video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| font: inherit; | ||
| vertical-align: baseline; | ||
| } | ||
| /* HTML5 display-role reset for older browsers */ | ||
| article, aside, details, figcaption, figure, | ||
| footer, header, hgroup, menu, nav, section { | ||
| display: block; | ||
| } | ||
| body { | ||
| line-height: 1; | ||
| } | ||
| ol, ul { | ||
| list-style: none; | ||
| } | ||
| blockquote, q { | ||
| quotes: none; | ||
| } | ||
| blockquote:before, blockquote:after, | ||
| q:before, q:after { | ||
| content: ''; | ||
| content: none; | ||
| } | ||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
|
|
||
| .container { | ||
| width: 1050px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .wrapper { | ||
| width: 802px; | ||
| margin: 0 auto; | ||
| display: flex; | ||
| flex-flow: row wrap; | ||
| position: relative; | ||
| background-image: url(../images/gameboard-s.gif); | ||
| background-size: 100%; | ||
| float: left; | ||
| } | ||
| .left{ | ||
| float: right; | ||
|
|
||
| } | ||
| .box { | ||
| border: 0px solid black; | ||
| width: 80px; | ||
| height: 80px; | ||
| transition: all .2s ease-in; | ||
| opacity: 0; | ||
|
There was a problem hiding this comment. is opacity needed? there is no background. |
||
| } | ||
|
|
||
| button { | ||
| background: #4479BA; | ||
| color: #FFF; | ||
| font-family: Josefin Slab; | ||
| font-size: 20px; | ||
| text-align: center; | ||
| border: 1px solid black; | ||
| margin: 25px; | ||
| padding: 15px 25px; | ||
| border-radius: 10px; | ||
| box-shadow: 2px 2px black; | ||
| } | ||
|
|
||
| button:hover{ | ||
| background: #356094; | ||
| } | ||
|
|
||
| img.dice{ | ||
| width: 50px; | ||
| /*padding: 15px 25px;*/ | ||
| } | ||
|
|
||
| .player1{ | ||
| /*background: #356094;*/ | ||
|
|
||
| background-image: url(../images/grumpycat-m.png); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| background-size: 100%; | ||
| opacity: 1 | ||
|
There was a problem hiding this comment. no-repeat not required if size is bigger than div and set to 100%. |
||
| } | ||
| .player2{ | ||
| /*background: #ffa400;*/ | ||
| background-image: url(../images/ham-m.png); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| background-size: 100%; | ||
| opacity: 1 | ||
|
|
||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| var grid = Array(100).fill(0) | ||
|
There was a problem hiding this comment. I gave you inappropriate answer about this, so remain new answer here. Do you remember your Try above. That was because I hope you google about |
||
|
|
||
| //store snakes and ladders keys. jump refers to change of position | ||
| var jumps = { | ||
| 1: 38, | ||
| 4: 14, | ||
| 9: 31, | ||
| 17: 7, | ||
| 21: 42, | ||
| 28: 84, | ||
| 51: 67, | ||
| 54: 34, | ||
| 62: 19, | ||
| 64: 60, | ||
| 72: 91, | ||
| 80: 99, | ||
| 87: 36, | ||
| 93: 73, | ||
| 95: 75, | ||
| 98: 79, | ||
| } | ||
|
|
||
| function getJump(rollValue) { | ||
| if (jumps[rollValue]) { | ||
|
There was a problem hiding this comment. maybe update to |
||
| // console.log(jumps[rollValue]); | ||
| return jumps[rollValue] | ||
| } else return 0 | ||
|
|
||
| } | ||
|
|
||
| var player = 1 | ||
|
|
||
| var move = 0 | ||
|
|
||
| function whoWon() { | ||
| if (grid[100] > 0) { | ||
| $("#winner").text(`Winner is : ${grid[100]}`) | ||
| return grid[100] | ||
| } | ||
| } | ||
|
|
||
| //function set grid | ||
| function playTurn() { | ||
| // console.log('PLAYER START:', player); | ||
|
There was a problem hiding this comment. If possible, delete console.log() that is commented out. :) |
||
| //get last move of this player, last index of player. Set to 1 at start of game (index will be -1). | ||
| var lastMove = grid.lastIndexOf(player) < 1 ? 0 : grid.lastIndexOf(player) | ||
| //get random value 1-6 | ||
| var roll = Math.floor(Math.random() * 6) + 1 | ||
| // console.log('rollValue', roll); | ||
| var nextPos = lastMove + roll | ||
| // console.log('jump', getJump(nextPos)); | ||
| move = getJump(nextPos) === 0 ? nextPos : getJump(nextPos) | ||
|
There was a problem hiding this comment. 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. There was a problem hiding this comment. agree. grid should have only one 1 and 2. |
||
| // console.log('move', move) | ||
| showTexts(lastMove, roll, nextPos, move, player) | ||
| move > 100 ? move = 100 : grid[move] = player | ||
|
There was a problem hiding this comment. You may do this with if statement. |
||
| grid[move] = player | ||
| changePlayer() | ||
| } | ||
|
|
||
| function changePlayer() { | ||
| player === 1 ? player = 2 : player = 1 | ||
|
There was a problem hiding this comment. you may try this |
||
| } | ||
|
|
||
| $(document).ready(function() { | ||
|
There was a problem hiding this comment. I recommend you wrap all variables and functions into the ready function. |
||
| var $dice = $("#dice") | ||
| $dice.on('click', runGame) | ||
|
There was a problem hiding this comment. What happens if I put |
||
| }) | ||
|
|
||
| var runGame = () => { | ||
| $('div#gametext').show() | ||
|
|
||
| if (whoWon()) { | ||
|
|
||
| whoWon() | ||
| } else | ||
| playTurn() | ||
| } | ||
|
|
||
| var $diceImg = $('img.dice') | ||
| var $playerNo = $('#playerNo') | ||
| var $currPos = $("#currPos") | ||
| var $newPos = $("#newPos") | ||
| var $jump = $("#jump") | ||
|
|
||
| function showTexts(lastMove, roll, newPos, move, player) { | ||
| $diceImg.attr('src', "./assets/images/Dice-" + roll + ".png") | ||
|
There was a problem hiding this comment. I hope you explorer this : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals |
||
| $playerNo.text('Current Player: ' + player) | ||
| $currPos.text('Last Position is: ' + lastMove) | ||
| $newPos.text('New position is: ' + newPos) | ||
| $jump.text("Ok, jumping to: " + move) | ||
| $('div').removeClass(`player${player}`); | ||
| // $(`[data-id='${newPos}']`).addClass(`player${player}`) | ||
| $(`[data-id='${move}']`).addClass(`player${player}`); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
indentation style is not consistent
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
reset.css is not done by her. It is resetting helper.