收藏
回答

小游戏模拟器正常运行,真机上画面混乱

新手,在模拟器中正常运行,如下图:

但在手机上却出现下面这种情况:


而且不是静态的,画面一直闪,无规律,难顶哦,怎么回事呢?

最后一次编辑于  09-23  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • damonlei
    damonlei
    09-24

    使用 requestAnimationFrame 每一帧都绘制,即可解决这个问题

    09-24
    赞同 2
    回复
  • qczone
    qczone
    09-23
    var startX = 0;
    var startY = 0;
     
    var moveX = 0;
    var moveY = 0;
     
    var diffX = 0;
    var diffY = 0;
    var snakeMoveDirection = "right";
    wx.onTouchStart(function (e) {
      startX = e.touches[0].clientX;
      startY = e.touches[0].clientY;
    })
    //方向
    wx.onTouchMove(function (e) {
      moveX = e.touches[0].clientX;
      moveY = e.touches[0].clientY;
     
      diffX = moveX - startX;
      diffY = moveY - startY;
      if (Math.abs(diffX) > Math.abs(diffY) && diffX > 0 && !(snakeMoveDirection == "left")) {
        //  向右
        snakeMoveDirection = "right";
        //console.log("向右");
      } else if (Math.abs(diffX) > Math.abs(diffY) && diffX < 0 && !(snakeMoveDirection == "right")) {
        //  向左
        snakeMoveDirection = "left";
        //console.log("向左");
      } else if (Math.abs(diffX) < Math.abs(diffY) && diffY > 0 && !(snakeMoveDirection == "top")) {
        //  向下
        snakeMoveDirection = "bottom";
        //console.log("向下");
      } else if (Math.abs(diffX) < Math.abs(diffY) && diffY < 0 && !(snakeMoveDirection == "bottom")) {
        //  向上
        snakeMoveDirection = "top";
        //console.log("向上");
      }
    })
    const canvas = wx.createCanvas()
    const context = canvas.getContext('2d') // 创建一个 2d context
    //context.fillStyle = '#fafafa' // 矩形颜色
    const { windowWidth, windowHeight } = wx.getSystemInfoSync()
    context.fillStyle = '#fafafa' // 底色
    context.fillRect(0, 0, windowWidth, windowHeight)
    console.log(windowHeight,windowWidth)
     
    const x1=(windowWidth%20)/2+20;
    const x2 = windowWidth-(windowWidth % 20) / 2 -20;
    const y1=(windowHeight%20)/2+60;
    const y2 = windowHeight - (windowHeight % 20) / 2 - 60;
    console.log(x1,x2);
    console.log(y1,y2);
    context.fillStyle = '#bcdefd' // 游戏区域颜色
    context.fillRect(x1,y1,x2-x1,y2-y1);
    var foodx;
    var foody;
    function createFood(){
      foodx = Math.ceil(Math.random() * (x2 - x1) / 40) * 20 + x1;
      foody = Math.ceil(Math.random() * (y2 - y1) / 40) * 20 + y1;
      context.fillStyle = '#880806' // food颜色
      context.fillRect(foodx, foody, 20, 20)
    }
    createFood();
    function drawRect(x, y) {
      context.fillStyle = '#25976f' // snack颜色
      context.fillRect(x, y, 20, 20)
    }
    function cleanRect(x,y){
      context.fillStyle = '#bcdefd' // 底色
      context.fillRect(x, y, 20, 20);
    }
     
    let rectX = Math.ceil(Math.random() * (x2-x1)/40) * 20 + x1;
    let rectY = Math.ceil(Math.random() * (y2-y1)/40) * 20 + y1;
     
    var snakeBody = new Array;
    var score = 0;
    snakeBody[0] = new Array(2);
    snakeBody[0][0] = rectX;
    snakeBody[0][1] = rectY;
    function eatFood(){
      if((snakeBody[0][0]===foodx)&&(snakeBody[0][1]===foody)){
        score++;
        console.log(score);
        snakeBody[score]=new Array(2);
        createFood();
      }
      else {
        cleanRect(snakeBody[score][0], snakeBody[score][1]);
      }
    }
    function snakeMove(newX,newY){
      eatFood();
      snakeBody[0][0]=newX;
      snakeBody[0][1]=newY;
      for(var i=score;i>=1;i--){
        snakeBody[i][0] = snakeBody[i - 1][0];
        snakeBody[i][1] = snakeBody[i - 1][1];
      }
      drawRect(newX,newY);
    }
     
    setInterval(function () {
      switch (snakeMoveDirection) {
        case "left":
          snakeMove(snakeBody[0][0] - 20,snakeBody[0][1]);
          break;
        case "right":
          snakeMove(snakeBody[0][0] + 20, snakeBody[0][1]);
          break;
        case "top":
          snakeMove(snakeBody[0][0], snakeBody[0][1] - 20);
          break;
        case "bottom":
          snakeMove(snakeBody[0][0], snakeBody[0][1] + 20);
          break;
      }
    }, 500)

    这是源代码,写的最基础的贪吃蛇小游戏,还没完工,但一些功能已经实现,恳请大家帮忙找一下真机上画面混乱的问题。

    09-23
    赞同
    回复
问题标签