My Game 在小程序和H5中

转载 2018年04月16日 11:20:57

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

一、引言

一时兴起想用自己创造的表情包形象黏黏猪做一个小游戏。一开始的想法是用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。

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

webview和h5的交互

现在APP中经常会发现很多很多的H5页面,所以webview与js的交互显得非常重要: 一.理论:      在交互这块我们会涉及到两个场景:一种是h5直接调用原生的,这个时候在原生这边登录成功后...
  • u013651405
  • u013651405
  • 2016年08月31日 11:41
  • 3913

微信小程序和H5的秘密

如何使微信小程序解析 H5文件前段时间,终于千呼万唤出来的微信小程序,可谓是坑苦了广大程序猿了.下面将就我所遇到的问题做一个总结由于微信的编写文件不再是html格式,所以也无法解析 html代码,这...
  • ALSNEI
  • ALSNEI
  • 2017年01月13日 18:16
  • 5616

小程序与H5,APP有什么不同-小程序支付开发1

自从微信小程序推出以来, 就一直受到人们的关注, 每当小程序稍有一点小动作, 各大媒体都会疯狂报道。 其实很多人对微信小程序并不真正了解, 但是从微信今年来一...
  • towtotow
  • towtotow
  • 2017年08月09日 08:06
  • 623

微信小程序与H5的区别

一、微信小程序和HTML5的标签区别: 二、wxss 选择器 HTML5 微信小程序 div(标签选择器) view、text、icon、input、image、navigator(标...
  • jimolangyaleng
  • jimolangyaleng
  • 2017年01月10日 21:47
  • 4257

移动端技术类型分析,App、H5、小程序优劣势分析

各个技术类型优缺点 APP      优势:  较于其他两个技术类型APP可提供最佳的用户体验,最优质的用户界面,最华丽的交互;每一种移动操作系统都需呀独立的开发项目,针对不同平...
  • lipeng525_hi
  • lipeng525_hi
  • 2017年09月04日 12:10
  • 846

小程序微信支付支付流程(类似H5支付)

小程序微信支付支付流程图
  • Momeory
  • Momeory
  • 2017年06月28日 10:44
  • 270

微信小程序添加H5页面

在微信小程序也可以,像浏览器一样添加url.具体方法是在wxml的文件里添加下面代码 而且要把网站加入到白名单就可以了,可以试试 小程序的web-view功能...
  • liukai6
  • liukai6
  • 2017年12月28日 21:34
  • 2865

小程序嵌入h5项目总结(一)——开发经验

小程序嵌入h5项目总结 从h5到小程序再到小程序嵌入h5,几个项目陆陆续续做了几个月了,今天就抽个时间对这几个月的项目做个总结吧,结构组织并不怎么规范,边写边完善吧 开发前准备 这里主要讲...
  • weichen913
  • weichen913
  • 2018年01月23日 20:15
  • 623

h5打开小程序,h5网页跳转打开小程序页面

【3月25更正】目前无法从网站的h5页面直接跳转到小程序,无论是手机上浏览器,微信,QQ中的h5,都不能跳转。感谢 安云Anny 的反馈。详细情况如下:微信h5网页跳转小程序情况,可以看到已经触发in...
  • towtotow
  • towtotow
  • 2018年03月25日 10:32
  • 409

小程序又搞事情,H5 开发的春天来了!

阅读文本大概需要 2.8 分钟。就在刚刚,微信官方公布了几个小程序爆炸性的新闻,在 2017 年的年底,这个新闻似乎是在告诉大家,小程序能做的事越来越多,2018 年你再也没法在忽视它。1. 首页新增...
  • po86BHac10C4
  • po86BHac10C4
  • 2017年12月28日 00:00
  • 2294
收藏助手
不良信息举报
您举报文章:My Game 在小程序和H5中
举报原因:
原因补充:

(最多只允许输入30个字)