<div class="pikachu">
  <div class="eye eye1">
  </div>
  <div class="eye eye2">
    <div class="eyeball"></div>
  </div>
  <div class="nose">
  </div>
  <div class="cheek cheek1"></div>
  <div class="cheek cheek2"></div>
  <div class="mouth"></div>
</div>

*{
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body{
	min-height:100vh;
	background: gold;
	padding:4rem;
}

.pikachu{
  
  width:100% !important;
  max-width:500px;
  margin:auto;
	height:400px !important;
	position:relative;
	width:100%;
	cursor:pointer;
}

.eye{
	width:80px;
	height:80px;
	border-radius:100%;
	position: absolute;
	border-width:5px 0 0 0;
	border-style:solid;
	background: #000;
}

.eye1{
	top:0%;
	left:30%;
}

.eye2{
	top:0%;
	left:70%;
}

.eye:before{
	content:"";
	width:16px;
	height:20px;
	background: #fff;
	border-radius:100%;
	position: absolute;
	top:calc(40% - 8px);
	left:calc(40% - 16px);
}

.eye1:before{
	top:calc(40% - 8px);
	left:calc(80% - 16px);
}

.pikachu.clicked .eye1{
	background: transparent;
}

.pikachu.clicked .eye1:before{
	display:none;
}

.cheek{
	width:80px;
	height:80px;
	background:orange;
	position: absolute;
	border-radius:50%;
	top:30%;
}

.cheek1{
	left:15%;
}

.cheek2{
	left:85%
}

.nose{
	width:20px;
	height:15px;
	border-radius:10px;
	background: #000;
	position: absolute;
	top:25%;
	left:50%;
}

.mouth{
	position: absolute;
	top:40%;
	left:50%;
	width:150px;
	height:30px;
	border-width:0 0 4px 0;
	border-style:solid;
	border-radius:50%;
}
.pikachu *{
  transform:translatex(-50%);
}

const pikachu = document.querySelector('.pikachu');

const pikachuSound = document.createElement('audio');

pikachuSound.src = 'https://www.soundboard.com/mediafiles/od/ODcwNzY0MDQzODcwODc1_Ugb8CZehWX0.mp3';

pikachu.addEventListener('click',function(){
  this.classList.add('clicked');
  pikachuSound.currentTime = 0;
  pikachuSound.play();
  setTimeout(() => {
    this.classList.remove('clicked');
  },200)
});