Turns off the game, with the ability to switch images?
I just got the idea that an old game "shutdown" could make a nice gallery / game.
It would be something as simple as a 5 x 5 grid of images,
☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐ ☐
several images can be shown / visible, why others are hidden.
Just like in the old "off" game, when you click on a box / image, it will turn on or off (show or hide) depending on the current state of the window / image and the boxes / images directly above, below, left and right as well.
It's just a fun little experiment and doesn't need to be randomized every time as the correct game, I'm happy to just turn the images on and off manually at the beginning of each time. I only have knowledge of html5 / css3 and am not very good at JQuery.
Is this possible and does anyone know how?
This is my main template I was going to use: http://jsfiddle.net/rd4k24L2/1/
code:
<style type="text/css">
section#imagegame {width:1000px}
section#imagegame .imageblock {width:194px; height:194px; margin:2px; float:left; border:1px solid grey;}
section#imagegame .imageblock img {display:none; width:100%; height:auto;}
img.initiallyshow {display:block !important; width:100%; height:auto;}
</style>
<section id="imagegame">
<a href="">
<div class="imageblock">
<img id="a1" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="a2" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="a3" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="a4" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="a5" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="b1" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="b2" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="b3" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="b4" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="b5" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="c1" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<a href="">
<img id="c2" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="c3" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="c4" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="c5" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="d1" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="d2" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="d3" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="d4" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="d5" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="e1" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="e2" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="e3" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="e4" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
<a href="">
<div class="imageblock">
<img id="e5" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</a>
</section>
thank
+3
source to share
1 answer
You need to change the html to get the anchor labels because they were messing with the jQuery click function.
Here you are:
<div id="wehaveawinner" style="display:none">YOU WON!</div>
<section id="imagegame">
<div class="imageblock">
<img id="a1" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="a2" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="a3" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="a4" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="a5" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="b1" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="b2" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="b3" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="b4" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="b5" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="c1" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="c2" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="c3" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="c4" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="c5" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="d1" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="d2" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="d3" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="d4" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="d5" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="e1" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="e2" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="e3" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="e4" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
<div class="imageblock">
<img id="e5" class="initiallyshow" src="http://fc06.deviantart.net/fs13/f/2007/040/b/7/Photo__Large_red_square_by_TheLastDanishPastry.png" />
</div>
</section>
And this is javascript:
$('.imageblock').click(function() {
var img = $(this).children("img");
img.toggleClass("initiallyshow");
var id = img.attr('id');
var l = id.substring(0,1);
var ln = l.charCodeAt(0);
var d = parseInt(id.substring(1));
if(d>1) $('#'+l+(d-1)).toggleClass("initiallyshow");
if(d<5) $('#'+l+(d+1)).toggleClass("initiallyshow");
if(ln>("a".charCodeAt(0)))
$('#'+String.fromCharCode(ln-1) + d).toggleClass("initiallyshow");
if(ln<("e".charCodeAt(0)))
$('#'+String.fromCharCode(ln+1) + d).toggleClass("initiallyshow");
if( $('.initiallyshow').length == 0 )
$('#wehaveawinner').show();
else
$('#wehaveawinner').hide();
return false;
});
This is a jsFiddle: http://jsfiddle.net/rd4k24L2/14/
The idea is that switching a class is extremely easy with jQuery, but given the html structure created, it's a little tricky to get the correct squares to switch.
If you prepared a different framework, the js code could be boiled down to multiple lines.
Edit: Version with very simple detection: http://jsfiddle.net/rd4k24L2/16/
+2
source to share