Question

我只是想到了旧的＆＃34;熄灯＆＃34;游戏可以制作一个漂亮的小图库/游戏。

这将像5 x 5网格图像一样简单，

☐ ☐ ☐ ☐ ☐
☐ ☐ ☐ ☐ ☐
☐ ☐ ☐ ☐ ☐
☐ ☐ ☐ ☐ ☐
☐ ☐ ☐ ☐ ☐

可以显示/可见多个图像，以隐藏其他图像。

就像旧的＆＃39;熄灯＆＃39;游戏当你点击一个盒子/图像时，它会打开或关闭（显示或隐藏），具体取决于盒子/图像当前状态以及正上方，下方，左侧和右侧的方框/图像。

这只是一个有趣的小实验，并且每次都不需要随机化，就像正确的游戏一样，我很乐意在每次开始时手动启用和禁用图像。我只有html5 / css3知识，而且我对JQuery并不擅长。

这可能，有人知道吗？

这是我将要使用的基本模板： http://jsfiddle.net/rd4k24L2/1/

代码：

<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>

谢谢

Answer 1

您需要更改html以获取锚标记，因为它们正在搞乱jQuery点击功能。

你有：

<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>

这是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;
});

这是jsFiddle：http://jsfiddle.net/rd4k24L2/14/

这个想法是用jQuery非常简单地切换类，但是考虑到你准备好的html结构，让正确的方块切换是有点棘手的。

如果您准备了不同的结构，那么js代码可能会减少到几行。

编辑：具有非常简单的胜利检测的版本：http://jsfiddle.net/rd4k24L2/16/

熄灭游戏，切换图像可能吗？

1 个答案: