如何使用香草Javascript从播放器中提取子弹？

我想做一个向上滚动的街机射击游戏。我一直被困在如何将子弹从玩家身上拉向敌人所在的位置。我使用setInterval在玩家的位置重复射击动作，但子弹只会在玩家每次移动指定数量时跟随战斗机重置间隔

有什么帮助吗

这是我目前的代码

先谢谢你

var项目、ctx、img、img2、宽度、高度、中间、中间、起始点、起始点、音频、间隔、bulletStartPx、bulletStartPy；
var得分=0；
函数设置（）{
project=document.getElementById（“项目”）；
ctx=project.getContext（“2d”）；
宽度=505；
高度=900；
中间=宽度/2；
midh=高度/2；
startPx=宽度/2-30；
startPy=高度-150；
音频=新音频（“bgm.mp3”）；
音频播放（）；
img=新图像（）；
img2=新图像（）；
img.src=“bg.png”；
img2.src=“fighterjet.png”
img.onload=函数（）{
ctx.shadowColor=“#ffffff”；
ctx.shadowBlur=15；
ctx.drawImage（img，0,0）；
ctx.drawImage（img2、startPx、startPy）
}
window.addEventListener（“向下键”，checkKeyPress）；
}
函数drawObject（x，y）{
ctx.drawImage（img2、startPx、startPy）
}
功能检查按键（事件）{
如果（event.keyCode==“87”）{//W（向上）
ctx.clearRect（0,0，宽度，高度）；
如果（起始时间>=20）{
startPy-=20；
}
ctx.drawImage（img，0,0）；
ctx.drawImage（img2、startPx、startPy）
}else if（event.keyCode==“83”）{//S（向下）
ctx.clearRect（0,0，宽度，高度）；
如果（起始时间=0）{
startPx-=20；
}
ctx.drawImage（img，0,0）；
ctx.drawImage（img2、startPx、startPy）
}else if（event.keyCode==“68”）{//D（右）
ctx.clearRect（0,0，宽度，高度）；
如果（startPx1），您需要重新定义全局变量，以便跟踪所有内容：

var gameData = {
    interval: null, // Controls the refresh
    redrawRequired: false, // Flag
    allBullets: [], // Moving bullets
    defaultBulletSpeed: 20 // Bullet speed
}

2） 仅检查checkKeyPress（事件）功能中的操作，包括fireGun操作：

function checkKeyPress(event) {
    if (event.keyCode == "87") {//87 W(UP)
        if (startPy >= 20) {
            startPy -= 20;
            gameData.redrawRequired = true;
        }
    } else if (event.keyCode == "83") {//83 S(DOWN)
        if (startPy <= 785) {
            startPy += 20;
            gameData.redrawRequired = true;
        }
    } else if (event.keyCode == "65") {//65 A(LEFT)
        if (startPx >= 0) {
            startPx -= 20;
            gameData.redrawRequired = true;
        }
    } else if (event.keyCode == "68") {//68 D(RIGHT)
        if (startPx <= 410) {
            startPx += 20;
            gameData.redrawRequired = true;
        }
    } else if (event.keyCode == "72") { // 72 SPACEBAR ?? Actually H
        fireGun();
    }
}

4） 然后决定何时重新绘制画布，使用一个主函数（refreshGame）和另一个函数检查是否有要更新的项目符号（refreshBullets）：

注:


由于性能问题，使用setInterval的canvas方法被认为是一种不好的方法。尝试搜索“使用canvas刷新javascript interval”，还有其他方法可以解决此问题。
refreshRequired变量/属性只是解释解决方法的占位符。实际上，随着背景、目标和威胁移动到飞机下方，您必须不断重新绘制场景，并在过程中更新分数

在编写代码之前，你应该设计游戏，目标、角色、控制、限制、等级是什么……纸和铅笔是一个好的开始。问题是，当你开始写代码之前，你会在问自己如何让子弹与目标相撞的那一刻陷入困境？如果我可以用导弹来代替呢最后，您的代码将变得繁重且处理器密集，因为您试图在创建另一个问题时解决一个问题……只是一个建议；）

1）您需要重新定义全局变量，以便跟踪所有内容：

var gameData = {
    interval: null, // Controls the refresh
    redrawRequired: false, // Flag
    allBullets: [], // Moving bullets
    defaultBulletSpeed: 20 // Bullet speed
}

2） 仅检查checkKeyPress（事件）功能中的操作，包括fireGun操作：

function checkKeyPress(event) {
    if (event.keyCode == "87") {//87 W(UP)
        if (startPy >= 20) {
            startPy -= 20;
            gameData.redrawRequired = true;
        }
    } else if (event.keyCode == "83") {//83 S(DOWN)
        if (startPy <= 785) {
            startPy += 20;
            gameData.redrawRequired = true;
        }
    } else if (event.keyCode == "65") {//65 A(LEFT)
        if (startPx >= 0) {
            startPx -= 20;
            gameData.redrawRequired = true;
        }
    } else if (event.keyCode == "68") {//68 D(RIGHT)
        if (startPx <= 410) {
            startPx += 20;
            gameData.redrawRequired = true;
        }
    } else if (event.keyCode == "72") { // 72 SPACEBAR ?? Actually H
        fireGun();
    }
}

4） 然后决定何时重新绘制画布，使用一个主函数（refreshGame）和另一个函数检查是否有要更新的项目符号（refreshBullets）：

注:


由于性能问题，使用setInterval的canvas方法被认为是一种不好的方法。尝试搜索“使用canvas刷新javascript interval”，还有其他方法可以解决此问题。
refreshRequired变量/属性只是解释解决方法的占位符。实际上，随着背景、目标和威胁移动到飞机下方，您必须不断重新绘制场景，并在过程中更新分数

在编写代码之前，你应该设计游戏，目标、角色、控制、限制、等级是什么……纸和铅笔是一个好的开始。问题是，当你开始写代码之前，你会在问自己如何让子弹与目标相撞的那一刻陷入困境？如果我可以用导弹来代替呢最后，您的代码将变得繁重且处理器密集，因为您试图在创建另一个问题时解决一个问题……只是一个建议；）

您不希望每次发射子弹时都使用设置间隔。
您希望在整个游戏中使用一个setInterval，在每个游戏对象上调用更新或绘制函数。
比如说


var游戏={
//这是游戏中我想移动或做的事情的列表
//还没有
对象：[]
}
//这是一个bullet对象，可以通过调用newbullet（）创建它
函数Bullet（）{
//我在这里作弊。不要为了比赛而抽签
//这只是一个快捷方式，而不是在画布上绘制
this.object=document.createElement（'div'）；
this.object.style.width=“10px”；
this.object.style.height=“10px”；
this.object.style.position='absolute'；
this.object.style.top=“100px”；
this.object.style.backgroundColor='red'；
document.body.appendChild（this.object）
///
//这些文件保存了子弹在屏幕上的当前位置
这是x=100；
这个y=100；
//这是每帧调用的更新函数
this.update=函数（）{
//我正在更新子弹的y位置。
这个.y-=10；
如果（此.y>0）{
//不要像这样画dom。像以前一样使用画布。
this.object.style.top=this.y+“px”；
}
}
}
//现在让我们为游戏添加一个子弹
game.objects.push（新子弹（））；
//更新每个对象的函数
函数runGame（）{
对于（var i=0；i，您不希望每次发射子弹时都使用setInterval。
您希望在调用更新的整个游戏中使用一个setInterval
function setUp() {
    project = document.getElementById("project");
    ctx = project.getContext("2d");
    width = 505;
    height = 900;
    mid = width / 2;
    midh = height / 2;
    startPx = width / 2 - 30;
    startPy = height - 150;

    audio = new Audio("bgm.mp3");
    audio.play();

    img = new Image();
    img2 = new Image();
    img.src = "bg.png";
    img2.src = "fighterjet.png"
    img.onload = function() {
        ctx.shadowColor = "#ffffff";
        ctx.shadowBlur = 15;
        ctx.drawImage(img, 0, 0, width, height);
        ctx.drawImage(img2, startPx, startPy);
    }

    window.addEventListener("keydown", checkKeyPress);

    // Here ! And do something about that start button or the game will start over again...
    gameData.interval = window.setInterval(refreshGame, 100);
    document.getElementById("start").style.display = "none";
    project.focus();
}