熄灯游戏，可以切换图像
lights out game, with switching images possible?
我只是有一个想法，旧的"熄灯"游戏可以制作一个不错的小图片库/游戏。
这将是一个简单的东西，比如一个 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 以取出锚标记，因为它们会弄乱 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/
相关文章：
- 在基于聚合物的游戏中:如何根据总分显示图像
- Javascript内存游戏-图像交换
- 正在开发内存匹配游戏 - 您能否以不同的方式显示一张图像
- 使用 javascript 从图像数组中更改 img 标签 src.骰子游戏
- 根据游戏 JavaScript 中的级别更改背景图像
- 尝试为石头剪刀布游戏显示图像而不是字母
- 熄灯游戏，可以切换图像
- JavaScript骰子游戏 - 图像不会改变
- 检查图像是否在游戏循环之前加载
- HTML 5 画布:在游戏中使用绘制图像会使循环非常慢
- 使用jQuery创建一个图像益智游戏
- 我如何在javascript中为我的游戏创建一个图像跟随另一个图像
- 记忆游戏-如何得到两个卡图像显示之前的警报弹出
- 硬编码图像大小vs浏览器游戏框架的动态图像大小
- 我怎么能把图像在一个var memory_array内存游戏
- 如何存储信息以正确显示构成单个游戏角色/对象/NPC的多个图像
- 而不是提示从图像中选择石头，布，剪刀等游戏
- 用javascript绘制一个带有图像的8 × 8的表格(游戏板)
- 开发html5画布游戏:图像或语句
- 如何让打地鼠游戏的洞里出现随机的图像，而不是一个图像
