Javascript游戏 - 无法读取未定义的“y”属性答案

【问题标题】：Javascript game - cannot read "y" property of undefinedJavascript游戏 - 无法读取未定义的“y”属性
【发布时间】：2017-12-28 19:46:02
【问题描述】：

所以我今天正在制作这款游戏，一切正常，但有时会出现此错误。我知道这意味着什么，我以前也有过，但这次没有意义。游戏运行良好，但有时当子弹与敌人相撞时游戏会冻结。我什至不知道该尝试什么了。顺便说一句，如果错误没有立即出现，请继续播放。代码如下：

<html>
<head>
<title>Space shooter</title>
<style>
* {
    margin:0;
}
canvas {
    background: url("http://www.ufointernationalproject.com/wp-content/uploads/2017/03/space-03.jpg");
}
</style>
</head>
<body>
<canvas id="canvas" width="1350" height="630"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d"),
    lastShot = Date.now(),
    fireRate = 120,
    bullets = [],
    enemies = [],
    enemySpeed = 1.5,
    bulletSpeed = 20,
    player = {
        x: 600,
        y: 250,
        leftPressed: false,
        rightPressed: false,
        upPressed: false,
        downPressed: false,
        spacePressed: false,
        speed: 5
    };
var playerImage = new Image();
playerImage.src = "https://3.bp.blogspot.com/-jGC08Dy0zg8/U405cNq1-MI/AAAAAAAABqU/38d5rmV1S8Y/s1600/redfighter0006.png";
var enemyImage = new Image();
enemyImage.src = "https://a.fsdn.com/con/app/proj/partartspace/screenshots/Spaceship14.png/1";

function spawnEnemes() {
    enemies.push({
        x:Math.floor(Math.random() * 1250) + 1,  
        y:-100
    })
}
setInterval(spawnEnemes, 500);

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(playerImage, player.x,player.y, 100, 100);

    if (player.leftPressed) {
        player.x -= player.speed;
    }
    if (player.rightPressed) {
        player.x += player.speed;
    }
    if (player.upPressed) {
        player.y -= player.speed;
    }
    if (player.downPressed) {
        player.y += player.speed;
    }
    if (player.spacePressed && Date.now() - lastShot > fireRate) {
        bullets.push({
            x: player.x+50,
            y: player.y
        });
        lastShot = Date.now();
    }   

    bullets.forEach(function(bullet){       
        ctx.beginPath();
        ctx.arc(bullet.x, bullet.y, 5, 0, 2 * Math.PI);
        ctx.fillStyle = "red";
        ctx.fill(); 
        bullet.y -= bulletSpeed;                    
    }); 

    enemies.forEach(function(enemy){
        ctx.drawImage(enemyImage, enemy.x, enemy.y, 100,100);
        enemy.y += enemySpeed;  
    }); 

    for (var enemy = 0; enemy < enemies.length; enemy ++){
        if(player.x < enemies[enemy].x + 80 &&
               player.x + 80 > enemies[enemy].x &&
               player.y < enemies[enemy].y + 65 &&
               player.y + 100  > enemies[enemy].y)
            {
                document.location.reload();
            }
        for (var bullet = 0; bullet < bullets.length; bullet ++) {
            if(bullets[bullet].y < enemies[enemy].y + 70 &&
               bullets[bullet].y > enemies[enemy].y &&
               bullets[bullet].x < enemies[enemy].x + 100 &&
               bullets[bullet].x > enemies[enemy].x)    
            {
                bullets.splice(bullet, 1);
                enemies.splice(enemy, 1);               
            }                   
        }   
    }

    requestAnimationFrame(draw);
}
draw();

document.body.addEventListener("keydown", function(e) {
    if (e.keyCode === 37) {
        player.leftPressed = true;
    }
    else if (e.keyCode === 39) {
        player.rightPressed = true;
    }
    else if (e.keyCode === 38) {
        player.upPressed = true;
    }
    else if (e.keyCode === 40) {
        player.downPressed = true;
    }
    else if (e.keyCode === 32) {
        player.spacePressed = true;
    }
});
document.body.addEventListener("keyup", function(e) {
    if (e.keyCode === 37) {
        player.leftPressed = false;
    }
    else if (e.keyCode === 39) {
        player.rightPressed = false;
    }
    else if (e.keyCode === 38) {
        player.upPressed = false;
    }
    else if (e.keyCode === 40) {
        player.downPressed = false;
    }
    else if (e.keyCode === 32) {
        player.spacePressed = false;
    }
});
</script>
</body>
</html>

【问题讨论】：

把它变成一个sn-p
错误发生在哪一行？
第 92 行。
Uncaught TypeError: Cannot read property 'y' of undefined at draw 在第 102 行
抱歉，我的本地文件是第 92 位，但这里是第 102 位。

标签： javascript html collision-detection 2d-games

【解决方案1】：

问题似乎出在拼接时。由于您不退出循环，因此您最终会在移除后访问无效位置。

【讨论】：

我只是在拼接后添加了break，现在它可以完美运行了。非常感谢你！