0

我正在用 Html5 创建一个短游戏。我正在尝试找出进行英雄选择的最佳方法。

基本上有113个英雄。我创建了一个 1320x1320 的 spritesheet，每个英雄 img 为 120x120。第一张图片实际上只是一个框，里面写着“点击选择英雄”。我的第一个问题是，因为它在开始加载我的精灵表以加载第一张图像，稍后当它加载其余英雄时，它不必重新加载图像对吗？因为设置 'heroPics[i].style.backgroundImage = "url(Heroes.jpg)";' 每次都让我感到不安。

对我来说第二个也是重要的问题。回到我为手机开发游戏的时候，我发现如果你加载一个 570 的图像，它会使用 1024x1024 的资源，最好将图像重新制作为 512 并放大它，从而节省大量资源。这里也一样吗？我的图像是 1320 会使用资源作为 2048 吗？还是因为我正在加载 120x120 的图像，所以它只使用 128 的资源？

现在回到真正的问题。当此人单击“单击以选择英雄”时，我希望所有英雄图像都出现。当他们选择一个英雄时，我想把所有变量和我刚刚创建的 div 都扔掉，因为他们不会经常选择新英雄，所以最好把它扔掉，对吧？或者由于 spritesheet 已经加载，是否值得只隐藏包含图像的 div？它仍然会加载所有这些变量吗？无论如何，这是我的主要问题之一。

第二个是，如何在 div 中动态创建滚动条？我相信如果我手动设置所有属性，但我想创建标签和搜索英雄，我相信我可以做到这一点，所以滚动条必须调整到当前正在搜索的活动，非常感谢任何关于这个的建议。

最后，有没有办法从一开始就创建一半大小的图像？我尝试了 .style.width = "50%" 和 height auto 但它不起作用，因为它是一个 spritesheet =(。所以我使用 webkit 来缩小 div 但如果可能的话我更喜欢另一个选项。

感谢您阅读本文并对所有问题感到抱歉，这是我到目前为止所做的：

function selectHero() {
    var gg = 1;
    var bg = 0;
        for (var i = 1; i < 114; i++) { 
            heroPics[i] = new Image();
            heroPics[i].style.backgroundImage = "url(newHeroes.jpg)";
            heroPics[i].style.width = "120px";
            heroPics[i].style.height = "120px";
            heroPics[i].style.backgroundPosition = (-(120 * i)) + "px" + " " + (-((Math.floor(i / 11)) * 120)) + "px";
            heroPics[i].style.position = "absolute";
            heroPics[i].style.left = -90 + (75 * gg) + "px";
            heroPics[i].style.top = -30 + (75 * bg) + "px";
            heroPics[i].style.webkitTransform  = 'scale(0.6, 0.6)'; 
            heroPics[i].draggable = false;
            someDiv.appendChild(heroPics[i]);
            //heroPics[i].addEventListener( "click", heroChosen, false );
            gg ++;
            if(gg > 17) {
                gg = 1;
                bg ++;
            }
        }
    }

我听说 math.floor 使用了太多资源，我是否应该找到一个不同的解决方案，即使它更丑陋，因为现在它调用 math.floor 113 次？再次感谢

编辑：

找到了我关于调整图像大小的最后一个问题的解决方案：

background-size = 792px 792px;

只需在 css 类中将 1320x1320 缩小 60%，然后将 imgae 大小从 120 更改为 72，它就可以工作了。

还要感谢创建一个包含大部分属性的类并仅在需要时使用 JS 的有用提示。仍然需要滚动条和其他一些帮助！

4

2 回答 2

2

基本上有113个英雄。我创建了一个 1320x1320 的 spritesheet，每个英雄 img 为 120x120。第一张图片实际上只是一个框，里面写着“点击选择英雄”。我的第一个问题是，因为它在开始加载我的精灵表以加载第一张图像，稍后当它加载其余英雄时，它不必重新加载图像对吗？因为设置 'heroPics[i].style.backgroundImage = "url(Heroes.jpg)";' 每次都让我感到不安。

是的，但您最好通过 CSS 执行此操作。

对我来说第二个也是重要的问题。回到我为手机开发游戏的时候，我发现如果你加载一个 570 的图像，它会使用 1024x1024 的资源，最好将图像重新制作为 512 并放大它，从而节省大量资源。这里也一样吗？我的图像是 1320 会使用资源作为 2048 吗？还是因为我正在加载 120x120 的图像，所以它只使用 128 的资源？

首先我听说过，即使是真的，它也可能依赖于浏览器。再想一想，我确实听说 iOS 在加载超出一定大小的图像时遇到了一些问题，但我不确定。我认为我目前使用的最大图像是 1440x570 左右。我必须检查精灵，但它们中的大多数都小得多。

现在回到真正的问题。当此人单击“单击以选择英雄”时，我希望所有英雄图像都出现。当他们选择一个英雄时，我想把所有变量和我刚刚创建的 div 都扔掉，因为他们不会经常选择新英雄，所以最好把它扔掉，对吧？或者由于 spritesheet 已经加载，是否值得只隐藏包含图像的 div？它仍然会加载所有这些变量吗？无论如何，这是我的主要问题之一。

如果你正在做过滤等，你可以尝试在你的 div 的孩子上使用类。所以你会有这样的代码：

<div id="heroselection">
<div class="hero1 fighter male"></div>
<div class="hero2 wizard female"></div>
</div>

然后，当您选择过滤器时，您可以轻松浏览并隐藏您不需要的过滤器。首先，将它们全部隐藏起来。然后显示与您的过滤器匹配的那些，因此如果他们选中“女性”，那么您的 javascript（我在这里使用 jQuery，但可以随意选择另一个）：

$('#heroselection > div').hide();
$('#hereselection > div.female').show();

第二个是，如何在 div 中动态创建滚动条？我相信如果我手动设置所有属性，但我想创建标签和搜索英雄，我相信我可以做到这一点，所以滚动条必须调整到当前正在搜索的活动，非常感谢任何关于这个的建议。

听起来像你想要的overflow:auto，或者可能overflow-y: auto在 div 上。

最后，有没有办法从一开始就创建一半大小的图像？我尝试了 .style.width = "50%" 和 height auto 但它不起作用，因为它是一个 spritesheet =(。所以我使用 webkit 来缩小 div 但如果可能的话我更喜欢另一个选项。

听起来你正在寻找background-size

于 2013-06-07T18:54:08.407 回答
1

您使用 javascript 创建了太多属性，更好的解决方案是创建一个具有公共属性的父类，并将该类应用于所有 div，并使用 Javascript 修改剩余属性。

#parent > div{
background:url('newHeroes.jpg');
width:120px;
height:120px;
}

如果您熟悉编写 CSS 的 SASS 风格，那么您可以为所有子 div 元素编写 sass 并编译为 css

@for $i from 1 through 114 {
div:nth-child(#{$i}) {
  /* example --width: 100% / #{$i}*/
 }
 }
于 2013-06-07T18:42:30.870 回答