开发汤姆猫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>