小游戏快速上手的例子中飞机不显示问题?
发布于 5 年前 作者 uzhou 2411 次浏览 来自 官方Issues

飞机一闪而过,就消失了

怎么回事?

https://developers.weixin.qq.com/minigame/dev/guide/#%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E7%9F%A9%E5%BD%A2

代码:

const canvas = wx.createCanvas()

const context = canvas.getContext(‘2d’) // 创建一个 2d context

context.fillStyle = ‘#1aad19’ // 矩形颜色

//context.fillRect(0, 0, 100, 100) // 矩形左上角顶点为(0, 0),右下角顶点为(100, 100)

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

function drawRect(x, y) {

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

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

}

const rectX = canvas.width / 2 - 50

let rectY = 0

setInterval(function () {

drawRect(rectX, rectY++)

}, 16)

const image = wx.createImage()

const imgX = canvas.width / 2 - 50

let imgY = 500

image.src = ‘img/plane.png’

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: ‘发生碰撞,游戏结束!’

})

}

1 回复

小游戏相关的,麻烦到小游戏模块下进行提问

回到顶部