Canvas射击游戏子弹无法绘制问题求助

以下是导致子弹无法显示的核心问题及修复方案：

1. 绘制函数属性拼写错误 #

在hero和projectile的draw方法中，判断填充颜色的条件写成了this.cd != 'n'，但实际属性名是cord，这会导致子弹无法被填充绘制。需统一修改为this.cord != 'n'。

2. 子弹速度属性引用错误 #

update函数中计算子弹位移时，使用了bullets[i].v，但createProjectile里定义的速度属性是velocity，不存在v这个属性，导致子弹无法移动，超出画布边界后被过滤掉。需修改为bullets[i].velocity。

3. 清屏时机错误 #

aim函数中每次调用都会执行ctt.clearRect(0, 0, w, h)，这会在绘制子弹后立刻清空画布，导致子弹无法显示。应将清屏操作移到update函数的最开头，确保每次渲染循环先清空画布，再绘制所有元素。

修正后的JavaScript代码 #

var canvas = document.getElementById('canvas')
var ctt = canvas.getContext('2d')
var w = canvas.width
var h = canvas.height
console.log(w, h)
//canvas is 800x450

// characters
var hero = {
    x: 400,
    y: 225,
    ray: 35,
    start: 0,
    end: 2 * Math.PI,
    angle: 0,
    corf: 'n',
    cord: 'red',
    draw: function (){
        ctt.beginPath()
        ctt.arc(this.x, this.y, this.ray, this.start, this.end)
        if (this.corf != 'n'){
            ctt.strokeStyle = this.corf
            ctt.stroke()
        }
        if (this.cord != 'n'){
            ctt.fillStyle = this.cord
            ctt.fill()
        }
        }
}
var gun = {
    xs: 400,
    ys: 225,
    xe: 450,
    ye: 225,
    cor: 'yellow',
    width: 15,
    draw: function(){
        ctt.beginPath()
        ctt.moveTo(this.xs, this.ys)
        ctt.lineTo(this.xe, this.ye)
        ctt.strokeStyle = this.cor
        ctt.lineWidth = this.width
        ctt.stroke()
        }
    }

var enemy = {}
var bullets = []
//funções
function createProjectile(x, y, angle){
    var projectile = {
        x: x,
        y: y,
        ray: 7.5,
        start: 0,
        end: 2 * Math.PI,
        angle: angle,
        velocity: 10,
        corf: 'n',
        cord: 'gray',
        draw: function (){
            ctt.beginPath()
            ctt.arc(this.x, this.y, this.ray, this.start, this.end)
            if (this.corf != 'n'){
                ctt.strokeStyle = this.corf
                ctt.stroke()
            }
            if (this.cord != 'n'){
                ctt.fillStyle = this.cord
                ctt.fill()
            }
            }
    }
    return projectile
}

function aim(){
    const dx = mousex - 400
    const dy = mousey - 225
    const d = Math.sqrt(dx*dx + dy*dy)
    var sen = dy / d
    var cos = dx / d
    gun.xe = cos * 55 + w/2
    gun.ye = sen * 55 + h/2
    var needle = createProjectile(gun.xe, gun.ye, hero.angle)
    needle.draw()
    gun.draw()
}

function update(){
    ctt.clearRect(0, 0, w, h)
    for(var i = 0; i < bullets.length; i++){
        bullets[i].x += Math.cos(bullets[i].angle) * bullets[i].velocity
        bullets[i].y += Math.sin(bullets[i].angle) * bullets[i].velocity
    }
    bullets = bullets.filter(function(bul){
        return (bul.x > 0 && bul.x < 800 && bul.y > 0 && bul.y < 450)
    })
    for(var i = 0; i <bullets.length; i++){
        bullets[i].draw()
    }
    aim()
    hero.draw()
    requestAnimationFrame(update)
}

//code
document.addEventListener('click', function(eve){
    var b = createProjectile(400, 225, hero.angle)
    bullets.push(b)
})
let mousex, mousey
document.addEventListener('mousemove', function(eve){
    let r = canvas.getBoundingClientRect()
    mousex = eve.clientX - r.left
    mousey = eve.clientY - r.top
    var angle = Math.atan2(mousey - 225, mousex - 400)
    hero.angle = angle
})

update()

内容的提问来源于stack exchange，提问作者deGaspi