公告列表
公告列表
收藏
回答

小游戏指南飞机画完之后闪了一下就消失了

框架类型 问题类型 操作系统 工具版本
小游戏 Bug macOS 1.0.0

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') // 创建一个 2d context context.fillStyle = '#1aad19' // 矩形颜色 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.onload = function () { context.drawImage(image, imgX, imgY) } image.src = 'img/hero.png' // 存储当前飞机左上角坐标 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 // 重新判断当前触摸点y坐标 context.drawImage(image, touchX, touchY); }) if (touchX >= rectX - 100 && touchX <= rectX + 100 && touchY >= rectY - 100 && touchY <= rectY + 100) { // 飞机与矩形发生碰撞 wx.showModal({ title: '提示', content: '发生碰撞，游戏结束！' }) }
回答关注问题邀请回答
收藏

1 个回答

  • Forever
    Forever
    2020-05-08

    真机上必须要有帧循环，不然会黑屏或者花屏，请参考开发者工具默认创建游戏目录后的打飞机游戏示例

    2020-05-08
    有用 1
    回复
请 登录 后发表内容
相关文档
问题标签
onloadnodesrefcontextdrawimagecanvas