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

最终呈现出来的结果（电脑）：

手机上：

还有一步就是如何打包，差点忘记说了：
先点击总的项目，再点击发行，点击原生App-云打包，取消IOS（ipa包）

可能还要重新重新获取应用标识：

这样我们就可以进行打包了，稍等一会，控制台返回打包成功后：

我们再点击发行-》原生App-查看云打包状态，会出现如下信息（因为我之前已经打包了一次，所以有两个地址）点击地址即可下载app：

开发汤姆猫app（没有语音只有点击）相关推荐

【汤姆猫的实现 Objective-C语言】
一.实现之后的效果 1.左边3个按钮,分别是 1)点击之后,汤姆猫掏出一只白色的小鸟,刚要吃,它飞走了, 2)汤姆猫放屁 3)汤姆猫喝牛奶, 右边3个按钮,分别是 1)汤姆猫用爪子把屏幕抓出3个道子, ...
汤姆猫java下载手机版_汤姆猫编程星球app下载-汤姆猫编程星球下载v1.0.8-西西软件下载...
汤姆猫编程星球是一款少儿编程教育软件,帮助想学习编程少年快速学习,多彩多样的玩法,锻炼孩子的思维性,逻辑性,从小时候就加强大脑的锻炼,喜欢的朋友可以在西西下载使用. 软件介绍汤姆猫编程星球介绍和汤姆 ...
日活四千万的汤姆猫游戏家族，用AWS云服务打造“无感”用户体验
2020年7月,"会说话的汤姆猫"首款赛车类游戏<汤姆猫飞车>上线公测.它保持了汤姆猫游戏家族一贯的Q萌风格,赛道上一路都有萌宠陪伴,引领玩家进入奇妙的赛车世界.&qu ...
会说话的好朋友：汤姆猫开发商Outfit7旗下应用盘点
还记得那只会说话的汤姆猫吗?它就像一个口袋里的好朋友和开心果,给大家带来了很多快乐.在汤姆猫大获成功后,其开发公司Outfit7又陆续推出了"会说话的好朋友"系列,这些趣味盎然的游 ...
汤姆猫的安装、使用。
先要提供jdk-7u9-linux-x64.rpm(如以上版本) 安装jdk(java需要用到的编译开发工具) [root@libincla ~]# rpm -vih jdk-7u9-linux-x6 ...
汤姆猫信使: 折翼的信使
相信不少用户的手机中都养了不少汤姆猫吧,从会说话的汤姆猫到汤姆的情书再到近日发布的汤姆猫信使,你的手机中恐怕又得新养一只了,不过这只猫的动作太单调,只会说个话什么的,说实话有点坑爹: 应用名称:汤姆的 ...
java程序填空题输出汤姆猫_《Java语言程序设计(新)》地大模拟
<Java语言程序设计(新)>地大模拟 2020-08-29 08:08:08 635 有学员问关于<Java语言程序设计(新)>地大模拟的题目的参考答案和解析,具体如下: & ...
【成长记录】iOS小程序-不会说话的汤姆猫
做一个不会说话的汤姆猫,原理其实很简单,只是把连续的帧动画连续起来播放,但是在Xcode中实现起来很简单,不像是安卓那么复杂,只是Xcode中的方法封装的很实用很简单. 先看看,慢慢说起来~~~ 其实 ...
java输出动物,求大神帮助输出为什么只有动物名，几条腿，怎么叫，没有汤姆猫叫等...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 package test; abstract class Animal{ String name; public Animal(String n){nam ...

开发汤姆猫app（没有语音只有点击）

开发汤姆猫app（没有语音只有点击）相关推荐

最新文章

热门文章