我写了 一个小游戏,在开发者工具中运行没问题,但是用手机预览就出问题了
game.js
var cubeW = 20; //矩形的边长var cubeArr = [[6, 7, 12, 13], [7, 8, 11, 12], [6, 7, 11, 12], [7, 12, 17, 8], [7, 12, 16, 17], [7, 12, 17, 22], [7, 11, 12, 13]];var colorArr = ['#ffc0cb', '#dda0dd', '#9370db', '#6495ed', '#fa8072', '#ff8c00', '#008000'];var rotateArr = [4, 9, 14, 19, 24, 3, 8, 13, 18, 23, 2, 7, 12, 17, 22, 1, 6, 11, 16, 21, 0, 5, 10, 15, 20];var canvas = wx.createCanvas(); //这里不连写的原因是后面还要用到canvas这个函数var ctx = canvas.getContext('2d');var canWidth = 360; //画布的宽var canHeight = 360; //画布的高var downInfor = {}, staticCube = [];var myinter;//初始化drawline();for (var i = 0; i < (canWidth / cubeW); i++) { staticCube[i] = []; for (var j = 0; j < (canHeight / cubeW); j++) { staticCube[i][j] = 0; }}initCube();myinter = setInterval(movedown, 200); //第一个参数要加引号,setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。//画背景网格function drawline() { ctx.lineWidth = 1; //线条粗细 ctx.strokeStyle = '#ddd'; //空心矩形的线条颜色 for (var i = 0; i < (canWidth / cubeW); i++) { ctx.moveTo(cubeW * i, 0); //移动到指定坐标而不绘制子路径 ctx.lineTo(cubeW * i, canHeight); //绘制一条道指定坐标的子路径 } ctx.stroke(); //给子路径描述的图形绘制轮廓线 for (var j = 0; j < (canHeight / cubeW); j++) { ctx.moveTo(0, cubeW * j); ctx.lineTo(canHeight, cubeW * j); } ctx.stroke();}function initCube() { var index = Math.floor(Math.random() * cubeArr.length);//随机生成,Math.floor四舍五入取整 downInfor.cubeNow = cubeArr[index]; downInfor.index = index; downInfor.prepoint = [5, -4]; downInfor.point = [5, -4]; drawEle(colorArr[downInfor.index]);}function movedown() { //判断下一个位置是否合理 var length, isempty = true, px, py, movex, movey, max = 0; for (var i = 0; i < 4; i++) { if (max < downInfor.cubeNow[i]) max = downInfor.cubeNow[i]; } length = Math.ceil(max / 5); //执行的是向上取整计算 for (var i = 0; i < 4; i++) { px = downInfor.point[0] + downInfor.cubeNow[i] % 5; py = downInfor.point[1] + 1 + parseInt(downInfor.cubeNow[i] / 5); if (staticCube[px][py] == 1) { isempty = false; break; } } if ((downInfor.point[1] + length) < (canHeight / cubeW) && isempty) { downInfor.prepoint = downInfor.point.concat();//注意引用类型 downInfor.point[1] = downInfor.point[1] + 1; clearEle(); drawEle(colorArr[downInfor.index]); } else//不能移动的时候 { for (var i = 0; i < 4; i++) { px = downInfor.point[0] + downInfor.cubeNow[i] % 5; py = downInfor.point[1] + parseInt(downInfor.cubeNow[i] / 5); staticCube[px][py] = 1; } drawEle('#555'); checkfullLine(); }}function drawEle(color) { ctx.fillStyle = color; ctx.strokeStyle = '#fff'; for (var i = 0; i < 4; i++) { var movex = downInfor.cubeNow[i] % 5; var movey = parseInt(downInfor.cubeNow[i] / 5); ctx.fillRect(cubeW * (downInfor.point[0] + movex), cubeW * (downInfor.point[1] + movey), cubeW, cubeW); ctx.strokeRect(cubeW * (downInfor.point[0] + movex), cubeW * (downInfor.point[1] + movey), cubeW, cubeW) }}function clearEle() { ctx.lineWidth = 1; ctx.strokeStyle = '#ddd'; for (var i = 0; i < 4; i++) { var movex = downInfor.cubeNow[i] % 5; var movey = parseInt(downInfor.cubeNow[i] / 5); ctx.clearRect(cubeW * (downInfor.prepoint[0] + movex), cubeW * (downInfor.prepoint[1] + movey), cubeW, cubeW); ctx.strokeRect(cubeW * (downInfor.prepoint[0] + movex), cubeW * (downInfor.prepoint[1] + movey), cubeW, cubeW) }}function checkfullLine()//检测是否有一行满了{ var isFullLine = true, index = 0, changeScore = false; for (var i = 0; i < canWidth / cubeW; i++) { if (staticCube[i][0] == 1) { console.log('游戏结束!'); clearInterval(myinter); return; } } initCube();} |
IDE运行如下:
但是用手机预览的时候,屏幕是这样的
请问这是这是怎么回事儿?望高手给与解答!!

我用的也是android啊
我说的刷新是指:关闭程序再进入.
你的6.6.6,是IOS吧,我用的是安卓.
不知道你说的刷新是什么意思,我进入好几次了,还是不行
我用的6.6.6,好像不是内测版本吧
你真机用的是什么版本的微信?
我所开发的小游戏也遇到过这样的问题.但进入刷新几次就好
我估计是不是渲染库的问题,期望微信官方给个说法~
我用的是6.6.6内测版
自己顶!!!!!!!!!!!!!!!!!
没人回答吗?