时间戳

首页 > 解决方案 > 如何在 JavaScript 中使用精灵表

javascript - 如何在 JavaScript 中使用精灵表

问题描述

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

我想使用一个精灵表（图标 16x16），其中图标将显示在右侧面板上，并且在选择一个时，它将被推到左侧的模型上。我怎么做？

https://imgur.com/K0Yoxwl

现在我正在使用这个：

```
            <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";
  }

```

标签： javascriptsprite-sheet

解决方案

我建议将 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";
}

在.col-sm使用document.createElement()和使用中自动创建图像也是一个好主意/*col-sm element*/.appendChild(/*created element*/)

推荐阅读