swapping sprite animation onclick javascript

Question

I'm a graphic artist and totally new to coding. I'm trying to make a simple HTML5 based game mock-up. What I want to do is to swap one sprite animation to the other sprite animation onclick. Each sprite animation's got different size and number of frames.

Animation on the first image is already on, when click on the image, that animation will get replaced by the another animation. When that switch was made, the score animation (another sprite animation) shows up.

I've tried many different Javascript but no good outcome so far. I could only come up with one script and it just doesn't work. (two images overlap each other) I'm sure i'm doing something totally wrong but I really need you guys help.

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

azs06 azs06 · Accepted Answer · 2018-01-04T12:00:38

Assuming that you want to change the sprite image on click of a button or on the image itself. Here is how you could do it.

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>

swapping sprite animation onclick javascript

1 Answers