Question

在发现最新版本的Crafty的游戏API似乎在IE8中失败后，我想我会回到我的朋友JQuery，创建一些简单的棋盘游戏。

我开始使用3个DIV，黑色瓷砖，白色瓷砖和空白瓷砖，设置显示：无

然后我想把空白磁贴克隆到我想要的任何棋盘游戏的尺寸。使用简单的双循环，当设置为8x8时会崩溃浏览器，当设置为2x2时它很慢，有人可以建议我改善性能的方法吗？

CSS：

<style>
    .white {
        position:relative;
        width:57px;
        height:57px;
    }
    .white img {
        position:absolute;
        width:171px;
        height:57px;
        left:-57px;
        top:0px;
        clip:rect(0px, 114px, 57px, 57px); 
     }
    .blank {
        position:relative;
        width:57px;
        height:57px;
     }
    .blank img {
        position:absolute;
        width:171px;
        height:57px;
        left:-114px;
        top:0px;
        clip:rect(0px, 171px, 57px, 114px); 
     }
    .black {
        position:relative;
        width:57px;
        height:57px;
     }
    .black img {
        position:absolute;
        width:171px;
        height:57px;
        left:0px;
        top:0px;
        clip:rect(0px, 57px, 57px, 0px); 
     }

HTML：

<div class="white" style="display:none">
   <img src="images/sprites.png" alt="">
</div>

<div class="black" style="display:none">
   <img src="images/sprites.png" alt="">
</div>

<div class="blank" style="display:none">
   <img src="images/sprites.png" alt="">
</div>

<div class="start">
</div>

jquery：

$(document).ready(function()  {     
    B_W = 456;
    B_H = 456;
    B_X = 8;
    B_Y = 8;
    SQ_W = 57;
    SQ_H = 57;

    var i=0;
    var j=0;

    for(i = 0; i < B_X; i++) {
        for(j = 0; j < B_Y; j++) {
                $('.blank').clone()
                    .insertAfter('.start')
                    .css({
                        'position':'absolute', 
                        'top' : j * SQ_H + 'px', 
                        'left' : i * SQ_W + 'px', 
                        'display' : 'block'
                    });
        }
    }
});

Answer 1

您可以做的第二件事是将位置和显示属性添加为css样式，并将图像作为背景添加到DIV，例如：

<style>
.blank
{
   position:absolute;
   display:block;
   width:8px;
   height:8px;
   background: url('images/sprites.png')
}
</style>

然后“播放”背景定位。对于精灵png的下一个8x8像素部分，你可以这样做：

style="background-position: 8px 0px; "

此外，在开头有一个模板DIV，它有一个ID =空而不是class = blank，并将选择器设置为：

$('#blank')

最佳解决方案是使用canvas元素！

Answer 2

继续我关于在可能的情况下使用CSS的常见样式的评论，并使用float: left而不是计算每个元素的绝对位置：试试这个：

修改已更新，允许您动态更改网格大小。

HTML

<div id="white" class="block"> <img src="images/sprites.png" alt=""> </div> <div id="black" class="block"> <img src="images/sprites.png" alt=""> </div> <div id="blank" class="block"> <img src="images/sprites.png" alt=""> </div> <div id="block-container"> </div>

CSS：

.block { float: left; } #white, #black, #blank { display: none; } .white { background-color: #FFF; } .black { background-color: #000; }

jQuery的：

$(document).ready(function() { blockCountX = 8; blockCountY = 8; blockWidth = 57; blockHeight = 57; $("#block-container").css({ width: blockCountX * blockWidth + "px", height: blockCountY * blockHeight + "px" }); $(".block").css({ width: blockWidth + "px", height: blockHeight + "px" }); var counter = 0; for (i = 0; i < blockCountX; i++) { for (j = 0; j < blockCountY; j++) { var isWhite = (counter + i) % 2; var selector = isWhite ? "white" : "black"; $("#" + selector).clone().attr('id', 'block_' + counter).addClass(selector).appendTo('#block-container') counter++; } } });

Example fiddle to show it works

我正在尝试使用jquery的clone（）来创建多个类似Sprite的DIV，崩溃浏览器

2 个答案: