交换精灵动画onclick javascript答案

【问题标题】：swapping sprite animation onclick javascript交换精灵动画onclick javascript
【发布时间】：2018-01-04 01:25:19
【问题描述】：

我是一名图形艺术家，对编码完全陌生。我正在尝试制作一个简单的基于 HTML5 的游戏模型。我想要做的是将一个精灵动画交换到另一个精灵动画onclick。每个精灵动画都有不同的大小和帧数。

第一个图像上的动画已经开启，当点击图像时，该动画将被另一个动画替换。进行该切换时，将显示乐谱动画（另一个精灵动画）。

我已经尝试了许多不同的 Javascript，但到目前为止都没有好的结果。我只能想出一个脚本，但它不起作用。（两张图片相互重叠）我确定我做错了什么，但我真的需要你们的帮助。

puppy normal puppy win

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>

enter image description here

【问题讨论】：

标签： javascript css sprite

【解决方案1】：

假设您想在单击按钮或图像本身时更改精灵图像。这是你可以做到的。

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>

【讨论】：