如何在 JavaScript 中使用精灵表答案

【问题标题】：How to use sprite-sheets in JavaScript如何在 JavaScript 中使用精灵表
【发布时间】：2021-10-18 11:15:50
【问题描述】：

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

我想使用一个精灵表（图标 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";
  }

```

【问题讨论】：

标签： javascript sprite-sheet

【解决方案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 中的图像也是一个好主意

【讨论】：

非常感谢，我最终做了类似的事情并且它有效！