财产测试游戏：
需要：
页面
加载页 Loding
展现页面 welcome
流动介绍页面 intro
测试题目展现页面 question
后果弹出：msg
分享
微信性能
微信 js-sdk 分享
我的项目流程
graph TB
A(Lading 页面)–>B(welcome 页面)
B(welcome 页面)–>C(intro 页面)
C(intro 页面)–>D(question 页面)
D(question 页面)–>| 胜利 |E[胜利信息]
D(question 页面)–>| 失败 |F[失败信息]
D(question 页面)–>| 下一题 |G[下一题]
G[下一题]–>| 下一题 |D(question 页面)
loading 页面(页面图片加载结束)
welcome 页面(3 秒跳转 / 点击敞开跳转)
游戏阐明页面(点击按钮)
题目展现 (抉择答案) 判断
胜利页: 胜利信息、图片、音效
失败页：失败信息、图片、音效
下一题：本题剖析、下一题按钮：回到题目展现页
应用的技术：
html5：spa 单页利用
css：手机端 reset.css/ 手机端页面自适应实现
js:zepto
json 数据存储
php 次要用于微信
性能点以及实现(及遇到的坑)：
css 篇
reset.js
==2. 手机端自适应 ==
遵循支流媒体的分辨率，通过媒体适配器，进行字体等比率缩放，font-size 用 rem，宽度应用 100%, 是我参考了许多挪动端适配文章最好的解决办法。
/ 媒体选择器/
@media screen and (min-width: 641px) {
html,
body {
font-size: 20px;
}
}
/ scale to 320px 2/
@media screen and (min-width: 601px) and (max-width: 640px) {
html,
body {
font-size: 20px;
}
}
/ scale to 320px 1.875/
@media screen and (min-width: 541px) and (max-width: 600px) {
html,
body {
font-size: 18.75px;
}
}
/ scale to 320px 1.6875/
@media screen and (min-width: 481px) and (max-width: 540px) {
html,
body {
font-size: 16.875px;
}
}
/ scale to 320px 1.5/
@media screen and (min-width: 415px) and (max-width: 480px) {
html,
body {
font-size: 15px;
}
}
/ scale to 320px 1.29375/
@media screen and (min-width: 401px) and (max-width: 414px) {
html,
body {
font-size: 12.9375px;
}
}
/ scale to 320px 1.25/
@media screen and (min-width: 376px) and (max-width: 400px) {
html,
body {
font-size: 12.5px;
}
}
/ scale to 320px 1.171875/
@media screen and (min-width: 361px) and (max-width: 375px) {
html,
body {
font-size: 11.71875px;
}
}
/ scale to 320px 1.125 /
@media screen and (min-width: 321px) and (max-width: 360px) {
html,
body {
font-size: 11.25px;
}
.chosemsg .msgcontent p {
font-size: 1rem;
}
}
@media screen and (max-width: 320px) {
html,
body {
font-size: 10px;
}
.chosemsg .msgcontent {
line-height: 1.3
}
.chosemsg .msgcontent p {
font-size: 1rem;
}
}
JS 篇
js-sdk(js 联合 php 实现)
ajax+php 实现：$.ajax 申请 -> 信息获取 php(微信服务器交互数据获取、json 格局存储、数据封装)->ajax 数据返回 -> 调用
数据存数：json 文件 (ajax+php)
只波及读取数据：
ajax 间接读取数据: 应用 $.getHSON()办法
手机端检测: 应用的是 zepto，电脑端进行判断提醒
var isPc = /macintosh|window/.test(navigator.userAgent.toLowerCase());
if (isPc) {
$(‘body’).html(‘ 请在手机端查看成果更佳!(∩_∩)’);
return;
}
页面 loading 动画
音效预加载 (见 6)、图片预加载(见 5) 后敞开 loading 动画。
图片预加载：
function preLoadImages(arr) {
var newimages = [],
loadedimages = 0;
var postaction = function() {} // 此处减少了一个 postaction 函数
var arr = (typeof arr != “object”) ? [arr] : arr
function imageloadpost() {
loadedimages++;
if (loadedimages == arr.length) {
postaction(newimages) // 加载实现用咱们调用 postaction 函数并将 newimages 数组做为参数传递进去
}
}
for (var i = 0; i < arr.length; i++) {
newimages[i] = new Image()
newimages[i].src = arr[i]
newimages[i].onload = function() {
imageloadpost()
}
newimages[i].onerror = function() {
imageloadpost()
}
}
return {// 此处返回一个空白对象的 done 办法
done: function(f) {
postaction = f || postaction
}
}
}
背景音乐：
坑 1：手机端默认不容许默认 play()
解决：
document.addEventListener(“WeixinJSBridgeReady”, function() {
toggleplay(audio, 1); // 背景音乐初始化；
PreLoadHtml();
}, false);
- function toggleplay(obj, voc) {
voc = voc ? 0 : 1;
if (obj.paused) {
if (obj.id === ‘bgaudio’) {
audiobox.addClass(‘rotateall’);
}
obj.play();
obj.volume = voc;
} else {
if (obj.id === ‘bgaudio’) {
audiobox.removeClass(‘rotateall’);
}
obj.pause();
}
}
坑 2：下一题的音效要第二次点击能力呈现
解决：播放音效前加载
function initVoice() {
var voicelist = document.querySelectorAll(“.voice”);
voicelist.forEach(function(item) {
item.load();
})
}
== 问题页面解决 ==：
流程：
1. 初始化
- income：初始金额
- qStart：”q_1_1″：第一题
2. 绑定问题
1. 克隆 question 的 HTML 模板
2. 数据绑定(依据 showQues)：
- html 数据绑定：金额、题目、答案
- 题目对应的下一题信息绑定：result
3. 事件绑定
1. 绑定抉择状态
2. 依据抉择获取下一题的信息
3. 依据下一题信息显示不同后果：胜利 / 失败 / 下一题
1. 绑定后果信息、绑定信息对应的事件
胜利 / 失败：给出起因、从新开始、分享按钮
下一题：给出剖析、下一题按钮 -> 从新绑定问题
2. 显示后果信息
其余小问题：
6.1 安卓 window.loacation 兼容问题
window.location.href = ‘http://’ + location.hostname + ” + location.pathname + ‘?time=’ + ((new Date()).getTime());
6.2 反复点击 bug
// 敞开点击按钮
function quesOffClick(items) {
items.off(“tap”);
}
那么你学会如何在手机上测试 PHP 网页游戏了嘛？