收藏
回答

关于小游戏开发中canvas遇到的问题

我写了 一个小游戏,在开发者工具中运行没问题,但是用手机预览就出问题了

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运行如下:


但是用手机预览的时候,屏幕是这样的



请问这是这是怎么回事儿?望高手给与解答!!

回答关注问题邀请回答
收藏

7 个回答

  • 看,兜里有糖
    看,兜里有糖
    2018-04-22

    我用的也是android啊


    2018-04-22
    有用
    回复
  • 追梦的人(IT大叔一枚)
    追梦的人(IT大叔一枚)
    2018-04-19

    我说的刷新是指:关闭程序再进入.

    你的6.6.6,是IOS吧,我用的是安卓.

    2018-04-19
    有用
    回复
  • 看,兜里有糖
    看,兜里有糖
    2018-04-19

    不知道你说的刷新是什么意思,我进入好几次了,还是不行


    2018-04-19
    有用
    回复
  • 看,兜里有糖
    看,兜里有糖
    2018-04-19

    我用的6.6.6,好像不是内测版本吧

    2018-04-19
    有用
    回复
  • 追梦的人(IT大叔一枚)
    追梦的人(IT大叔一枚)
    2018-04-19

    你真机用的是什么版本的微信?

    我所开发的小游戏也遇到过这样的问题.但进入刷新几次就好

    我估计是不是渲染库的问题,期望微信官方给个说法~

    我用的是6.6.6内测版


    2018-04-19
    有用
    回复
  • 看,兜里有糖
    看,兜里有糖
    2018-04-18

    自己顶!!!!!!!!!!!!!!!!!

    2018-04-18
    有用
    回复
  • 看,兜里有糖
    看,兜里有糖
    2018-04-18

    没人回答吗?

    2018-04-18
    有用
    回复
登录 后发表内容