检测数组中两个精灵的碰撞?Javascript

Detecting Collision of two sprites in arrays? Javascript

本文关键字:精灵 碰撞 Javascript 两个 数组 检测      更新时间:2023-09-26

我一直在阅读/寻找一个答案来检测两个数组中的精灵碰撞。我不明白如何将两个数组传递到检测函数中,并让它检查每个数组的所有内容。如有任何意见,不胜感激。

<script type="text/javascript">
        var FIRE = 0;
        var NORTH = 38;
        var SOUTH = 40;
        var EAST  = 39;
        var WEST  = 37;
        var destX = 350;
        var destY = 500;
        var canvas = null;
        var context = null;
        var sprites = null;
        var player = null;
        var island = null;
        var enemies = [];
        var fires = [];
        var gameLoopInterval = null;
        var offScreenFire = null;
        var isShooting = false;
        var intersect = null;
    var Fire = function() {
            this.spriteX = 278;
            this.spriteY = 110;
            this.spriteWidth = 13;
            this.spriteHeight = 16;
            this.destX = player.destX + 25;
            this.destY = player.destY;
            this.speed = 5;
        }
    var Player = function(name) {
            this.name = name;
            this.spriteX = 5;
            this.spriteY = 400;
            this.spriteWidth = 64;
            this.spriteHeight = 64;
            this.destX = 350;
            this.destY = 500;
            this.speed = 5;
            this.level = 1;
        }
    var Enemy = function() {
            this.spriteX = 4;
            this.spriteY = 4;
            this.spriteWidth = 32;
            this.spriteHeight = 32;
            this.destX = Math.ceil(Math.random() * (800 - this.spriteWidth));
            this.destY = this.spriteWidth;
            this.speed = Math.ceil(Math.random() * 5);
        }
    var Island = function() {
            this.spriteX = 168;
            this.spriteY = 500;
            this.spriteWidth = 64;
            this.spriteHeight = 64;
            this.destX = Math.ceil(Math.random() * (800 - this.spriteWidth));
            this.destY = this.spriteWidth - 64;
            this.speed = 2;
        }
    Fire.prototype.takeTurn = function() {
        var intersect;
        var projdestX  = this.destX;
        var projdestY  = this.destY;
        var projspriteWidth  = this.spriteWidth;
        var projspriteHeight  = this.spriteHeight;

        for (enemy in enemies)  {
             intersect = intersect || intersects(enemy.destX, enemy.destY, enemy.spriteWidth, enemy.spriteHeight, projdestX, projdestY, projspriteWidth, projspriteHeight);
        }
            if(intersect == true) { alert("colliding"); }
        else{drawImage(this);}
            // if (intersect != true){
                // drawImage(this);
            // }
            // else {
                // alert("boom");
            // }
            if(this.destY <= 0){
            offScreenFire = fires.indexOf(this);
            fires.splice(offScreenFire, 1);
            }
            else
            this.destY -= this.speed;
        }
    Player.prototype.takeTurn = function() {
            drawImage(this);
        }
    Enemy.prototype.takeTurn = function() {
            drawImage(this);

         if (this.destY < canvas.height)
                this.destY += this.speed;
         else 
             this.destY = -32;
        }
    Island.prototype.takeTurn = function() {
            drawImage(this);
            this.destY += this.speed;
        }
function fireAction() {
            var fire = new Fire();
                drawImage(fire);
                fires.push(fire);
    } 
function drawImage(sprite) {
            context.drawImage(sprites, sprite.spriteX, sprite.spriteY, sprite.spriteWidth, sprite.spriteHeight, sprite.destX, sprite.destY, sprite.spriteWidth, sprite.spriteHeight );
    }
function gameLoop () {
            context.clearRect(0, 0, canvas.width, canvas.height);
            island.takeTurn();
            player.takeTurn();
            //console.log(fires); //debug
            for (fire in fires) {
                fires[fire].takeTurn();
               }
            for (enemy in enemies) {
                enemies[enemy].takeTurn();
                    }   
        }

function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
        if (w2 !== Infinity && w1 !== Infinity) {
                 w2 += x2;
                 w1 += x1;
            if (isNaN(w1) || isNaN(w2) || x2 > w1 || x1 > w2)
                return false;
            }
        if (y2 !== Infinity && h1 !== Infinity) {
                h2 += y2;
                h1 += y1;
              if (isNaN(h1) || isNaN(y2) || y2 > h1 || y1 > h2)
                return false;
            }
         return true;
}
window.onload = function() {
        //alert('here');
            canvas =  document.getElementById('gameWorld');
            context = canvas.getContext("2d");
            sprites = new Image();
            player = new Player('Brad');
            island = new Island();

            sprites.onload = function() {
                drawImage(player);  
                for (i = 0; i < 3; i++) {
                    var enemy = new Enemy();
                    drawImage(enemy);
                    enemies.push(enemy);
                }
            }
            sprites.src = "Sprites/1945.png";
            gameLoopInterval = setInterval('gameLoop()', 100)
    }


    window.onkeypress = function(e){
            var evt = window.event ? event : e;
            //alert(evt.keyCode);
            switch(evt.keyCode) {
                case NORTH:
                 if (player.destY > 0)
                    player.destY -= player.speed;
                else
                    player.destY == player.destY;   
                    break;
                case SOUTH:
                 if (player.destY < canvas.height - player.spriteWidth)
                    player.destY += player.speed;
                else
                    player.destY == player.destY;   
                    break;
                case EAST:
                    if (player.destX < canvas.width - player.spriteWidth)
                       player.destX += player.speed;
                else
                    player.destX == player.destY;
                    break;
                case WEST:
                if (player.destX > 0)
                    player.destX -= player.speed;
                else
                    player.destX == player.destX;
                    break;
                case FIRE:
                        fireAction();
                    break;
            }
    }
</script>

您的问题似乎在:

for (enemy in enemies) {
    intersect = intersects(enemy.destX, enemy.destY, enemy.spriteWidth, enemy.spriteHeight, projdestX, projdestY, projspriteWidth, projspriteHeight);
}

intersect将始终保存最后一个值。(这意味着你实际上只是在检查它是否与最后一个敌人相交。)

一个快速的解决方案是将内行改为:

intersect = intersect || intersects(enemy.destX, enemy.destY, enemy.spriteWidth, enemy.spriteHeight, projdestX, projdestY, projspriteWidth, projspriteHeight);

如果火焰没有与下一个敌人相交,这将使相交保持为true

编辑:

你的第二个问题是相同的()。在javascript中,当您执行for in时,第一个变量没有对实例的引用,而只是键。

最后的for应该是这样的:

for (enemy in enemies) {
    intersect = intersect || intersects(enemies[enemy].destX, enemies[enemy].destY, enemies[enemy].spriteWidth, enemies[enemy].spriteHeight, projdestX, projdestY, projspriteWidth, projspriteHeight);
}

你似乎也没有产生任何敌人。在我的代码(http://jsfiddle.net/path411/umjnQ/)中,我将以下代码片段添加到您的gameLoop()中:

if(enemies.length < 1) {
    enemies.push(new Enemy());
}

这只会在你没有敌人的情况下创造一个新敌人。(以后可能需要更改)。