My Game in applet and H5

I am a rookie programmer + a rookie emoji designer = a rookie with a wide range of hobbies I. Introduction On a whim, I wanted to make a small game with the sticky pig image I created. At first, the idea was to use H5 to do it, and I did it. Later, when I encountered various problems, I wanted to use a small program to do it. It happened that I could also learn this hot thing. The final result is that "due to various reasons", this small game has a prototype, the H5 can be played in general, but there are still some bugs, and only I can play the small program. The name of the game is: Rescue the Resident Girl Game screenshots: Applets The H5  pig is a sticky pig, search for "sticky pig" on WeChat emoticon; the  monster is eating Pacman, a childhood memory. 2. The process of making small games in H5 The project code is available on the code cloud ( https://gitee.com/qiapi/h5_game ) and github ( https://github.com/qiapi/h5_game ). If you like, you can click a little star. Rules: The game is played as shown in the figure, press and hold the button, the green slider, pigs and monsters will start to run. When the slider is reduced to 0, releasing it is a victory. If it is advanced or delayed, it is a failure. The faster you go to the later levels, the more gold coins you get and deduct. Game implementation:  The movement of sliders, monsters and pigs is to use a timer to modify the percentage of the slider width relative to the outer container and the left value of pigs and monsters at regular intervals;  hold down the button and release it to monitor touchstart and touchend events Implementation;  check whether the victory is to check the width value of the slider when touchend is triggered;  the movement speed of each level element, that is, the timer time is calculated by the current number of levels;  the acquisition and deduction of gold coins are also calculated by the current number of levels; the  game music is used The H5 tag is implemented and played automatically;  because it is difficult for the human eye to accurately judge whether it reaches 0 and the human reaction speed, the game sets a tolerance of 1-3 for levels of different difficulty, and the tolerance is smaller for the later levels. ;  When a level is passed, the button for the next level becomes active, and the level can still be played, or you can enter the next level. Once you enter the next level, the "Next Level" button becomes unavailable. Existing problem:  After hanging the page on my own server, I use WeChat to access the game page. Since I did not apply for a domain name, the link address is an IP address, and the browser built in WeChat re-types my page, so it becomes Unavailable;  long-press the mobile phone screen and some mobile browsers will display a long-press menu, which is dealt with in the code, but there are still compatibility issues, and some browsers are not applicable;  no mobile terminal adaptation, the size of the element is in The display may vary on different mobile phones. 3. Small program Project code: The project code code cloud ( https://gitee.com/qiapi/save_pig ) and github ( https://github.com/qiapi/save_pig ) are available. If you like it, click a little star.  2. Advantages 使用小程序来实现可以避开很多浏览器的兼容问题了，而且也不会出现长按菜单的情况。  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。 后续：如果解决了项目类别选择的修改问题，会继续对这个小游戏进行开发。