发生了什么

Question

所以我继续这个游戏。我需要拥有它，在空闲时播放this gif，当调用function()时，我需要它循环遍历this spritesheet ONCE ，然后恢复为gif。这是我的代码，我的JavaScript NO IDEA 怎么做，但我还是试过了。

CSS

.dragon  {
  width: 120px;
  height: 120px;
  background: url('http://www.thegaminghideout.com/school/dragonFire.png') left center;
  animation: play .8s steps(10) infinite;
}
@keyframes play  {
  100% {background-position: -1200px;}
}

JAVASCRIPT

  var weapon = [];
  var weapons = ['Claymore', 'Dagger', 'Magic Staff', 'Sword', 'Bow', 'Crossbow'];
  var armors = ['Helmet', 'Hood', 'Chestplate', 'Tunic', 'Robe', 'Legplates', 'Leggings', 'Undergarments', 'Boots', 'Armored Boots'];
  var materials = ['Leather', 'Iron', 'Steel', 'Mythril', 'Dragonbone'];
  var battleMusic = function()  {
    if(mute.checked == false)  { 
      document.getElementsByTagName("AUDIO")[0].play();
    }
    if(mute.checked === true)  {

    }
  }
  var dragonHit = function()  {
    var damage = dragonad / dp * 100;
    hp = hp - damage;
    Math.round(hp);
    alert("You were hit by the dragon! You currently have " + hp + " health!");
  }
  var hitDragon = function()  {
    var damage = ad / dragondp * 100;
    dragonhp = dragonhp - damage;
    Math.round(dragonhp);
    alert("You hit the dragon! The dragon now has " + dragonhp + " health!");
    if(weapon.hasOwnProperty("Magic Staff"))  {
      img.class = "dragon";
      hitDragon();
    }
  }

HTML

<html>
  <body>
    <audio>
      <source src="http://www.thegaminghideout.com/sound/Pokemon.mp3" type="audio/mpeg">
      Your browser doesn't support the sound file for playback. The Dragon Battle will be silent!
    </audio>
    <div id="wrap">
      <div class="box">
        <div class="container">
          <input type="checkbox" value="mute" id="mute">Mute</input>
          <h2 class="header">Dragon Slayer - REBORN!</h2>
          <p class="intro">You are a dragon-slayer veteran! You are retired, relaxed, and comfortable in your home, with no-one to boss you around... then you hear the town sirens.</p>
          <a id="button" href="javascript:fight()"><br>BEGIN!</a>
          <img id="scenario" class=""  src="http://www.thegaminghideout.com/school/stage1.png">
          <div class="battles">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

发生了什么

img以空白类开头。默认情况下，在龙战之前，它将保持原样。调用dragonFight()函数（包含在完整游戏中的jcodepen中）后，它会将图像的src更改为dragon.gif。如果玩家（阵列）拥有魔法师的武器（属性），则当他们调用dragonFire.png函数时，它将播放ATTACK动画 ONCE ，然后恢复为dragon.gif。

CodePen w / Full Game

CodePen

Answer 1

我是这样做的： http://jsfiddle.net/gkj1ef8d/

我使用了应用于特定类的关键帧动画来设置spritesheet的动画，该spritesheet设置为background-image。使用这种方法，您可以拥有任意数量的动画。我建议你将它们全部放入一个包含所需动画的大png spritesheet中，然后调整图像的水平和垂直位置。这样，您只需要预加载一个图像，从而加快加载时间并简化代码。

var button = document.getElementsByTagName("button")[0];
var dragon = document.querySelectorAll(".dragon")[0];

button.onclick = function(e) {
    e.preventDefault();
    dragon.className+=" run";
    
    window.st = window.setTimeout(function(p) {
         dragon.className = dragon.className.replace(" run", "");
    }, 1000)
}

@-webkit-keyframes run {
    from {
        background-position: top left;
    }
    to {
        background-position: top right;
    }
}

.dragon {
    width: 120px;
    height: 120px;
    background: red;
}

img {
   position: absolute;
    top: -9999999px
}
.dragon.run {
    background: url("http://www.thegaminghideout.com/school/dragonFire.png") top left no-repeat;
    -webkit-animation: run 1s steps(9) infinite;
}

<img src="http://www.thegaminghideout.com/school/dragonFire.png" alt=""><!-- The image is in the html to force it to preload, a better approach would be to preload it with JS, but this is out of the scope of the question -->
<div class="dragon"></div>

<button>Run</button>

请注意，此示例没有所有供应商前缀，因此它只能在Chrome和Safari上运行。

JavaScript / CSS Play Spritesheet一次更改为gif？

CSS

JAVASCRIPT

HTML

发生了什么

CodePen w / Full Game

1 个答案: