Hoksimilio
New Member
I'm making a grid-based game where I want the user to be able to click on each selectable block in the grid to make the adjacent(horizontal,vertical,diagonal) blocks selectable and that block a selected block.All selected blocks should stay selected.I'm using two different classes called selectable and selected to tell the difference.Only the adjacent blocks of the current selected block should be selectable.Something like this(dark blue is selected and light blue is selectable):
I used some jQuery traversal methods but I'm stuck at a point and I can't figure out any efficient code.Please help!Fiddle:http://jsfiddle.net/3DHMd/1/HTML:\[code\] <div class="outer"><div class="inner"><div class="grid"><div class="column" id="column1"> <div id="1" class="block"></div><div id="6" class="block"></div><div id="11" class="block"></div><div id="16" class="block"></div><div id="21" class="block"></div><div id="26" class="block"></div></div><div class="column" id="column2"><div id="2" class="block"></div><div id="7" class="block"></div><div id="12" class="block"></div><div id="17" class="block"></div> <div id="22" class="block"></div><div id="27" class="block"></div></div><div class="column" id="column3"> <div id="3" class="block"></div><div id="8" class="block"></div><div id="13" class="block"></div><div id="18" class="block"></div><div id="23" class="block"></div><div id="28" class="block"></div></div><div class="column" id="column4"> <div id="4" class="block"></div><div id="9" class="block"></div><div id="14" class="block"></div><div id="19" class="block"></div><div id="24" class="block"></div><div id="29" class="block"></div></div><div class="column" id="column5"> <div id="5" class="block"></div><div id="10" class="block"></div><div id="15" class="block"></div><div id="20" class="block"></div><div id="25" class="block"></div><div id="30" class="block"></div></div></div>\[/code\]CSS:\[code\] html,body{width:100%;height:100%;margin:0 auto;cursor:default;}.outer { position: relative; display:table; width:100%; height:85.25%; background-color:#959595;}.inner {display:table-cell; text-align:center; width:100%; height:85.25%;}.grid{ margin-top: 2%; margin-right: auto; margin-left: auto; border:0.7em solid #778086; width:93%; height:90%; background-color: #B3B1B1; clear:both; }.column{width:20%;height:100%;float: left;}.block { width:100%; height:16.15%; border: 0.1em solid #778086; text-align: center;font-size: 1.3em;font-family: 'Roboto', sans-serif;line-height: 2.8em;}.selected { background-color:#2976A2; color:#FFFFFF;}.selectable { cursor: pointer; cursor: hand; background-color:#8DBFC4; color:#FFFFFF; }\[/code\]JS:\[code\] $('#1').addClass('selected');$('#2,#6,#7').addClass('selectable');$(document).on('click','.selectable',function() {$(this).toggleClass('selected').toggleClass('selectable');var ind=$(this).index();$(this).prev().toggleClass('selectable');$(this).next().toggleClass('selectable');if (ind!=0){$(this).parent().prev().children().eq(ind-1).toggleClass('selectable');$(this).parent().next().children().eq(ind-1).toggleClass('selectable');}$(this).parent().prev().children().eq(ind).toggleClass('selectable');$(this).parent().next().children().eq(ind).toggleClass('selectable');$(this).parent().prev().children().eq(ind+1).toggleClass('selectable');$(this).parent().next().children().eq(ind+1).toggleClass('selectable');$(this).parents().children('.selected.selectable').removeClass('selectable'); $(this).parents().siblings().children('.selected.selectable').removeClass('selectable'); });\[/code\]