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);
}
你好,小游戏相关问题麻烦在小游戏专区提问,此帖隐藏,请重新发帖提问,感谢配合
小游戏专区:https://developers.weixin.qq.com/community/minigame
这是小程序板块