为什么我不能使用 function 在 javascript 中进行碰撞检查？

Question

我有一个简单的碰撞检测工作，可以让你从块上跳下来，但如果我调用一个 function，它里面有相同的代码块。 它会破裂。

在没有 function 的情况下拨打电话：

    for(let i = 0; i < blocks.length; i++){
        if(blockCollision(sprite, blocks[i])){
            sprite.vy = 0;
            // sprite.vy += gravity;

            if(blockCollisionLeft(sprite, blocks[i])){
                sprite.vx = 0;
                sprite.x = blocks[i].x - sprite.w - offset;
            }
            if(blockCollisionRight(sprite, blocks[i])){
                sprite.vx = 0;
                sprite.x = blocks[i].x + blocks[i].w + offset;
            }

            if(blockCollisionTop(sprite, blocks[i])){
                sprite.y = blocks[i].y - sprite.h - offset;
                sprite.canJump = true;
            }else{
                // sprite.vy = 0;
                sprite.y = blocks[i].y + blocks[i].h + offset;
                sprite.vy += gravity;
            }
        }
    }

以及与 function 的通话：

    for(let i = 0; i < blocks.length; i++){
         if(blockCollision(sprite, blocks[i])){
             checkCollisions(sprite, blocks[i]);
             break;
         }
    }

我不知道此时该怎么办，精灵块不断跳出控制，不太明白为什么 function 调用会这样做。

 const PI = Math.PI; const offset = 1; const gravity =.33; function inCanvas(obj){ if(obj.x - offset < 0 && obj.x + obj.w + offset > w && obj.y - offset < 0 && obj.y + obj.h + offset > h){ return true; } return false; } function groundCollision(obj){ if(obj.y + obj.h + offset == h){ return true; } return false; } function blockCollision(obj, block){ if(obj.x - offset < block.x + block.w && obj.x + obj.w + offset > block.x && obj.y - offset < block.y + block.h && obj.y + obj.h + offset > block.y){ return true; } return false; } function blockCollisionTop(obj, block){ if(obj.y + obj.h + offset > block.y && obj.y + obj.h + offset < block.y + block.h){ return true; } return false; } function blockCollisionLeft(obj, block){ if(obj.x + obj.w + offset > block.x && obj.x + obj.w < block.x){ return true; } return false; } function blockCollisionRight(obj, block){ if(obj.x - offset < block.x + block.w && obj.x > block.x + block.w){ return true; } return false; } function Sprite(_x, _y, _w, _h){ this.x = _x; this.y = _y; this.w = _w; this.h = _h; this.vx = 0; this.vy = 0; this.jv = -11; this.canJump = false; // this.maxv = 3; }; Sprite.prototype.draw = function(){ ctx.fillRect(this.x, this.y, this.w, this.h); }; Sprite.prototype.update = function(){ this.x += this.vx; this.y += this.vy; this.vy += gravity; // this.yv -= gravity; // this.xv -= gravity; // this.xv += gravity; if(this.y + this.h + offset > h){ this.y = h - this.h - offset; } if(this.y - offset < 0){ this.y = offset; } if(this.x - offset < 0){ this.x = offset; } if(this.x + this.w + offset > w){ this.x = w - this.w - offset; } }; Sprite.prototype.jump = function(){ this.vy = this.jv; }; function Block(_x, _y, _w, _h){ this.x = _x; this.y = _y; this.w = _w; this.h = _h; this.steppedOn = false; }; Block.prototype.draw = function(){ ctx.fillRect(this.x, this.y, this.w, this.h); }; const canvas = document.getElementById("game"); const ctx = canvas.getContext("2d"); const w = canvas.width = 600; const h = canvas.height = 600; var right = false, left = false, up = false; var sprite = new Sprite(100, 200, 20, 40); var box1 = new Block(w - 300, h - 80, 300, 10); var blocks = []; for(let i = 1; i <= 10; i++){ blocks.push(new Block(Math.round(Math.random() * w), Math.round(Math.random() * h), w/4 + Math.round(Math.random() * (w)), 15)); } //console.log(blocks); (function update(){ ctx.clearRect(0, 0, w, h); sprite.draw(); for(let i = 0; i < blocks.length; i++){ blocks[i].draw(); } box1.draw(); sprite.update(); // pOne.xv = left? -2: right? 2: 0; if(left && right){ sprite.vx = 0; } else if(left){ sprite.vx = -2; } else if(right){ sprite.vx = 2; } else{ sprite.vx = 0; } if(up && sprite.canJump){ sprite.jump(); sprite.canJump = false; } if(groundCollision(sprite)){ sprite.canJump = true; } checkCollisions(sprite, box1); for(let i = 0; i < blocks.length; i++){ if(blockCollision(sprite, blocks[i])){ checkCollisions(sprite, blocks[i]); break; } } // if(blockCollision(sprite, box1)){ // // checkCollisions(sprite, box1); // sprite.vy = 0; // // sprite.vy += gravity; // if(blockCollisionLeft(sprite, box1)){ // sprite.vx = 0; // sprite.x = box1.x - sprite.w - offset; // } // if(blockCollisionRight(sprite, box1)){ // sprite.vx = 0; // sprite.x = box1.x + box1.w + offset; // } // if(box1.steppedOn = blockCollisionTop(sprite, box1)){ // sprite.y = box1.y - sprite.h - offset; // sprite.canJump = true; // }else{ // // sprite.vy = 0; // sprite.y = box1.y + box1.h + offset; // sprite.vy += gravity; // } // } window.addEventListener("keydown", (e)=>{ // console.log(e.key); if(e.key == "a" || e.key == "ArrowLeft"){ left = true; } if(e.key == "d" || e.key == "ArrowRight"){ right = true; } if(e.key == " " || e.key == "ArrowUp"){ up = true; } }); window.addEventListener("keyup", (e)=>{ if(e.key == "a" || e.key == "ArrowLeft"){ left = false; } if(e.key == "d" || e.key == "ArrowRight"){ right = false; } if(e.key == " " || e.key == "ArrowUp"){ up = false; } }); window.requestAnimationFrame(update); }()); function checkCollisions(obj, block){ if(blockCollision(obj, block)){ obj.vy = 0; // obj.vy += gravity; if(blockCollisionLeft(obj, block)){ obj.vx = 0; obj.x = block.x - obj.w - offset; } if(blockCollisionRight(obj, block)){ obj.vx = 0; obj.x = block.x + block.w + offset; } if(block.steppedOn = blockCollisionTop(obj, block)){ obj.y = obj.y - obj.h - offset; obj.canJump = true; }else{ // obj.vy = 0; obj.y = block.y + block.h + offset; obj.vy += gravity; } } }

 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Block Jump</title> <style> *{margin:0; padding: 0;} #game{ display:inherit; margin:30px auto; border:thin solid black; } </style> </head> <body> <canvas id="game"></canvas> <script src="JS/main.js"></script> </body>

Answer 1

您的前两个代码片段不等效，您似乎在示例中添加了一个带有 function 的 break 语句。当blockCollision(sprite, blocks[i])为真时，这将产生过早终止 for 循环的效果，这可能这就是为什么你看到两者之间的区别。

编辑：您似乎还稍微更改了 function 中的第三个 if 块。在您的第一个代码片段中，if 块定义为：

if(blockCollisionTop(sprite, blocks[i])){
    sprite.y = blocks[i].y - sprite.h - offset;
    sprite.canJump = true;
}

但在您的 function 中定义为：

if(block.steppedOn = blockCollisionTop(obj, block)){
    obj.y = obj.y - obj.h - offset;
    obj.canJump = true;
}

这不等价，因为您已将blocks[i]替换为obj ，但它应该是block 。