Question

我正在创建一个在浏览器中运行的游戏（带有使用我的脚本文件的index.html文件），其中一艘太空船射击掉落的小行星。截至目前，我有一系列的小行星从屏幕顶部掉落，当它们的y值大于我的背景图像的值时，它们将返回顶部。.无限期地继续。

var ctx;
var timer = timer;

var x = 285;
var y = 394;
var radius = 25;
var dx=0;
var dy=0;



var asteroidImg = new Image();
asteroidImg.src = "images/asteroid.png";

function Asteroid(){
    this.x=Math.random()*600;
    this.y=Math.random()*600;
    this.radius = 10;
    this.dy=Math.random()*3+3;
    this.dx=0;
    this.move = function(){
        this.x= this.x + this.dx;
        this.y= this.y +this.dy;

        if(this.y>411){this.y = this.y=0.;}

    };
    this.drawAsteroid = function (){
        ctx.drawImage(asteroidImg,this.x,this.y);
    };
}

var asteroids = [];
var astNumber = 10;
for(var i = 0; i< astNumber; i++)
    asteroids[i]=new Asteroid();

function drawAsteroids(asteroids){
    for(var i = 0; i< astNumber; i++){
        asteroids[i].drawAsteroid();
    }
}

var backgroundImg = new Image();
backgroundImg.src = "images/background.png";


var shipImg = new Image();
shipImg.src = "images/ship.png";



function drawShip(x,y){
    ctx.drawImage(shipImg,this.x, this.y);
}

function drawBackground(){
    ctx.drawImage(backgroundImg,0,0);
}


function draw(){
    drawBackground();
    drawShip(x,y);
    drawAsteroids(asteroids);
}

function collision(asteroid){
    if(Math.pow((asteroid.x-x) ,2)+Math.pow((asteroid.y-y) ,2)<Math.pow((asteroid.radius+radius) ,2))
        return true;
    else
        return false;
}

function update(){

    if(leftKeyPressed == true){
        x-=5;
    }
    if(rightKeyPressed == true){
        x+=5;
    }

    if(x > 590){
        x = 0;
    }
    if(x < 0){
        x = 590;
    }

    for(let i = 0; i< astNumber; i++)
        asteroids[i].move();

    for(var i = 0; i< astNumber; i++)
        if(collision(asteroids[i])){
            dx = 0;
            dy = 0;
            x = 285;
            y = 394;
        }



    draw();
}

var leftKeyPressed =false;
var rightKeyPressed =false;
var spacePressed =false;



function keyDown(e){
    changeKey(e.keyCode, true);
}


function keyUp(e){
    changeKey(e.keyCode, false);
}

function changeKey(which, to){
    switch (which){
    case 32: spacePressed =to; break;
    case 37: leftKeyPressed =to; break;
    case 39: rightKeyPressed =to; break;
    }
}

window.onload=function(){
    ctx=document.getElementById("myCanvas").getContext("2d");
    document.onkeyup=keyUp;
    document.onkeydown=keyDown;
    timer = setInterval(update, 25);
};

几天以来，我一直在尝试创建一个按空格键时发射的子弹数组，我使用的是数组，因为我想要像情感的机枪（如果有更简单的方法这个没有数组的请解释）。我试图复制小行星代码并以多种方式对其进行调整，以期实现这一目标。我对编码非常陌生，无法正常工作。

这是我尝试使其工作时使用的代码。

    var ctx;
var timer = timer;

var x = 285;
var y = 394;
var radius = 25;
var dx=0;
var dy=0;
var shipX = x;
var fire = false;


var bulletImg = new Image();
bulletImg.src = "images/bullet.png";

function Bullet(x, y){
    this.x= shipX;
    this.y=394;
    this.radius = 10;
    this.fired = false;
    this.move = function(){
        this.y-=5;
    };
    this.drawBullet = function(){
        ctx.drawImage(bulletImg,this.x,this.y);
    };
}

var bullets = [];
var bulletNumber = 12;
for(var j = 0; j< bulletNumber; j++)
    bullets[j]= new Bullet();


function Machine(){
    if(fire==true){
        for(let j =0; j<bulletNumber;j++)
            bullets[j].fired=true;
        for(let j = 0; j< bulletNumber; j++)
            bullets[j].drawBullet(bullets);
        for(let j = 0; j< bulletNumber; j++)
            bullets[j].move();
        for(let j = 0; j< bulletNumber; j++)
            bullets[j].x=bullets[j].x;

    }
}

function reload(){
    for(var j = 0; j< bulletNumber; j++)
        if(bullets[j].y==394){
            bullets[j].x=shipX;
        }
    for(let j =0; j<bulletNumber;j++){
        bullets[j].fired=false;
    }
}




var asteroidImg = new Image();
asteroidImg.src = "images/asteroid.png";

function Asteroid(){
    this.x=Math.random()*600;
    this.y=Math.random()*600;
    this.radius = 10;
    this.dy=Math.random()*3+3;
    this.dx=0;
    this.move = function(){
        this.x= this.x + this.dx;
        this.y= this.y +this.dy;

        if(this.y>411){this.y = this.y=-10.;this.x=Math.random()*600;}

    };
    this.drawAsteroid = function (){
        ctx.drawImage(asteroidImg,this.x,this.y);
    };
}

var asteroids = [];
var astNumber = 10;
for(var i = 0; i< astNumber; i++)
    asteroids[i]=new Asteroid();

function drawAsteroids(asteroids){
    for(var i = 0; i< astNumber; i++){
        asteroids[i].drawAsteroid();
    }
}

var backgroundImg = new Image();
backgroundImg.src = "images/background.png";


var shipImg = new Image();
shipImg.src = "images/ship.png";



function drawShip(shipX,y){
    ctx.drawImage(shipImg,shipX, this.y);
}

function drawBackground(){
    ctx.drawImage(backgroundImg,0,0);
}


function draw(){
    drawBackground();
    drawShip(shipX,y);
    drawAsteroids(asteroids);
    Machine();
}

function collision(asteroid){
    if(Math.pow((asteroid.x-shipX) ,2)+Math.pow((asteroid.y-y) ,2)<Math.pow((asteroid.radius+radius) ,2))
        return true;
    else
        return false;
}

function update(){

    if(leftKeyPressed == true){
        shipX-=5;
    }
    if(rightKeyPressed == true){
        shipX+=5;
    }


    if(spacePressed){
        fire=true;
    }

    if(spacePressed){
        if(keyUp){
            reload();

        }
    }

    if(x > 590){
        x = 0;
    }
    if(x < 0){
        x = 590;
    }

    for(let i = 0; i< astNumber; i++)
        asteroids[i].move();

    for(var i = 0; i< astNumber; i++)
        if(collision(asteroids[i])){
            dx = 0;
            dy = 0;
            x = 285;
            y = 394;
        }



    draw();
}


var leftKeyPressed =false;
var rightKeyPressed =false;
var spacePressed =false;


function keyDown(e){
    changeKey(e.keyCode, true);
}


function keyUp(e){
    changeKey(e.keyCode, false);
}

function changeKey(which, to){
    switch (which){
    case 32: spacePressed =to; break;
    case 37: leftKeyPressed =to; break;
    case 39: rightKeyPressed =to; break;
    }
}

window.onload=function(){
    ctx=document.getElementById("myCanvas").getContext("2d");
    document.onkeyup=keyUp;
    document.onkeydown=keyDown;
    timer = setInterval(update, 25);
};

运行此代码时，按下空格时，所有子弹会同时发射，因此看起来好像只发射了一颗。我认为要解决此bulletNumber必须从1开始然后增加，但是我找不到解决方案。

如果您有任何疑问，希望我进行澄清或提供文件，以便您可以运行代码并查看其工作方式。

Answer 1

在那一行上有一个错字：

        bullets[j].move;

应该是

        bullets[j].move();

如何在我的Javascript游戏中使用项目符号

1 个答案: