JavaScript/CSS播放Spritesheet一次，然后改为gif？
所以我要继续这场比赛。我需要它，当空闲时，播放这件事，当调用function()时，我需要它循环遍历这个喷漆单 一次性，然后返回到gif。这是我的代码，JavaScript --我有--不知道该怎么做，但我还是尝试了。
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动画，然后恢复到dragon.gif。
CodePen w/全博弈
CodePen
回答 1
Stack Overflow用户
发布于 2015-02-18 14:41:59
我是这样做的：http://jsfiddle.net/gkj1ef8d/
我使用应用于特定类的keyframe动画来动画spritesheet，该动画设置为背景图像。使用这种方法，您可以拥有任意多的动画。我建议您将它们全部放入一个包含所需所有动画的大型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上。
https://stackoverflow.com/questions/28584942
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号