javascript - 熄灯游戏，可以切换图像吗？

标签 javascript html css

我只是觉得旧的“熄灯”游戏可以制作一个不错的小图片库/游戏。

它会是一些简单的东西，比如 5 x 5 的图像网格，

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

一些图像可以显示/可见，为什么其他图像被隐藏。

就像旧的“熄灯”游戏一样，当您单击一个框/图像时，它会打开或关闭(显示或隐藏)，具体取决于该框/图像的当前状态以及正上方、下方、左侧和右侧的框/图像还有。

这只是一个有趣的小实验，不需要像正确的游戏那样每次都随机化我很乐意每次在开始时手动启用和禁用图像。我只有 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>

谢谢

最佳答案

您需要更改 html 以获取 anchor 标记，因为它们会干扰 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 结构，要切换正确的方 block 有点棘手。

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

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

关于javascript - 熄灯游戏，可以切换图像吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27547247/

上一篇：javascript - 如何使用 jquery 销毁动态创建的 DOM 元素？

下一篇：javascript - 使用 jQuery 操作变量中的 HTML

相关文章：

html - Firefox 刷新问题

javascript - 图标未显示在输入字段的屏幕中

css - css中的 "projection"媒体类型有多可靠？

javascript - Stack Overflow API - 端点问题

javascript - 使用 javascript 或 jquery 获取数组中的复选框状态

函数内的javascript函数不返回数据

jquery - 如何使用 Angular.js 和 JQuery UI "link"数组和 DOM？

javascript - 如何在结果中突出显示搜索到的字符串？

javascript - 在 Angular JS 中计算销售价格

html - 在具有动态高度的 div 中垂直居中图像

©2024 IT工具网  联系我们