html - JavaScript: Problems in Snakes and Ladders Game -
i new javascript. making snakes , ladders game. facing problems on code.
- first can not store current position of player can count next destination.
- the dice starts 1 @ beginning of game , causes player start second cell.
- the big snake , ladder divs displayed onto board not auto fit size of board.
here code wrote far snakes , ladder game
var gameboard = { createboard: function(dimension, mount) { var mount = document.queryselector(mount); if (!dimension || isnan(dimension) || !parseint(dimension, 10)) { return false; } else { dimension = typeof dimension === 'string' ? parseint(dimension, 10) : dimension; var table = document.createelement('table'), row = document.createelement('tr'), cell = document.createelement('td'), rowclone, cellclone; var output; (var r = 0; r < dimension; r++) { rowclone = row.clonenode(true); table.appendchild(rowclone); (var c = 0; c < dimension; c++) { cellclone = cell.clonenode(true); rowclone.appendchild(cellclone); } } mount.appendchild(table); output = gameboard.enumerateboard(table); } return output; }, enumerateboard: function(board) { var rows = board.getelementsbytagname('tr'), text = document.createtextnode(''), rowcounter = 1, size = rows.length, cells, cellslength, cellnumber, odd = false, control = 0; (var r = size - 1; r >= 0; r--) { cells = rows[r].getelementsbytagname('td'); cellslength = cells.length; rows[r].classname = r % 2 == 0 ? 'even' : 'odd'; odd = ++control % 2 == 0 ? true : false; size = rows.length; (var = 0; < cellslength; i++) { if (odd == true) { cellnumber = --size + rowcounter - i; } else { cellnumber = rowcounter; } cells[i].classname = % 2 == 0 ? 'even' : 'odd'; cells[i].id = cellnumber; cells[i].appendchild(text.clonenode()); cells[i].firstchild.nodevalue = cellnumber; rowcounter++; } } var lastrow = rows[0].getelementsbytagname('td'); lastrow[0].id = '100'; var firstrow = rows[9].getelementsbytagname('td'); firstrow[0].id = '1'; return gameboard; } }; gameboard.createboard(10, "#grid"); function intialposition() { $("#1").append($("#player1")); $("#1").append($("#player2")); var currentposition = parseint($("#1").attr('id')); return currentposition; } var w = intialposition(); var face1 = new image() face1.src = "http://s19.postimg.org/fa5etrfy7/image.gif" var face2 = new image() face2.src = "http://s19.postimg.org/qb0jys873/image.gif" var face3 = new image() face3.src = "http://s19.postimg.org/fpgoms1vj/image.gif" var face4 = new image() face4.src = "http://s19.postimg.org/xgsb18ha7/image.gif" var face5 = new image() face5.src = "http://s19.postimg.org/lsy96os5b/image.gif" var face6 = new image() face6.src = "http://s19.postimg.org/4gxwl8ynz/image.gif" function rolldice() { var randomdice = math.floor(math.random() * 6) + 1; document.images["mydice"].src = eval("face" + randomdice + ".src") if (randomdice == 6) { alert('congratulations! got 6! roll dice again'); } return randomdice; } var random1 = rolldice(); var destination = w + random1; function move() { $('#' + destination).append($("#player1")); var x = parseint($('#' + destination).attr('id')); var random = rolldice(); destination = x + random; //alert(x); return destination; } $(document).ready(function() { //$('#' + destination).delay(100).fadeout().fadein('slow'); $('#' + destination).fadein(100).fadeout(100).fadein(100).fadeout(100).fadein(100); }); var next = move();/*body { background-image: url('snakesandladder2.png'); background-repeat: no-repeat; background-size: 100%; background-color: #4f96cb; }*/ #game { width: 80%; margin-left: auto; margin-right: auto; display: table; } #gameboardsection { border: 3px inset #0ff; border-radius: 10px; width: 65%; display: table-cell; } table { width: 100%; } td { border-radius: 10px; width: 60px; height: 60px; line-height: normal; vertical-align: bottom; text-align: left; border: 0px solid #ffffff; position: relative; } table tr:nth-child(odd) td:nth-child(even), table tr:nth-child(even) td:nth-child(odd) { background-color: powderblue; } table tr:nth-child(even) td:nth-child(even), table tr:nth-child(odd) td:nth-child(odd) { background-color: skyblue; } #100 { background-image: url('http://s19.postimg.org/ceioc1g8v/rotstar2_e0.gif'); background-repeat: no-repeat; background-size: 100%; } #ladder { position: absolute; top: 300px; left: 470px; -webkit-transform: rotate(30deg); z-index: 1; opacity: 0.7; } #bigsnake { position: absolute; top: 20px; left: 200px; opacity: 0.7; z-index: 1; } #diceandplayersection { background-color: lightpink; border: 1px; border-style: solid; display: table-cell; border-radius: 10px; border: 3px inset #0ff; width: 35%; }<body> <div id="game"> <div id="gameboardsection"> <div id="grid"></div> <div id="ladder"> <img src="http://s19.postimg.org/otai9he2n/oie_e_rdoy2iqd5o_q.gif" /> </div> <div id="bigsnake"> <img src="http://s19.postimg.org/hrcknaagz/oie_485727s_rn4_kkbg.png" /> </div> <div id="player1" style="position:absolute; top:10px; left:10px;"> <img src="http://s19.postimg.org/t108l496n/human_piece.png" /> </div> <div id="player2" style="position:absolute; top:15px; left:5px;"> <img src="http://s19.postimg.org/l6zmzq1dr/computer_piece.png" /> </div> </div> <div id="diceandplayersection"> <div id="reset"> <button type="button" name="newgame" onclick="gamevm.newgame();">new game</button> </div> <div> <button type="button" name="reset" onclick="gamevm.defaultsetup()">reset</button> </div> <div> <button type="button" name="addplayer">add player</button> </div> <div id="dicesection"> <img src="d1.gif" name="mydice" onclick="rolldice()" style="background-color: white;"> </div> </div> </div> </body>can me on that? in advance
- to store user current position , maintain separate variable storing destination of diff player.
- to start play 1 , remove intialposition() , make var w=0 , once call rolldice() , start 0.
- in order auto fit based on change in screen size , use bootstrap div can auto fit size of div. here link http://getbootstrap.com/css/#grid
Comments
Post a Comment