如何在 JavaScript 中使用 sprite-sheets

Question

初学者，没找到这方面的教程。我有一个带有游戏模型的页面来测试不同的图形。现在，我使用 getElementByID 短语并使用特定文件。我要测试的文件越多，就越繁琐和耗时。

我想使用 sprite-sheet（图标 16x16），图标会显示在右侧面板上，选择一个后，它会被推到左侧的模型上。我该怎么做？

现在我用的是这个：

```
            <img class="testBubble" id="testBubble" src="imgNPC/b-bg/bbg-A3.gif" alt="image">

```
                    <div class="col-sm">
                        <img class="bgBublle" src="imgNPC/b-bg/bbg-A1.gif" onclick="bgbA1()">
                        <img class="bgBublle" src="imgNPC/b-bg/bbg-A2.gif" onclick="bgbA2()">
                        <img class="bgBublle" src="imgNPC/b-bg/bbg-A3.gif" onclick="bgbA3()">
                        <img class="bgBublle" src="imgNPC/b-bg/bbg-A4.gif" onclick="bgbA4()">
                        <img class="bgBublle" src="imgNPC/b-bg/bbg-A5.gif" onclick="bgbA5()">
                    </div>
//A
function bgbA1() {
    document.getElementById("testBubble").src="imgNPC/b-bg/bbg-A1.gif";
  }
function bgbA2() {
    document.getElementById("testBubble").src="imgNPC/b-bg/bbg-A2.gif";
  }
function bgbA3() {
    document.getElementById("testBubble").src="imgNPC/b-bg/bbg-A3.gif";
  }
function bgbA4() {
    document.getElementById("testBubble").src="imgNPC/b-bg/bbg-A4.gif";
  }
function bgbA5() {
    document.getElementById("testBubble").src="imgNPC/b-bg/bbg-A5.gif";
  }

```

Answer 1

我建议将 sprite 复制函数（bgbA1、bgbA2 等）合并为一个函数，它可以处理所有情况：

<div class="col-sm">
    <img class="bgBublle" src="imgNPC/b-bg/bbg-A1.gif" onclick="bgb('A1')">
    <img class="bgBublle" src="imgNPC/b-bg/bbg-A2.gif" onclick="bgb('A2')">
    ...
</div>

//A
function bgb(subSprite) {
    document.getElementById("testBubble").src="imgNPC/b-bg/bbg-"+subSprite+".gif";
}

使用 document.createElement() 和 /*col-sm element*/.appendChild(/*created element*/)

在 .col-sm 中自动创建图像也是个好主意

如何在 JavaScript 中使用 sprite-sheets

How to use sprite-sheets in JavaScript

javascript

sprite-sheet