javascript - Assigning Array Values to Table Cells -
i'm trying create simple memory game javascript , i've created array of letters match game however, i'm having trouble figuring out how assign single letter each cell of table functions board.
<html> <head> <style> td { background-color: red; width:100px; height:100px; border:1px solid black } </style> <table> <tr> <td id = "tile" onclick = "revealletter()"></td> <td id = "tile" onclick = "revealletter()"></td> <td id = "tile" onclick = "revealletter()"></td> <td id = "tile" onclick = "revealletter()"></td> </tr> <tr> <td id = "tile" onclick = "revealletter()"></td> <td id = "tile" onclick = "revealletter()"></td> <td id = "tile" onclick = "revealletter()"></td> <td id = "tile" onclick = "revealletter()"></td> </tr> <tr> <td id = "tile" onclick = "revealletter()"></td> <td id = "tile" onclick = "revealletter()"></td> <td id = "tile" onclick = "revealletter()"></td> <td id = "tile" onclick = "revealletter()"></td> </tr> <tr> <td id = "tile" onclick = "revealletter()"></td> <td id = "tile" onclick = "revealletter()"></td> <td id = "tile" onclick = "revealletter()"></td> <td id = "tile" onclick = "revealletter()"></td> </tr> </table> <script> var letters = ['a','a','b','b','c','c','d','d','e','e','f','f','g','g','h','h']; var square_values = []; var square_ids = []; var = letters.length, j, temp; while(--i > 0) { j = math.floor(math.random() * (i+1)); temp = letters[j]; letters[j] = letters[i]; letters[i] = temp; } </script> </head> <body> </body> </html>
i suggest different approach. rather building table , putting in letters, i've written function builds grid based on a randomised array. borrowed function this question randomise array. i've added event listeners 'turn over' cards, changing values data-letter property.
i've not written rest of game logic - didn't want tread on toes! you'd want make if turned 2 on didn't match, go , try again, if did, they'd stay showing - i'm sure can work logic , amend function adds event listeners.
buildgrid(); //global var a, b = ''; function buildgrid() { var letters = ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd', 'e', 'e', 'f', 'f', 'g', 'g', 'h', 'h']; var randomised = shuffle(letters); var num_letters = randomised.length; var str_tbl = ''; while (num_letters >= 4) { str_tbl += '<tr>'; (var = 0; < 4; i++) { str_tbl += '<td data-letter="' + randomised[i] + '">?</td>'; } str_tbl += '</tr>'; ranomdised = randomised.splice(0, 4); num_letters -= 4; } var tbl = document.createelement('table'); tbl.innerhtml = str_tbl; document.getelementsbyclassname('grid')[0].appendchild(tbl); addeventlisteners(); } function addeventlisteners(){ var tds = document.getelementsbytagname( 'td' ); for( var = 0; < tds.length; i++ ){ tds[i].addeventlistener( 'click', function(){ this.innerhtml = this.getattribute( 'data-letter'); this.classname += ' chosen'; }); } } // borrowed https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array function shuffle(array) { var currentindex = array.length, temporaryvalue, randomindex; // while there remain elements shuffle... while (0 !== currentindex) { // pick remaining element... randomindex = math.floor(math.random() * currentindex); currentindex -= 1; // , swap current element. temporaryvalue = array[currentindex]; array[currentindex] = array[randomindex]; array[randomindex] = temporaryvalue; } return array; }td { background-color: #cccccc; text-align: centre; padding: 20px; height: 100px; width: 100px; color: #333333; font-family: helvetica, arial, sans-serif; font-size: 30px; font-weight: bold; cursor: pointer; } td:hover { background-color: #dddddd; } td.chosen { background-color: lightblue; }<div class="grid"></div>
Comments
Post a Comment