收藏
回答

按照文档开始开发小游戏效果不理想?

const { windowWidth, windowHeight } = wx.getSystemInfoSync()

function drawRect(x, y) {

 context.clearRect(0, 0, windowWidth, windowHeight)

 context.fillRect(x, y, 100, 100)

}

drawRect(canvas.width / 2 - 50, 0)

文档中,绘制下落矩形时每一帧都clearRect,后面加载飞机图片,飞机图片不显示,拖动飞机图片时闪烁显示

const image = wx.createImage()

const imgX = canvas.width / 2 - 50

let imgY = 500

image.onload = function () {

 context.drawImage(image, imgX, imgY)

}

image.src = 'img/plane.png'

是我代码位置写的不对吗?

以下是我的代码,完全按文档写的

const canvas = wx.createCanvas();

const context = canvas.getContext('2d');

const {

windowWidth,

windowHeight

} = wx.getSystemInfoSync();

context.fillStyle = '#1AAD19';

const rectX = canvas.width / 2 - 50;

let rectY = 0;

setInterval(function() {

drawRect(rectX, rectY++);

}, 16);

const image = wx.createImage();

image.src = 'images/plane.png';

const imgX = canvas.width / 2 - 50;

let imgY = 500;

image.onload = function() {

context.drawImage(image, imgX, imgY)

}


// 存储当前飞机左上角坐标

let touchX = imgX

let touchY = imgY


wx.onTouchMove(function(res) {

context.clearRect(touchX, touchY, 100, 100); // 清除画布上原有的飞机

touchX = res.changedTouches[0].clientX // 重新判断当前触摸点x坐标

touchY = res.changedTouches[0].clientY // 重新判断当前触摸点x坐标

context.drawImage(image, touchX, touchY);

if (touchX >= rectX - 100 && touchX <= rectX + 100 && touchY >= rectY - 100 && touchY <= rectY + 100) { // 飞机与矩形发生碰撞

wx.showModal({

title: '提示',

content: '发生碰撞,游戏结束!'

})

}

})


function drawRect(x, y) {

context.clearRect(0, 0, windowWidth, windowHeight);

context.fillRect(x, y, 100, 100);

}


最后一次编辑于  2019-10-22
回答关注问题邀请回答
收藏

2 个回答

  • 灵芝
    灵芝
    2019-10-22

    你好,小游戏相关问题麻烦在小游戏专区提问,此帖隐藏,请重新发帖提问,感谢配合

    小游戏专区:https://developers.weixin.qq.com/community/minigame


    2019-10-22
    有用
    回复
  • 原点的原点
    原点的原点
    2019-10-22

    这是小程序板块

    2019-10-22
    有用
    回复 1
    • 青歌
      青歌
      2019-10-22
      咦?
      2019-10-22
      回复
登录 后发表内容
问题标签