javascript - How to Add New Row/Column -


i'm working on game , i've been having bit of trouble. i'm trying once blocks turn purple, want create new row , column. trying achieve removing of blocks after blocks purple, , create 1 more row , column last time, using variable rowval. i've been working on jsfiddle , link http://jsfiddle.net/jaredasch1/6dhc240q/. i'll post code down below can quickly

the html

<!doctype html> <body>     <div id="button" class="on hover"></div>     <br>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div>     <br>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div>     <br>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div>     <br>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div>     <div class="block hover"></div> </body> 

the css

.block {     height:100px;     width:100px;     border-radius:10px;     display:inline-block;     background-color:#33ccff; } #button {     height:100px;     width:410px;     border-radius:10px;     display:inline-block;     background-color:#ff6666;     margin-bottom:10px; } .on {     background-color:#d633ff; } 

the javascript/ jquery

var main = function () {     var rowval = 5;     var setup = function () {         (var = 0; < rowval; i++) {             $("#button").append("<br>");         }         (var k = 0; k < rowval; k++) {             $("<br>").append("<div class=\"block hover\"></div>");         }         rowval++;     };     var checkall = function () {         var alldivs = $("div.block");         var classeddivs = $("div.block.on");          var alldivshaveclass = (alldivs.length === classeddivs.length);          if (alldivshaveclass) {             alldivs.remove(".on");             setup();         }     };     $("div").mouseenter(function () {         $(this).fadeto("slow", 0.25);         $(this).css('cursor', 'pointer');     });     $("div").mouseleave(function () {         $(this).fadeto("slow", 1);         $(this).css('cursor', 'default');     });     $(".block").click(function () {         $(this).toggleclass("on");         $(this).prev().toggleclass("on");         $(this).nextall().eq(4).toggleclass("on");         $(this).next().toggleclass("on");         $(this).prevall().eq(4).toggleclass("on");         checkall();     });     $("#button").click(function () {         $(".block").removeclass("on");     });     $(document).keydown(function (key) {         if (event.which === 32) {             $(".block").removeclass("on");         }     }); }; $(document).ready(main); 

i'm open suggestions please answer!

in checkall(), add following:

$("body").append('<br><div class="block hover"></div>'); 

Comments

Popular posts from this blog

php - Submit Form Data without Reloading page -

linux - Rails running on virtual machine in Windows -

php - $params->set Array between square bracket -