根据计算选择精灵

时间：2018-03-24 19:16:04

标签： javascript html css

我有一个包含30个精灵的PNG文件。我已使用http://www.spritecow.com将其转换为CSS。我的问题是我的JavaScript生成1到30之间的随机数。如何从这个数字中选择正确的精灵？

.spriteBigPart {
    display: inline-block;
    background: url('../img/parts.png') no-repeat;
}
.part_1  {
    background: url('../img/parts.png') no-repeat -26px -20px;
    width: 121px;
    height: 121px;
}
.part_2  {
    background: url('../img/parts.png') no-repeat -187px -21px;
    width: 121px;
    height: 121px;
}
.part_3  {
    background: url('../img/parts.png') no-repeat -345px -20px;
    width: 121px;
    height: 121px;
}
.part_4  {
    background: url('../img/parts.png') no-repeat -504px -21px;
    width: 121px;
    height: 121px;
}
.part_5  {
    background: url('../img/parts.png') no-repeat -663px -20px;
    width: 121px;
    height: 121px;
}
.part_6  { 
    background: url('../img/parts.png') no-repeat -822px -20px;
    width: 121px;
    height: 121px;
}
.part_7  {
    background: url('../img/parts.png') no-repeat -981px -21px;
    width: 121px;
    height: 121px;
}
.part_8  {
    background: url('../img/parts.png') no-repeat -1140px -20px;
    width: 121px;
    height: 121px;
}
.part_9  {
    background: url('../img/parts.png') no-repeat -1299px -21px;
    width: 121px;
    height: 121px;
}
.part_10 {
    background: url('../img/parts.png') no-repeat -1458px -21px;
    width: 121px;
    height: 121px;
}
.part_11 {
    background: url('../img/parts.png') no-repeat -1616px -20px;
    width: 121px;
    height: 121px;
}
.part_12 {
    background: url('../img/parts.png') no-repeat -1775px -21px;
    width: 121px;
    height: 121px;
}
.part_13 {
    background: url('../img/parts.png') no-repeat -1935px -21px;
    width: 121px;
    height: 121px;
}
.part_14 {
    background: url('../img/parts.png') no-repeat -2094px -20px;
    width: 121px;
    height: 121px;
}
.part_15 {
    background: url('../img/parts.png') no-repeat -2253px -21px;
    width: 121px;
    height: 121px;
}
.part_16 {
    background: url('../img/parts.png') no-repeat -2412px -21px;
    width: 121px;
    height: 121px;
}
.part_17 {
    background: url('../img/parts.png') no-repeat -2570px -19px;
    width: 121px;
    height: 121px;
}
.part_19 {
    background: url('../img/parts.png') no-repeat -2729px -20px;
    width: 121px;
    height: 121px;
}
.part_19 {
    background: url('../img/parts.png') no-repeat -2888px -21px;
    width: 121px;
    height: 121px;
}
.part_20 {
    background: url('../img/parts.png') no-repeat -3047px -20px;
    width: 121px;
    height: 121px;
}
.part_21 {
    background: url('../img/parts.png') no-repeat -3205px -20px;
    width: 121px;
    height: 121px;
}
.part_22 {
    background: url('../img/parts.png') no-repeat -3205px -20px;
    width: 121px;
    height: 121px;
}
.part_23 {
    background: url('../img/parts.png') no-repeat -3524px -20px;
    width: 121px;
    height: 121px;
}
.part_24 {
    background: url('../img/parts.png') no-repeat -3683px -20px;
    width: 121px;
    height: 121px;
}
.part_25 {
    background: url('../img/parts.png') no-repeat -3841px -20px;
    width: 121px;
    height: 121px;
}
.part_26 {
    background: url('../img/parts.png') no-repeat -4001px -19px;
    width: 121px;
    height: 121px;
}
.part_27 {
    background: url('../img/parts.png') no-repeat -4160px -20px;
    width: 121px;
    height: 121px;
}
.part_28 {
    background: url('../img/parts.png') no-repeat -4318px -20px;
    width: 121px;
    height: 121px;
}
.part_29 {
    background: url('../img/parts.png') no-repeat -4478px -20px;
    width: 121px;
    height: 121px;
}
.part_30 {
    background: url('../img/parts.png') no-repeat -4637px -20px;
    width: 121px;
    height: 121px;
}

<div class="row">
  <span class="spriteBigPart **random_number_between_1_and_30**"></span>
</div>

1 个答案:

答案 0 :(得分：1)

我会做这样的事情：

var span = document.querySelector(".spriteBigPart");
span.setAttribute("class", "spriteBigPart part_" + random);

我用过Sprite Cow来帮助我编写下面的代码。它确实是一个非常棒的工具，但我认为生成的代码不一定适合所有情况，您可能需要根据您的实现选择进行更改： - ）

var fps = 4;
var head = 0;
var fpsEl = document.getElementById("fps");
var debugEl = document.getElementById("debug");
var marioEl = document.getElementById("mario");

var anims = {
  hammerWL: [0, 2, 1, 3], // walk left
  hammerWR: [7, 5, 6, 4]  // walk right
};

var anim = [].concat(
  anims.hammerWL, // L
  anims.hammerWL, // L
  anims.hammerWR, // R
  anims.hammerWL, // L
  anims.hammerWR  // R
);

fpsEl.value = fps;
fpsEl.onclick = updateFps;
fpsEl.onkeyup = updateFps;
fpsEl.onchange = updateFps;
debug.onclick = toggleDebug;
debug.onchange = toggleDebug;

function updateFps () {
  fps = parseInt(this.value, 10) || 0;
}

function updateFrame (frame) {
  marioEl.setAttribute("class", frame);
}

function toggleDebug () {
  var c = this.checked ? "debug" : "";
  document.body.setAttribute("class", c);
}

// !function loop () { ... }();
// is a shortcut for
// loop(); function loop () { ... }
// declared and called at the same time

!function loop () {
  if (fps === 0) {
    setTimeout(loop, fps);
  } else {
    // head = 0, 1, 2, ..., 0, ...
    head = (head + 1) % anim.length;
    updateFrame("frame_" + anim[head]);
    setTimeout(loop, 1000 / fps);
  }
}();
html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
  background: black;
}
#controls {
  background: #ddd;
  line-height: 40px;
  padding: 0 .5em;
  height: 40px;
}
#fps {
  width: 50px;
}
#stage {
  position: relative;
  background: yellow;
  border: 10px solid black;
  height: calc(100% - 60px);
  width: calc(100% - 20px);
}

/* sprite */

#mario {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 0;
  width: 0;
}
#mario img {
  display: block;
  position: absolute; 
  background: url(https://i.stack.imgur.com/yScim.png);
}
.debug #mario img {
  background-color: #0090ff;
}

/* frames / hammer walk left */

#mario.frame_0 img {
  background-position: -4px -10px;
  width: 26px; height: 58px;
  left: -13px; bottom: 0;
}
#mario.frame_1 img {
  background-position: -70px -24px;
  width: 52px;  height: 32px;
  left: -37px; bottom: 0;
}
#mario.frame_2 img {
  background-position: -162px -10px;
  width: 30px; height: 58px;
  left: -15px; bottom: 0;
}
#mario.frame_3 img {
  background-position: -232px -24px;
  width: 50px; height: 32px;
  left: -37px; bottom: 0;
}

/* frames / hammer walk right */

#mario.frame_4 img {
  background-position: -310px -24px;
  width: 50px; height: 32px;
  right: -37px; bottom: 0;
}
#mario.frame_5 img {
  background-position: -400px -10px;
  width: 30px; height: 58px;
  right: -15px; bottom: 0;
}
#mario.frame_6 img {
  background-position: -470px -24px;
  width: 52px; height: 32px;
  right: -37px; bottom: 0;
}
#mario.frame_7 img {
  background-position: -562px -10px;
  width: 26px; height: 58px;
  right: -13px; bottom: 0;
}
<div id="controls">
  <label>FPS <input id="fps" type="number" min="0" max="12"></label>
  <label>Debug <input id="debug" type="checkbox"></label>
</div>
<div id="stage">
  <div id="mario">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
  </div>
</div>

mario

相关问题
最新问题