Biegral Blog

本人是菜鸟程序猿一枚+菜鸟表情包设计师一枚=一枚爱好广泛的菜鸟

一、引言

一时兴起想用自己创造的表情包形象黏黏猪做一个小游戏。一开始的想法是用H5来做，也做了，后来遇到各种问题，又想用小程序来做，正好也可以学习一下这个火热的东西。最后的结果是，“由于各种原因”，这个小游戏有个雏形了，H5的大致可以玩，只不过bug嘛还是有的，小程序上的就只有我自己能玩了。

游戏名叫：解救居居女孩

游戏截图：

小程序

H5 
猪，是黏黏猪，微信表情搜索“黏黏猪”； 
怪兽，是吃豆，童年的记忆。

二、H5制作小游戏过程

项目代码放在码云(https://gitee.com/qiapi/h5_game)和github(https://github.com/qiapi/h5_game)上都有，喜欢可以点个小星星。

规则：游戏的玩法如图，按住按钮不放，绿色滑块、猪猪和怪兽会开始跑起来，当滑块减为0时松开即为胜利，若提前或者延后都属失败。越往后面的关卡速度越快，金币数获取和扣除相应变多。

游戏实现： 
滑块、怪兽和猪猪的运动是使用定时器每隔一定时间修改滑块宽度相对于外边容器的百分比和猪猪、怪兽的left值； 
按住按钮和松开监听touchstart和touchend事件实现； 
检验是否胜利是检查touchend触发时滑块的width值； 
每个关卡元素的运动速度即定时器的时间由当前关卡数进行计算； 
金币的获取和扣除也由当前关卡数计算； 
游戏音乐使用H5标签实现且自动播放； 
由于人眼很难精确地判断是否到0以及人类的反应速度的问题，游戏为不同难度的关卡设置了1-3的容差，越往后面的关卡容差越小； 
某一关通过时，下一关的按钮变为激活状态，本关卡仍可以继续玩，也可以进入下一关卡，一旦进入下一关卡，“下一关”的按钮变为不可用状态。

存在的问题： 
把页面挂到我自己的服务器上面后，用微信访问游戏页面，由于我没有申请域名，链接地址是IP地址，微信内置的浏览器将我的页面重新排版了，于是就变得不可用了； 
长按手机屏幕有些手机浏览器会出现长按菜单，代码中有做相应的处理，但是还是有兼容性问题，有些浏览器不适用； 
没有做移动端的适配，元素的尺寸在不同手机上显示可能会有所不同。

三、小程序

1. 项目代码：

项目代码码云（https://gitee.com/qiapi/save_pig）和github（https://github.com/qiapi/save_pig）上都有，喜欢的话点个小星星。 
2. 优点

使用小程序来实现可以避开很多浏览器的兼容问题了，而且也不会出现长按菜单的情况。 
3. 关于小程序的知识

申请账号，需要注意的是都是在微信公众平台注册，但是和公众号注册的不能是同一个邮箱，注册为小程序的登录进去就是小程序管理平台，注册为公众号的登录进去就是公众号的管理平台。

IDE： 微信开发者工具。

小程序中的文件类型大致有四种：json、wxml、wxss、js。json文件主要用于配置项目和页面；wxml是模板文件，类似HTML；wxss是样式文件，小程序对css做了扩充；js是脚本逻辑文件，实现交互。

小程序的开发和vue十分相似，模板渲染，MVVM的开发模式。

小程序的项目结构： 

image.png

根目录下的app命名的文件是项目的全局文件。app.json是对整个工程项目的全局配置，如小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。pages字段包含的就是所有的页面路径。具体可参考微信小程序开发文档。app.js中包含系统的全局变量和方法，例如用户信息、页面首次加载完成等。app.wxss是页面的全局样式，pages页面中的局部样式会覆盖全局样式。 
pages文件夹存放的是程序的所有页面。例如这个项目中有index页面和logs页面，每个页面都可以由四个文件构成：js、json、wxml、wxss。js文件负责该页面的逻辑交互，json文件是对该页面的配置，wxml是页面的结构、wxss是页面的样式。 
public文件夹是我自己加进去的，用于存放静态资源如图片、音乐等。 
utils文件夹存放的是一些可以引用的模块。 
project.config.json是存放你对这个工程的一些个性化配置，如IDE的界面颜色、编译配置等。 
项目真机预览：在开发工具中有预览按钮，会生成一个二维码，微信扫码后可以在手机上体验小程序，但是只有开发者有权限体验，其他人不可以。

发布：个人账号只能发布一个小程序，需要先填写小程序的信息以及选择类别，选择后不能修改。再提交代码后等待审核才能发布。我在选择类别的时候将类型选择为了游戏，然而小程序和小游戏是有区别的，再次用开发者工具打开项目的时候会提示找不到game.json文件。因此项目就不能进行下去了。目前小程序是有开放APPId给大家开发的，但是小游戏好像还没有APPId。

后续：如果解决了项目类别选择的修改问题，会继续对这个小游戏进行开发。