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

陌丶尘

于 2020-06-18 15:25:07 发布

阅读量1.3w

点赞数 3

分类专栏： web实训过程

本文链接：https://blog.csdn.net/weixin_43824233/article/details/106835477

版权

本文介绍了如何使用HBuilder X开发一款没有语音功能的汤姆猫App。通过新建5+App项目，配置style.css、tom.js和index.html文件，实现了App的基本功能。最后讲解了如何进行云打包，生成可供下载的Android应用。

摘要由CSDN通过智能技术生成

开发软件为：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