我是一名图形艺术家，对编码完全陌生。我正在尝试制作一个简单的基于HTML5的游戏模型。我想要做的是将一个精灵动画交换到另一个精灵动画onclick。每个精灵动画都有不同的大小和帧数。
第一个图像上的动画已经打开，单击图像时，该动画将被另一个动画替换。进行切换后，会显示乐谱动画（另一个精灵动画）。
我尝试了很多不同的Javascript但到目前为止还没有很好的结果。我只能提出一个脚本，它只是不起作用。 （两个图像相互重叠）我确定我做的事情完全错了，但我真的需要你帮助。
function change(){
var image = document.getElementById('pupwag01');
image.src = "images/pup01-win-sprite.png";
} #null01{
position: absolute;
top: 700px;
left: 100px;
}
#pupwag01 {
background-image: url('../images/puppy01sprite.png');
width: 173px;
height: 221px;
position: relative;
animation: pupwag01 1s steps(6) infinite;
}
@keyframes pupwag01 {
0% {background-position: 0px;}
100% {background-position: -1038px;}
}
#null01a{
position: absolute;
top: 680px;
left: 50px;
}
#pupwin01 {
background-image: url('../images/pup01-win-sprite.png');
width: 308px;
height: 191px;
position: relative;
animation: pupwin01 .5s steps(3) infinite;
background-repeat: no-repeat;
}
@keyframes pupwin01 {
0% {background-position: 0px;}
100% {background-position: -924px;}
}
#nullscore01{
position: absolute;;
top: 600px;
left: 110px;
}
#score01{
background-image: url('../images/score-sprite01.png');
width: 150px;
height: 200px;
position: relative;
animation: score01 1s steps(24) 1;
}
@keyframes score01 {
0% {background-position: 0px;}
100% {background-position: -3600px;}
}<body>
<header>
</header>
<div class="p-box">
<img src="images/pup-logo.png" id="logo">
<div id= "null01"><img src="images/puppy01sprite.png" id="pupwag01"></div></div>
<div id= "null01a"><div id="pupwin01"></div></div>
<div id= "null02"><div id="pupwag02"></div></div>
<div id= "null02a"><div id="maddog"></div></div>
<div id= "null03"><div id="pupwag03"></div></div>
<div id= "null03a"><div id="pupwin03"></div></div>
<div id= "null04"><div id="pupwag04"></div></div>
<div id= "null04a"><div id="pupwin04"></div></div>
<div id= "null05"><div id="pupwag05"></div></div>
<div id= "null05a"><div id="pupwin05"></div></div>
<div id="nullscore01"><div id="score01"></div></div>
<div id="nullscore03"><div id="score03"></div></div>
<div id="nullscore04"><div id="score04"></div></div>
<div id="nullscore05"><div id="score05"></div></div>
<div id="blink_text">Pick a Puppy!</div>
<div id="nullgo"><div id="gameover"></div></div>
</div>
<script src = "js/main.js" type="text/javascript"></script>
</body>
</html>假设您想要在单击按钮或图像本身时更改精灵图像。这是你如何做到的。
var puppyImage = document.getElementById('puppy-image');
var puppyBackground = document.getElementById('puppy-background');
var winButton = document.getElementById('button-win');
var normalButton = document.getElementById('button-normal');
//adding click event listener to puppy-image
puppyImage.addEventListener('click', function(e){
// adding/removing class `win`
this.classList.toggle('win');
if(this.classList.contains('win')){
//if win class exists, change src to win image of puppy
this.src = "https://i.stack.imgur.com/rl1BU.jpg"
}else{
//if win class does't exists change src to normal image of puppy
this.src = "https://i.stack.imgur.com/O144b.jpg";
}
});
//adding click event listener to win button
winButton.addEventListener('click', function(){
puppyImage.src = "https://i.stack.imgur.com/rl1BU.jpg";
})
//adding click event listener to normal button
normalButton.addEventListener('click', function(){
puppyImage.src = "https://i.stack.imgur.com/O144b.jpg";
})
//adding click event listener to element with puppy background image.
puppyBackground.addEventListener('click', function(e){
//toggling class `win`, background will change using css.
this.classList.toggle('win');
});#puppy-background{
height: 300px;
width: auto;
background-image: url('https://i.stack.imgur.com/O144b.jpg');
background-repeat: no-repeat;
}
#puppy-background.win{
background-image: url('https://i.stack.imgur.com/rl1BU.jpg');
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Change the puppy!</title>
</head>
<body>
<h2>Change puppy image on click</h2>
<div class="puppy-box">
<img id="puppy-image" src="https://i.stack.imgur.com/O144b.jpg" alt="">
</div>
<button id="button-win">Set Win</button>
<button id="button-normal">Set Normal</button>
<hr>
<h2>Change puppy background on click</h2>
<div id="puppy-background">
</div>
</body>
</html>