求问一个电脑端和手机端浏览器显示不同的有关问题
求问一个电脑端和手机端浏览器显示不同的问题
最近给core-ball加个个跳关的功能，地址是http://1.fdupharmacychat.sinaapp.com/coreball/index.html
但是碰到这样一个问题，电脑端跳关能正常使用，而用手机微信端打开之后，按跳关只能选择出跳关的菜单了，接下去就按什么都没反应了，想问下这个情况怎么回事？自己从github上拿到的开源代码，只是改了index.html和游戏启动的一个主要的js，求大伙帮忙看下。原始的游戏地址是coreball.sinaapp.com
js中就加了一段这个
html中加了一段这个
这是游戏主界面的代码
------解决思路----------------------
那 你用 微信浏览 http://1.fdupharmacychat.sinaapp.com/coreball/index.html 这个可以用么，
如果都不可以，那就是微信内置浏览器的问题了，
其实个人觉得 微信内置的浏览器对HTML5的新特性 处理的不是很好，
特别 你上面还用了 canvas,2d对象 这种东西，虽然它本身也支持。
我上次就是设置了Img的 border-radius属性，结果在微信上都不能用，后来还是自己把图片做成圆的放进去的
------解决思路----------------------
对了，我还想到一个 也许是缓存的问题，
你那个实现的js应该是一个单独的文件，如果在上面修改东西，在电脑上面一般要清除浏览器缓存才行。
微信上面没这个功能，你可以试试 在 设置--应用程序-找到微信--选择下面那个 清除缓存
看看能不能用
最近给core-ball加个个跳关的功能，地址是http://1.fdupharmacychat.sinaapp.com/coreball/index.html
但是碰到这样一个问题，电脑端跳关能正常使用，而用手机微信端打开之后，按跳关只能选择出跳关的菜单了，接下去就按什么都没反应了，想问下这个情况怎么回事？自己从github上拿到的开源代码，只是改了index.html和游戏启动的一个主要的js，求大伙帮忙看下。原始的游戏地址是coreball.sinaapp.com
js中就加了一段这个
$("li").click(function(){
//alert($(this).prop("value"));
updateLevel($(this).prop("value"));
stage_canvas.style.display = "none";
//var text =$(this).text();//这里是获取点击某一个<a>标签的text值
});
html中加了一段这个
<div id="stage_canvas" style="z-index: 2000; position: fixed; left: 0px; top: 15px; display:none;">
<div id="stage_canvas_in_div" style="" class="dlg_stage_choose">
<ul id="stage_canvas_ul" class="dlg_stage_choose"></ul>
</div>
</div>
<script>
window.onload = function(){
//等待页面内DOM、图片资源加载完毕后触发执行
var stage_canvas_ul=document.getElementById('stage_canvas_ul');
for(var i=1;i<=90;i++)
{
var li = document.createElement("li");
li.innerHTML = "第"+i+"关";
li.setAttribute('class', "stage_choose");
li.setAttribute('value', i);
li.setAttribute('class', "dlg_stage_choose");
stage_canvas_ul.appendChild(li);
}
var stage_canvas_in_div=document.getElementById('stage_canvas_in_div');
var width = document.body.scrollWidth || document.documentElement.scrollWidth;
var height = document.body.scrollHeight || document.documentElement.scrollHeight;
//alert(width+" "+height);
stage_canvas_in_div.style["width"]=290+'px';
stage_canvas_in_div.style["height"] = 390+'px';
//stage_canvas_in_div.style["overflow"] = 'auto';
}
</script>
这是游戏主界面的代码
/**
* @fileoverview Game
* @author Random | http://weibo.com/random
* @date 2015-03-04
*/
define(function(require, exports, module) {
"use strict";
var Scene = require("general/Scene");
var Switcher = require("general/Switcher");
var BeginStage = require("general/BeginStage");
var addEvent = require("lib/addEvent");
var Storage = require("lib/Storage");
var util = require("lib/util");
var stopEvent = require("lib/stopEvent");
//var LevelCode = require("general/LevelCode");
var canvas = document.getElementById("stage");
var stage_canvas = document.getElementById("stage_canvas");
var bsNode = document.getElementById("begin");
var tip = document.getElementById("tip");
var btnFW = document.getElementById("btnFW");
var btnReset = document.getElementById("btnReset");
var btnStage = document.getElementById("btnStage");
var wxArrow = document.getElementById("wxArrow");
var stage = canvas.getContext("2d");
//stage_choose
//var btnStageChoose = document.getElementsByClassName("stage_choose");
//var btnStageChoose = document.getElementsByTagName("li")[0];
var FPS = 60;
var BASE_HEIGHT = 560;
var STORAGE_KEY = "core-ball-level";
var WX_SHARE_TEXT = "Core Ball(酷啵)-练手活的HTML5游戏，我已玩到第#{level}关了，你也来试试吧!";
var SHARE_HREF = "sinaweibo://share?content=Core Ball(酷啵) - 练手活的HTML5小游戏，我已玩到第#{level}关了，你也来试试吧！ http://coreball.sinaapp.com";
var scene;
var beginStage = BeginStage(bsNode);
var switcher;
var level = +Storage.getValue(STORAGE_KEY) || 1;
var scale;
var isResetting = false
var tid = 0;
//stage_choose
$("li").click(function(){
//alert($(this).prop("value"));
updateLevel($(this).prop("value"));
stage_canvas.style.display = "none";
//var text =$(this).text();//这里是获取点击某一个<a>标签的text值
});
function adaptScreen(){
var width = document.body.scrollWidth || document.documentElement.scrollWidth;
var height = document.body.scrollHeight || document.documentElement.scrollHeight;
canvas.width = width;
canvas.height = height;
switcher = Switcher(stage, width, height);
bsNode.style.backgroundColor = switcher.color;
bsNode.style.width = width + "px";
bsNode.style.height = height + "px";
scale = height / 560;
}
function updateSharedHref(){
btnFW.href = SHARE_HREF.replace(/#\{level\}/, level);
}
function initForward(){
if(util.isWeixin){
addEvent(btnFW, "mousedown", function(){
wxArrow.style.display = "";
});
}else if(util.isMobile){
updateSharedHref();
}else{
//http://service.weibo.com/share/share.php?url=http://ra.ndom.me/core-ball/index.html&type=button&language=zh_cn&appkey=2hwszt&searchPic=true&style=number
}
}
function updateLevel(lv){
level = +lv;
Storage.setValue(STORAGE_KEY, level);
document.title = WX_SHARE_TEXT.replace(/\#\{level\}/, level);
beginStage.level(level);
!util.isWeixin && util.isMobile && updateSharedHref();
}
function initEvent(){
addEvent(document.body, "mousedown", function(evt){
var i;
if(evt && evt.changedTouches){
i = evt.changedTouches.length;
while(i--){
scene.shot();
}
}else{
scene.shot();
}
evt.target.getAttribute("data-capture")!="1" && stopEvent(evt);
});
addEvent(wxArrow, "mousedown", function(){
wxArrow.style.display = "none";
});
/*
addEvent(btnReset, "mousedown", function(){
if(!isResetting){
isResetting = true;
tip.style.display = "";
updateLevel(1);
setTimeout(function(){
tip.style.display = "none";
isResetting = false;
}, 1000);
}
});
*/
addEvent(btnStage, "mousedown", function(){
//alert("111");
stage_canvas.style.display = "";
//beginStage.hide();
});
scene.on("passed", function(){
switcher.switchStage(0, function(){
scene.enabled = false;
updateLevel(level + 1);
canvas.style.display = "none";
beginStage.show();
});
});
scene.on("failed", function(){
switcher.switchStage(0, function(){
scene.enabled = false;
canvas.style.display = "none";
beginStage.level(level);
beginStage.show();
});
});
beginStage.on("start", function(){
canvas.style.display = "";
beginStage.hide();
switcher.switchStage(1, function(){
scene.run(level);
});
});
}
function timerHandle(){
window.clearTimeout(tid);
scene.update();
scene.render();
switcher.update();
switcher.render();
tid = window.setTimeout(timerHandle, 1000 / FPS);
}
function init(){
adaptScreen();
scene = Scene(document.body, canvas, stage, scale);
initEvent();
initForward();
beginStage.level(level);
beginStage.show();
timerHandle();
$("li").click(function(){
//alert($(this).prop("value"));
updateLevel($(this).prop("value"));
stage_canvas.style.display = "none";
//var text =$(this).text();//这里是获取点击某一个<a>标签的text值
});
}
var Game = {
start : init
};
module.exports = Game;
});
------解决思路----------------------
那 你用 微信浏览 http://1.fdupharmacychat.sinaapp.com/coreball/index.html 这个可以用么，
如果都不可以，那就是微信内置浏览器的问题了，
其实个人觉得 微信内置的浏览器对HTML5的新特性 处理的不是很好，
特别 你上面还用了 canvas,2d对象 这种东西，虽然它本身也支持。
我上次就是设置了Img的 border-radius属性，结果在微信上都不能用，后来还是自己把图片做成圆的放进去的
------解决思路----------------------
对了，我还想到一个 也许是缓存的问题，
你那个实现的js应该是一个单独的文件，如果在上面修改东西，在电脑上面一般要清除浏览器缓存才行。
微信上面没这个功能，你可以试试 在 设置--应用程序-找到微信--选择下面那个 清除缓存
看看能不能用