開發湯姆貓app（沒有語音只有點擊）

開發軟件爲：HBuilder X
首先新建一個5+App項目：

結構圖如下：

ps：Animations，Buttons，sounds裏的資源文件有點多，想要可以留qq我給你發

style.css代碼如下：

@charset "utf-8";

*{margin: 0;padding: 0;}

html,body,#app,#tom{
	width: 100%;
	height: 100%;
	
}

img{
	width: 15%;/* id選擇器的權重比標籤選擇器的權重高 */
	position: absolute;
}

#cymbal{
	left: 13%;
	top: 40%;
}
#drink{
	left: 13%;
	top: 50%;
}
#eat{
	left: 13%;
	top: 60%;
}
#fart{
	right: 13%;
	top: 40%;
}
#pie{
	right: 13%;
	top: 50%;
}
#scratch{
	right: 13%;
	top: 60%;
}

#head{
	width: 60%;
	height: 35%;
	left: 20%;
	top: 16%;
	/* background: green; */
	position: absolute;
	border-radius: 50%;
}
#footLeft{
	
	width: 15%;
	height: 10%;
	left: 50%;
	top: 87%;
	position: absolute;
	/* background: green; */
	border-radius: 50%;
}
#footRight{
	width: 15%;
	height: 10%;
	left: 34%;
	top: 87%;
	position: absolute;
	/* background: green; */
	border-radius: 50%;
}
/* 肚子 */
#belly{
	width: 30%;
	height: 27%;
	left: 35%;
	top: 60%;
	position: absolute;
	/* background: green; */
	border-radius: 50%;
}
/* 尾巴 */
#tail{
	width: 13%;
	height: 16%;
	left: 66%;
	top: 75%;
	position: absolute;
	/* background: green; */
	border-radius: 50%;
}

tom.js代碼如下

var tom = document.getElementById('tom')
var cymbal = document.getElementById('cymbal')
var drink = document.getElementById('drink')
var eat = document.getElementById('eat')
var fart = document.getElementById('fart')
var pie = document.getElementById('pie')
var scratch = document.getElementById('scratch')
var music = document.getElementById('music')
var head = document.getElementById('head')
var footLeft = document.getElementById('footLeft')
var footRight = document.getElementById('footRight')
var tail = document.getElementById('tail')
var belly = document.getElementById('belly')



var time;
belly.onclick = function(){
	play(33,'stomach');
}
tail.onclick = function(){
	play(25,'angry');
}
footLeft.onclick = function(){
	play(29,'footLeft');
}
footRight.onclick = function(){
	play(29,'footRight');
}
head.onclick = function(){
	play(80,'knockout');
}
cymbal.onclick = function(){
	play(12,'cymbal');
}
drink.onclick = function(){
	play(80,'drink')
}
eat.onclick = function(){
	play(39,'eat')
}
fart.onclick = function(){
	play(27,'fart')
}
pie.onclick = function(){
	play(23,'pie')
}
scratch.onclick = function(){
	play(55,'scratch')
}


//重複代碼的封裝
function play(idx,str){
	clearInterval(time)
	let num = 0;//自增變量
	time = setInterval(()=>{
		num++;
		if(num<10)
		{
			tom.src = 'Animations/'+str+'/'+str+'_0'+num+'.jpg';
		}
		else if(num<=idx && num>9)
		{
			tom.src = 'Animations/'+str+'/'+str+'_'+num+'.jpg';
		}
		else
		{
			clearInterval(time)
		}
		
	},50)
	music.src = 'sounds/'+str+'.m4a';
}

index.html代碼如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
	
</head>
<body>
	<div id="app">
		<img id="tom" src="Animations/angry/angry_00.jpg" alt="" >
		<img id="cymbal"  src="Buttons/cymbal/cymbal.png" >
		<img id="drink" src="Buttons/drink/drink.png" >
		<img id="eat" src="Buttons/eat/eat.png" >
		<img id="fart" src="Buttons/fart/fart.png" >
		<img id="pie" src="Buttons/pie/pie.png" >
		<img id="scratch" src="Buttons/scratch/scratch.png" >
	</div>
	<audio id='music' autoplay="autoplay" src=''>
		當前瀏覽器不支持audio
	</audio>
	<div id='head'>
		
	</div>
	<div id='footLeft'>
		
	</div>
	<div id='footRight'>
		
	</div>
	<div id='tail'><!-- //尾巴angry -->
		
	</div>
	<div id='belly'><!-- 肚子stomach -->
		
	</div>
</body>
<script src="js/tom.js" type="text/javascript" charset="utf-8"></script>
</html>