this question has answer here:
i'm trying code "the 15 game" using jquery in html, see page. game table of "boxes" in order 1-15.
my code:
// insert numbers 1 arraysize function insertelements(myarr, arraysize){ for (var = 1; < arraysize; i++ ) { myarr.push(i); } } // check if 2 cells in range function canmove(col, row, empty_row, empty_col){ if((row == empty_row+1) && (col == empty_col) || (row == empty_row-1) && (col == empty_col) || (row == empty_row) && (col == empty_col+1) || (row == empty_row) && (col == empty_col-1)){ return true; } else return false; } // swap elements in array function swapelements(myarr, indexa, indexb){ // check bounds if((indexa > myarr.length) || (indexa < 0) || (indexb > myarr.length) || (indexb < 0)) { alert("out of bounds"); } else{ var temp = myarr[indexa]; myarr[indexa] = myarr[indexb]; myarr[indexb] = temp; } } // wait page finish loading $(document).ready(function(){ // create array var myarr = []; var arraysize = 17; var lastelement = arraysize-1; var empty_row; var empty_col; var empty_cell; var col; var row; var nonempty_cell; // insert elements insertelements(myarr, arraysize); // number of shuffles var shufflenum = 10000; // shuffle array (var = 0; < shufflenum; i++ ) { var f = math.floor((math.random()*16)+0); var s = math.floor((math.random()*16)+0); swapelements(myarr, f, s); } //printarray(myarr, myarr.length); = 0; // each td in table $(".maincontainer td").each(function() { // radnom value array val = myarr[i]; // if value last element // assign cell emptycell , add class empty if(val == lastelement) { empty_cell = $(this); empty_cell.addclass("empty"); empty_row = this.parentnode.rowindex; empty_col = this.cellindex; } // else, assign value val text , add class nonempty else { $(this).text(val); $(this).addclass("nonempty"); } ++i; }); // if 1 of nonempty boxes clicked $(".nonempty").click(function(){ // assign cell has been clicked nonempty cell nonempty_cell = $(this); row = this.parentnode.rowindex; col = this.cellindex; // if cell in range of empty cell if(canmove(col, row, empty_row, empty_col)){ // swap empty cell , non emptycell clicked var temp = empty_cell; empty_cell = nonempty_cell; nonempty_cell = temp; // swap coordinates var temprow = row; row = empty_row; empty_row = temprow; var tempcol = col; col = empty_col; empty_col = tempcol; // text old empty cell var new_value = $(empty_cell).text(); // assign value nonempty cell text , change class nonempty $(nonempty_cell).text(new_value); $(nonempty_cell).removeclass("empty").addclass("nonempty"); // "erase" textstring , change class empty $(empty_cell).removeclass("nonempty").addclass("empty"); $(empty_cell).text(""); } else { alert("cant move!"); } }); $(".empty").click(function(){ alert("clicked empty cell!"); }); });<!doctype html> <html lang='sv'> <head> <meta charset="utf-8" > <title>the 15 game</title> <style> .maincontainer { width: 35%; border: 10px solid black; } .maincontainer td { width: 100px; height: 100px; text-align: center; font-size: 100px; border: 3px solid black; } .nonempty { background-color: red; } .empty { background-color: #c0c0c0; } .nonempty:hover { border: 3px solid white; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- external javascript game --> <script type="text/javascript" src="javascript/15game.js"></script> </head> <body> <!-- table maincontainer of 16 boxes --> <table class="maincontainer" > <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>the code kind of working correctly. when click on cell in range of empty cell, 2 cells being swapped. problem cell first assigned class "empty" seems keep class "empty" when try replace class class "nonempty".
i'm sorry typos, english not first language. help!
you binding events initial classes of elements. changing classes later won't change event bindings.
you can use delegated events instead, way detect class @ time of event:
$(".maincontainer").on("click", ".nonempty", function(){ and
$(".maincontainer").on("click", ".empty", function(){ demo:
// insert numbers 1 arraysize function insertelements(myarr, arraysize){ for (var = 1; < arraysize; i++ ) { myarr.push(i); } } // check if 2 cells in range function canmove(col, row, empty_row, empty_col){ if((row == empty_row+1) && (col == empty_col) || (row == empty_row-1) && (col == empty_col) || (row == empty_row) && (col == empty_col+1) || (row == empty_row) && (col == empty_col-1)){ return true; } else return false; } // swap elements in array function swapelements(myarr, indexa, indexb){ // check bounds if((indexa > myarr.length) || (indexa < 0) || (indexb > myarr.length) || (indexb < 0)) { alert("out of bounds"); } else{ var temp = myarr[indexa]; myarr[indexa] = myarr[indexb]; myarr[indexb] = temp; } } // wait page finish loading $(document).ready(function(){ // create array var myarr = []; var arraysize = 17; var lastelement = arraysize-1; var empty_row; var empty_col; var empty_cell; var col; var row; var nonempty_cell; // insert elements insertelements(myarr, arraysize); // number of shuffles var shufflenum = 10000; // shuffle array (var = 0; < shufflenum; i++ ) { var f = math.floor((math.random()*16)+0); var s = math.floor((math.random()*16)+0); swapelements(myarr, f, s); } //printarray(myarr, myarr.length); = 0; // each td in table $(".maincontainer td").each(function() { // radnom value array val = myarr[i]; // if value last element // assign cell emptycell , add class empty if(val == lastelement) { empty_cell = $(this); empty_cell.addclass("empty"); empty_row = this.parentnode.rowindex; empty_col = this.cellindex; } // else, assign value val text , add class nonempty else { $(this).text(val); $(this).addclass("nonempty"); } ++i; }); // if 1 of nonempty boxes clicked $(".maincontainer").on("click", ".nonempty", function(){ // assign cell has been clicked nonempty cell nonempty_cell = $(this); row = this.parentnode.rowindex; col = this.cellindex; // if cell in range of empty cell if(canmove(col, row, empty_row, empty_col)){ // swap empty cell , non emptycell clicked var temp = empty_cell; empty_cell = nonempty_cell; nonempty_cell = temp; // swap coordinates var temprow = row; row = empty_row; empty_row = temprow; var tempcol = col; col = empty_col; empty_col = tempcol; // text old empty cell var new_value = $(empty_cell).text(); // assign value nonempty cell text , change class nonempty $(nonempty_cell).text(new_value); $(nonempty_cell).removeclass("empty").addclass("nonempty"); // "erase" textstring , change class empty $(empty_cell).removeclass("nonempty").addclass("empty"); $(empty_cell).text(""); } else { alert("cant move!"); } }); $(".maincontainer").on("click", ".empty", function(){ alert("clicked empty cell!"); }); });<!doctype html> <html lang='sv'> <head> <meta charset="utf-8" > <title>the 15 game</title> <style> .maincontainer { width: 35%; border: 10px solid black; } .maincontainer td { width: 100px; height: 100px; text-align: center; font-size: 100px; border: 3px solid black; } .nonempty { background-color: red; } .empty { background-color: #c0c0c0; } .nonempty:hover { border: 3px solid white; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- external javascript game --> <script type="text/javascript" src="javascript/15game.js"></script> </head> <body> <!-- table maincontainer of 16 boxes --> <table class="maincontainer" > <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
Comments
Post a Comment