我如何做到这一点,以便可以在一个简单的JavaScript游戏中一次产生多个敌人(和激光)?

时间:2019-02-19 04:09:53

标签: javascript html game-development

我想用HTML / javascript做一个简单的galaga类型的游戏,但遇到了障碍。我无法找到一种方法来使多个敌人同时存在,同时仍然能够追逐玩家(拥有多个激光器也会很好)。

我已经尝试过使用数组,然后使用如下所示的for循环:

for (i = 0; i < enemy.length; i += 1) {
        enemy[i].x += -1;
        enemy[i].update();
}

这是我完整的script.js(我知道它说不要全部粘贴,但我觉得这很有必要)

var player;
var canShoot = true;
var laser;
var isShooting = false;
var enemy;
var score;
var h = false;
var canMove = false;
var isMoving = false;
var gameOver = false;

function startGame() {
    gameArea.start();
    player = new component(30, 30, "purple", 225, 220);
    laser = new component();
    enemy = new component(20, 20, "green", Math.floor(Math.random() * 460), 50);
    score = new component("15px", "Consolas", "black", 380, 20, "text");
}

var gameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        this.frameNo = 0;
        window.addEventListener('keydown', function (e) {
            gameArea.keys = (gameArea.keys || []);
            gameArea.keys[e.keyCode] = true;
        })
        window.addEventListener('keyup', function (e) {
            gameArea.keys[e.keyCode] = false; 
        })
    }, 
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function() {
        clearInterval(this.interval);
    }
}
function everyinterval(n) {
    if ((gameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}
function component(width, height, color, x, y, type) {
    this.type = type;
    if (type == "image") {
        this.image = new Image();
        this.image.src = color;
    }
    this.gamearea = gameArea;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.formerX;
    this.formerY;
    this.score = 0;
    this.isAlive = true;
    this.dx;
    this.dy;
    this.update = function() {
        ctx = gameArea.context;
        if (type == "image") {
            ctx.drawImage(this.image, 
              this.x, 
              this.y,
              this.width, this.height);
        }
        else if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
        if (laser.y <= 0) {
            canShoot = true;
            isShooting = false;
            h = false;
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) ||
        (mytop > otherbottom) ||
        (myright < otherleft) ||
        (myleft > otherright)) {
          crash = false;
        }
        return crash;
    }
    this.crashWithX = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var otherleft = otherobj.formerX;
        var otherright = otherobj.formerX + (otherobj.width);
        var crash = true;
        if ((myright < otherleft) ||
        (myleft > otherright)) {
          crash = false;
        }
        return crash;
    }
    this.moveTowards = function(otherobj) {
        var isLeft;
        if (this.x - otherobj.x > 0) {
            isLeft = true;
        } else {
            isLeft = false;
        }
        return isLeft;
    }
}
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
}
function updateGameArea() {
    var endScreen = new component("50px", "Consolas", "black", 75, 110, "text");
    endScreen.text = "";
    gameArea.clear();
    gameArea.frameNo += 1;
    console.log(enemy.y);
    player.speedX = 0;
    laser.speedY = -5;
    enemy.speedX = 0;
    enemy.speedY = 0;
    var interval = getRndInteger(100, 200);
    if (everyinterval(interval)) {
        player.formerX = player.x
        canMove = true;
    }
    if (Boolean(canMove)) {
        if (enemy.x > player.formerX) {
            enemy.speedX = -10;
        } else if (enemy.x < player.formerX) {
            enemy.speedX = 10;
        }
        if (enemy.crashWithX(player)) {
            enemy.speedX = 0;
            enemy.speedY = 10;
            isMoving = true;
        }
        if (enemy.crashWith(player)) {
            endScreen.text = "GAME OVER!"
            gameArea.stop();
        }
    }
    if (Boolean(enemy.isAlive)) {
        enemy.newPos();
        enemy.update();
    }
    if (enemy.y > 480) {
        enemy.y = -20;
    } else if (enemy.y == 50 && Boolean(isMoving)) {
        canMove = false;
        isMoving = false;
    }
    if (gameArea.keys && gameArea.keys[37] && player.x > 0) {player.speedX = -5}
    if (gameArea.keys && gameArea.keys[39] && player.x < 480 - player.width) {player.speedX = 5}
    if (gameArea.keys && gameArea.keys[32] && Boolean(canShoot)) {laser.x = player.x + 12.5; laser = new component(5, 10, "red", laser.x, 220 - 10); canShoot = false; isShooting = true;}
    if (player.x < 0) {player.x = 0;}
    if (player.x >= 480 - player.width) {player.x = 480 - player.width;}
    if (Boolean(isShooting)) {
        laser.newPos();
        laser.update();
    }
    if (laser.crashWith(enemy) && Boolean(isShooting)) {
        isShooting = false;
        h = true;
        player.score += 10;
        enemy.x = Math.floor(Math.random() * 460);
        enemy.y = 50;
    }
    if (Boolean(h)) {
        laser.newPos();
    }
    score.text = "SCORE: " + player.score;
    score.update();
    player.newPos();
    player.update();
    endScreen.update();
}

因此,这段代码可以正常工作,但是我觉得没有多个敌人并不会很有趣。预先感谢!

0 个答案:

没有答案