开发软件为: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>
最终呈现出来的结果(电脑):
手机上:
还有一步就是如何打包,差点忘记说了:
先点击总的项目,再点击发行,点击原生App-云打包,取消IOS(ipa包)
可能还要重新重新获取应用标识:
这样我们就可以进行打包了,稍等一会,控制台返回打包成功后:
我们再点击 发行-》原生App-查看云打包状态,会出现如下信息(因为我之前已经打包了一次,所以有两个地址)点击地址即可下载app: