javascript - Misalignment of tile in puzzle game HTML5 -
i required develop sliding puzzle game in html5 using div tags , document object model. have managed working version i'm having misalignment of tiles issues. please have @ have tried till now:
<?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>sliding tiles</title> <style type="text/css"> h1 {position:absolute; left:100px; font-family:arial} p {position:absolute; left:100px; top:60px; color:red; font-family:arial; font-weight:bold} .board {position:absolute; left:100px; width:400px; top:100px; height:400px; background-color:black; border-style:none} div {position:absolute; width:94px; height:94px; background-color:aqua; border-style:solid; border-width:3px; text-align:center; font-family:century; font-weight:bold; font-size:60px} button {position:absolute; left:150px; width:300px; top:550px; height:50px; background-color:silver; font-family:arial; font-weight:bold; font-size:30px} </style> <script> var rows = new array(3) rows[0] = new array (3) rows[1] = new array (3) rows[2] = new array (3) rows[3] = new array (3) function checkwin() { var winner = false var checker = new array(3) checker[0] = new array (1, 2, 3, 4) checker[1] = new array (5, 6, 7, 8) checker[2] = new array (9, 10, 11, 12) checker[3] = new array (13, 14, 15, 0) (i = 0; < 4; i++){ (j = 0; j < 4; j++){ if (rows[i][j] == checker[i][j]){ winner = false } } } if (winner){ alert("congratulations! you've won!") return true } return false } function move(tile){ var obj = document.getelementbyid('tile' + tile) var win = false (i = 0; < 4; i++){ (j = 0; j < 4; j++){ if (rows[i][j] == tile){ if (j == 1 && rows[i][j - 1] == 0){ obj.style.left = (j - 2) * 100 + 'px' rows[i][j - 1] = tile rows[i][j] = 0 } else if (j == 2 && rows[i][j + 1] == 0){ obj.style.left = (j + 2) * 100 + 'px' rows[i][j + 1] = tile rows[i][j] = 0 } else if (j == 2 && rows[i][j - 1] == 0){ obj.style.left = (j - 2) * 100 + 'px' rows[i][j - 1] = tile rows[i][j] = 0 } else if (j < 4 && rows[i][j + 1] == 0){ obj.style.left = (j + 2) * 100 + 'px' rows[i][j + 1] = tile rows[i][j] = 0 }else if (i > 0 && rows[i - 1][j] == 0){ obj.style.top = (i - 2) * 100 + 'px' rows[i - 1][j] = tile rows[i][j] = 0 }else if (i < 4 && rows[i + 1][j] == 0){ obj.style.top = (i + 2) * 100 + 'px' rows[i + 1][j] = tile rows[i][j] = 0 } win = checkwin() if (win){ break } return } } } } function initialize(){ var check = new array (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15) (i = 0; < 4; i++) { (j = 0; j < 4; j++) { if (i == 3 && j == 3){ rows[i][j] = 0 } else { var n = math.ceil(math.random() * 15) while (check[n - 1] == 0){ n = math.ceil(math.random() * 15) } rows[i][j] = n check[n - 1] = 0 document.getelementbyid('tile' + n).style.left = (j + 1) * 100 + 'px' document.getelementbyid('tile' + n).style.top = (i + 1) * 100 + 'px' } } } } </script> </head> <body> <h1>sliding tiles <p>after starting game, click on tile you'd move...</p> <div class="board" id="board"></div> <div id="tile1" style="left:100px; top:100px" onclick="move(1)"> 1 </div> <div id="tile2" style="left:200px; top:100px" onclick="move(2)"> 2 </div> <div id="tile3" style="left:300px; top:100px" onclick="move(3)"> 3 </div> <div id="tile4" style="left:400px; top:100px" onclick="move(4)"> 4 </div> <div id="tile5" style="left:100px; top:200px" onclick="move(5)"> 5 </div> <div id="tile6" style="left:200px; top:200px" onclick="move(6)"> 6 </div> <div id="tile7" style="left:300px; top:200px" onclick="move(7)"> 7 </div> <div id="tile8" style="left:400px; top:200px" onclick="move(8)"> 8 </div> <div id="tile9" style="left:100px; top:300px" onclick="move(9)"> 9 </div> <div id="tile10" style="left:200px; top:300px" onclick="move(10)"> 10 </div> <div id="tile11" style="left:300px; top:300px" onclick="move(11)"> 11 </div> <div id="tile12" style="left:400px; top:300px" onclick="move(12)"> 12 </div> <div id="tile13" style="left:100px; top:400px" onclick="move(13)"> 13 </div> <div id="tile14" style="left:200px; top:400px" onclick="move(14)"> 14 </div> <div id="tile15" style="left:300px; top:400px" onclick="move(15)"> 15 </div> <form action=""> <button onclick="initialize(); return false">start new game</button> </form> </body> </html> have @ problem:
http://prntscr.com/14rivu http://prntscr.com/14rj9q
any ideas preventing tiles moving out of box?
i tinkered code little , got them line up. check out "move" function, particularly moving negative top or left. subtracting far. try this:
function move(tile){ var obj = document.getelementbyid('tile' + tile) var win = false (i = 0; < 4; i++){ (j = 0; j < 4; j++){ if (rows[i][j] == tile){ if (j == 1 && rows[i][j - 1] == 0){ obj.style.left = j * 100 + 'px' rows[i][j - 1] = tile rows[i][j] = 0 } else if (j == 2 && rows[i][j + 1] == 0){ obj.style.left = (j + 2) * 100 + 'px' rows[i][j + 1] = tile rows[i][j] = 0 } else if (j == 2 && rows[i][j - 1] == 0){ obj.style.left = j * 100 + 'px' rows[i][j - 1] = tile rows[i][j] = 0 } else if (j < 4 && rows[i][j + 1] == 0){ obj.style.left = (j + 2) * 100 + 'px' rows[i][j + 1] = tile rows[i][j] = 0 }else if (i > 0 && rows[i - 1][j] == 0){ obj.style.top = * 100 + 'px' rows[i - 1][j] = tile rows[i][j] = 0 }else if (i < 4 && rows[i + 1][j] == 0){ obj.style.top = (i + 2) * 100 + 'px' rows[i + 1][j] = tile rows[i][j] = 0 } win = checkwin() if (win){ break } return } } } } side note: there scenario can't move tile on far right side left. don't know rules of game or if intentional figured mention it. perhaps separate question? ;)
Comments
Post a Comment