2016-01-07 20 views
6

में div संलग्न करें मैं सांप और सीढ़ी खेल बना रहा हूं। मैं प्लेयर 1 को बोर्ड में पहले सेल में जोड़ना चाहता हूं, लेकिन यह मेरी अपेक्षा के अनुसार काम नहीं करता है। मुझे इसे हल करने के तरीके पर मदद चाहिए। enter image description hereटीडी

इस कोड को मैं पहले से

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; 
 
     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); 
 
    } 
 
    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'; 
 
    return gameBoard; 
 
    } 
 
}; 
 

 
window.onload = (function(e) { 
 
    gameBoard.createBoard(10, "#grid"); 
 
}); 
 

 
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 move() { 
 
    $("#firstCell").append("#player1"); 
 
} 
 
move();
/*body { 
 
    background-image: url('snakesandladder2.png'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    background-color: #4f96cb; 
 
}*/ 
 

 
table { 
 
    width: 100%; 
 
} 
 
td { 
 
    border-radius: 10px; 
 
    width: 60px; 
 
    height: 60px; 
 
    line-height: normal; 
 
    vertical-align: bottom; 
 
    text-align: left; 
 
    border: 0px solid #FFFFFF; 
 
} 
 
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; 
 
} 
 

 
#game { 
 
    width: 80%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#gameBoardSection { 
 
    border: 3px inset #0FF; 
 
    border-radius: 10px; 
 
    width: 65%; 
 
    float: left; 
 
} 
 
#grid { 
 
    z-index: -1; 
 
} 
 
#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; 
 
} 
 
#player1 { 
 
    border: 1px; 
 
    border-style: solid; 
 
    position: absolute; 
 
} 
 
#diceAndPlayerSection { 
 
    background-color: lightgrey; 
 
    float: left; 
 
    background-size: cover 
 
} 
 
#lastCell { 
 
    background-image: url('rotstar2_e0.gif'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <link href="StyleSheet1.css" rel="stylesheet" /> 
 
    <script src="jquery-2.1.4.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="game"> 
 
    <div id="gameBoardSection"> 
 
     <div id="grid"></div> 
 
     <div id="ladder"> 
 
     <img src="oie_eRDOY2iqd5oQ.gif" /> 
 
     </div> 
 
     <div id="bigSnake"> 
 
     <img src="oie_485727sRN4KKBG.png" /> 
 
     </div> 
 
     <div id="player1" style="border: 1px; border-style: solid; position:absolute;"> 
 
     <!--style="position: absolute; top: 597px; z-index: 1;"--> 
 
     <img src="humanPiece.png" /> 
 
     </div> 
 

 
    </div> 
 
    <div id="diceAndPlayerSection"> 
 
     <div id="reset"> 
 
     <button type="button" name="reset">New Game</button> 
 
     </div> 
 
     <div> 
 
     <button type="button" name="reset">Reset</button> 
 
     </div> 
 
     <div> 
 
     <button type="button" name="addPlayer">Add Player</button> 
 
     </div> 
 
     <div id="diceSection"> 
 
     <img src="d1.gif" name="mydice" onclick="rollDice()"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <script src="JavaScript1.js"></script> 
 

 
</body> 
 

 
</html>

धन्यवाद किया जाता है।

+1

यह बहुत सी कोड है। +1 अगर आप सब कुछ पढ़ने के लिए नहीं जा रहे हैं। – Fleuv

उत्तर

1

2 परिवर्तन यहाँ सुझाव है:

  • window.onload के अंदर अपने move() समारोह कॉल अपने बोर्ड load के बाद बनाया जाता है और DOM बनाने के बाद element #firstCell हो जाता है के बाद से।
  • string-#player1 के बजाय यह element-#player1 होना चाहिए था। तो बस $() अंदर "#player1" लपेट तरह - $("#firstCell").append($("#player1"));

अपडेट किया गया कोड

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; 
 
     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); 
 
    } 
 
    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'; 
 
    return gameBoard; 
 
    } 
 
}; 
 

 
window.onload = (function(e) { 
 
    gameBoard.createBoard(10, "#grid"); 
 
    move(); 
 

 
}); 
 

 
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 move() { 
 
    $("#firstCell").append($("#player1")); 
 
}
/*body { 
 
    background-image: url('snakesandladder2.png'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    background-color: #4f96cb; 
 
}*/ 
 

 
table { 
 
    width: 100%; 
 
} 
 
td { 
 
    border-radius: 10px; 
 
    width: 60px; 
 
    height: 60px; 
 
    line-height: normal; 
 
    vertical-align: bottom; 
 
    text-align: left; 
 
    border: 0px solid #FFFFFF; 
 
} 
 
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; 
 
} 
 
#game { 
 
    width: 80%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#gameBoardSection { 
 
    border: 3px inset #0FF; 
 
    border-radius: 10px; 
 
    width: 65%; 
 
    float: left; 
 
} 
 
#grid { 
 
    z-index: -1; 
 
} 
 
#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; 
 
} 
 
#player1 { 
 
    border: 1px; 
 
    border-style: solid; 
 
    position: absolute; 
 
} 
 
#diceAndPlayerSection { 
 
    background-color: lightgrey; 
 
    float: left; 
 
    background-size: cover 
 
} 
 
#lastCell { 
 
    background-image: url('rotstar2_e0.gif'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <link href="StyleSheet1.css" rel="stylesheet" /> 
 
    <script src="jquery-2.1.4.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="game"> 
 
    <div id="gameBoardSection"> 
 
     <div id="grid"></div> 
 
     <div id="ladder"> 
 
     <img src="oie_eRDOY2iqd5oQ.gif" /> 
 
     </div> 
 
     <div id="bigSnake"> 
 
     <img src="oie_485727sRN4KKBG.png" /> 
 
     </div> 
 
     <div id="player1" style="border: 1px; border-style: solid; position:absolute;"> 
 
     <!--style="position: absolute; top: 597px; z-index: 1;"--> 
 
     <img src="humanPiece.png" /> 
 
     </div> 
 

 
    </div> 
 
    <div id="diceAndPlayerSection"> 
 
     <div id="reset"> 
 
     <button type="button" name="reset">New Game</button> 
 
     </div> 
 
     <div> 
 
     <button type="button" name="reset">Reset</button> 
 
     </div> 
 
     <div> 
 
     <button type="button" name="addPlayer">Add Player</button> 
 
     </div> 
 
     <div id="diceSection"> 
 
     <img src="d1.gif" name="mydice" onclick="rollDice()"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <script src="JavaScript1.js"></script> 
 

 
</body> 
 

 
</html>

1

तुम एक आईडी स्ट्रिंग के बजाय एक jQuery वस्तु डाल करने के लिए है:

$("#firstCell").append($("#player1")); 

मुझे लगता है कि आप एक कॉलबैक ऑनलोड में पारित के रूप में इस move() समारोह बुलाना चाहिए क्योंकि आप एक तत्व जो कॉल के समय पर नहीं बनाया गया था करने के लिए एक वस्तु संलग्न करने के लिए कोशिश कर रहे हैं:

window.onload = (function(e) { 
    gameBoard.createBoard(10, "#grid", move); // <-----pass it here 
}); 

अब इस पद्धति में इसे कहते return से पहले:

var gameBoard = { 
 
    createBoard: function(dimension, mount, move) { 
 
    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, move); 
 
    } 
 
    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'; 
 
    move(); 
 
    return gameBoard; 
 
    } 
 
}; 
 

 
window.onload = (function(e) { 
 
    gameBoard.createBoard(10, "#grid", move); 
 
}); 
 

 
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 move() { 
 
    $("#firstCell").append($("#player1")); 
 
}
/*body { 
 
    background-image: url('snakesandladder2.png'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    background-color: #4f96cb; 
 
}*/ 
 

 
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;   /*<--------add this one required.*/ 
 
} 
 
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; 
 
} 
 
#game { 
 
    width: 80%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#gameBoardSection { 
 
    border: 3px inset #0FF; 
 
    border-radius: 10px; 
 
    width: 65%; 
 
    float: left; 
 
} 
 
#grid { 
 
    z-index: -1; 
 
} 
 
#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; 
 
} 
 
#player1 { 
 
    border: 1px; 
 
    border-style: solid; 
 
    position: absolute; 
 
} 
 
#diceAndPlayerSection { 
 
    background-color: lightgrey; 
 
    float: left; 
 
    background-size: cover 
 
} 
 
#lastCell { 
 
    background-image: url('rotstar2_e0.gif'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="game"> 
 
    <div id="gameBoardSection"> 
 
    <div id="grid"></div> 
 
    <div id="ladder"> 
 
     <img src="oie_eRDOY2iqd5oQ.gif" /> 
 
    </div> 
 
    <div id="bigSnake"> 
 
     <img src="oie_485727sRN4KKBG.png" /> 
 
    </div> 
 
    <div id="player1" style="border: 1px; border-style: solid; top:10px; left:10px; position:absolute;"> 
 
     <!-----------------------------------------------------check top left css props---> 
 
     <img src="humanPiece.png" /> 
 
    </div> 
 

 
    </div> 
 
    <div id="diceAndPlayerSection"> 
 
    <div id="reset"> 
 
     <button type="button" name="reset">New Game</button> 
 
    </div> 
 
    <div> 
 
     <button type="button" name="reset">Reset</button> 
 
    </div> 
 
    <div> 
 
     <button type="button" name="addPlayer">Add Player</button> 
 
    </div> 
 
    <div id="diceSection"> 
 
     <img src="d1.gif" name="mydice" onclick="rollDice()"> 
 
    </div> 
 
    </div> 
 
</div>

+0

मैंने ऐसा किया लेकिन यह उम्मीद के अनुसार काम नहीं करता है –

+0

@ सफ़ामामडौह सलेम मुझे लगता है कि आपको ऑनलोड कॉल में कॉलबैक के रूप में इस 'चाल()' फ़ंक्शन को पास करने की आवश्यकता है। मैं प्रतीक्षा करूँगा ... – Jai

+0

@SafaaMamdouhSalem बस फिर से अपडेट किया गया। यदि यह मदद करता है तो आप एक नज़र डाल सकते हैं। – Jai

संबंधित मुद्दे