Move div to certain table cell according to random number
本问题已经有最佳答案,请猛点这里访问。
我是javascript新手。我正在尝试尽可能多地使用本地的javascript代码制作蛇和梯子游戏。我的问题是,我不能根据按骰子图像时产生的随机数将玩家从初始位置移动。有人能帮我移动球员吗?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | var gameBoard = { createBoard: function(dimension, mount, intialPosition) { 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; for (var r = 0; r < dimension; r++) { rowClone = row.cloneNode(true); table.appendChild(rowClone); for (var c = 0; c < dimension; c++) { cellClone = cell.cloneNode(true); rowClone.appendChild(cellClone); } } mount.appendChild(table); output = gameBoard.enumerateBoard(table, intialPosition); } 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; for (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; for (var i = 0; i < cellsLength; i++) { if (odd == true) { cellNumber = --size + rowCounter - i; } else { cellNumber = rowCounter; } cells[i].className = i % 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 = 'lastCell'; var firstRow = rows[9].getElementsByTagName('td'); firstRow[0].id = 'firstCell'; intialPosition(); return gameBoard; } }; window.onload = (function(e) { gameBoard.createBoard(10,"#grid", intialPosition); }); var face1 = new Image() face1.src ="d1.gif" var face2 = new Image() face2.src ="d2.gif" var face3 = new Image() face3.src ="d3.gif" var face4 = new Image() face4.src ="d4.gif" var face5 = new Image() face5.src ="d5.gif" var face6 = new Image() face6.src ="d6.gif" function rollDice() { var randomdice = Math.floor(Math.random() * 6) + 1; document.images["mydice"].src = eval("face" + randomdice +".src") if (randomdice == 6) { alert('Congratulations! You got 6! Roll the dice again'); } return randomdice; } function intialPosition() { $("#firstCell").append($("#player1")); $("#firstCell").append($("#player2")); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | /*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; } #lastCell { background-image: url('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%; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link href="StyleSheet1.css" rel="stylesheet" /> <script src="jquery-2.1.4.min.js"> </head> <body> <img src="oie_eRDOY2iqd5oQ.gif" /> <img src="oie_485727sRN4KKBG.png" /> <img src="humanPiece.png" /> <img src="computerPiece.png" /> <button type="button" name="reset">New Game</button> <button type="button" name="reset">Reset</button> <button type="button" name="addPlayer">Add Player</button> <img src="d1.gif" name="mydice" onclick="rollDice()" style="background-color: white;"> <!--<h2 id="status" style="clear:left;">--> <script src="JavaScript1.js"> </body> </html> |
因为没能完成比赛,我很难过。我真的需要帮助。事先谢谢。
好吧,首先这个问题已经在so上被问过和回答过了,表单元格和通常的元素一样:)
因为您无论如何都在使用jquery,所以可以使用
1 2 | var element = $('td:eq(0) span').detach(); $('td:eq(1)').append(element); |
这是一个JSFIDLE。
或者,如本文所建议的,您可以使用本机JS解决方案。