Question

我无法在下面找到这个if语句来正确地执行我想要的操作。这里提到的这个“Baddie”是一个动画片，它通过按400px宽度300px高度的箭头键在盒子里移动。

这个功能会阻止他移出这个盒子，但我的问题是，即使我的变量为movable = false;

，他也可以开箱即用

var isBaddieMovable = function(moveLeft, moveTop) {
        var movable, newLeft, newTop, max;
        console.log("Checking if baddie collided with the content walls");
        movable = true;
        // Get baddie's new position if moved
        newLeft = left + moveLeft*step;
        newTop = top + moveTop*step;
        console.log("Checking collision at", newLeft, newTop);

        // Left wall collide check - check if newLeft outside content
        var condition = false;
        if(newLeft < 0) {
            movable = false;
            console.log("Baddie collided with left wall");
        }
        condition = false;
        // Top wall collide check - check if newTop is outside content
        if(newTop < 0) {
            movable = false;
            console.log("Baddie collided with top wall");
        }
        // Right wall collide check
        max = 400;
        if(newLeft + baddie.offsetWidth > max) {
            movable = false;
            console.log("Baddie collided with right wall");
        }
        // Bottom wall collide check
        max = 300;
        if(newTop + baddie.offsetHeight > max) {
            movable = false;
            console.log("Baddie collided with bottom wall");
        }

        // Return if baddie collided
        return movable;
    };

我可以从console.log()看到该函数发现Baddie与墙碰撞，但即使设置了movable = false，他仍然会穿过墙壁。

Console:
Baddie will step 50 pixels each move
Baddie starts at 0,0
37 was pressed
Checking if baddie collided with the content walls
Checking collision at -50 0
Baddie collided with left wall

这有足够的信息来帮助我吗？

编辑：正如有人提到的，我在这里添加了运动功能：

var moveBaddie = function(moveLeft, moveTop) {

        left += moveLeft*step;
        top += moveTop*step;

        baddie.style.left = left + "px";
        baddie.style.top = top + "px";
    };

编辑2：这是调用函数isBaddieMovable()和moveBaddie()

的Switch案例

(function(){
    'use strict';

    var baddie, content;
    var step, left, top;

    baddie = document.getElementById("baddie");
    content = document.getElementById("content");

    step = baddie.offsetWidth;
    console.log("Baddie will step " + step + " pixels each move");

    // Gets starting position of baddie
    left = baddie.offsetLeft;
    top = baddie.offsetTop;
    console.log("Baddie starts at " + left + "," + top);

    /* ------------------------------------
     * EVENTS
     */
    // Triggers action on keypress
    document.addEventListener("keydown", function(event) {
        var key;
        // Gets what key was pressed as number
        key = event.keyCode || event.which;
        console.log(key + " was pressed");

        // Switch case to decide where baddie is to go
        switch(key) {
            case 37: {
                isBaddieMovable(-1, 0);
                return moveBaddie(-1, 0)+turnLeft();    
                    }
                break;
            case 38:{
                isBaddieMovable(0, -1);
                return moveBaddie( 0, -1);  
                break;
                    }   
            case 39: {
                isBaddieMovable(1, 0);
                return moveBaddie(1, 0)+turnRight();
                break;
                }
            case 40: {
                isBaddieMovable(0, 1);
                return moveBaddie(0, 1);

                break;
                }
            default:
                console.log("Nothing happened with the gameboard");

                return true;
        }
        // Baddie action was performed - prevent button default
        event.preventDefault();
    });

编辑：原来这不是功能失败。这是我的开关盒没有正确设置。改成了这个，现在它正在运作！

switch(key) {
        case 37: 
            if (isBaddieMovable(-1, 0))
            return moveBaddie(-1, 0)+turnLeft();

            break;
        case 38:
            if (isBaddieMovable(0, -1))
            return moveBaddie( 0, -1);
            break;

        case 39: 
            if (isBaddieMovable(1, 0))
            return moveBaddie(1, 0)+turnRight();
            break;
        case 40: 
            if (isBaddieMovable(0, 1))
            return moveBaddie(0, 1);
            break;

Answer 1

尝试这样做，首先获取您的移动值，然后在您的switchcase之后测试它，并确保您的isBaddieMovable返回true为false ...如果它返回true则执行移动...

我希望它会有所帮助。

var movementToDo = {left:0,up:0};
var couldMove = false;

switch(key) {
        case 37: 
             movementToDo.left= -1;
             movementToDo.up = 0;
            break;
        case 38:
             movementToDo.left= 0;
             movementToDo.up = -1;
            break; 
        case 39: 
             movementToDo.left= 1;
             movementToDo.up = 0;
            break; 
        case 40: 
             movementToDo.left= 0;
             movementToDo.up = 1;
            break; 
        default:
            console.log("Nothing happened with the gameboard");

            return true;
    }

    if(isBaddieMovable(movementToDo.left,movementToDo.up)){
      moveBaddie(movementToDo.left,movementToDo.up);
    }

Answer 2

您可以立即返回虚假以避免某人出错该错误的可能性。但是，当我看到你的代码时，我认为你应该在使用检查的代码中搜索问题。

var isBaddieMovable = function(moveLeft, moveTop) {
        var newLeft, newTop, max;
        console.log("Checking if baddie collided with the content walls");
        // Get baddie's new position if moved
        newLeft = left + moveLeft*step;
        newTop = top + moveTop*step;
        console.log("Checking collision at", newLeft, newTop);

        // Left wall collide check - check if newLeft outside content

        if(newLeft < 0) {
            console.log("Baddie collided with left wall");
            return false;
        }

        if(newTop < 0) {
            console.log("Baddie collided with top wall");
            return false;
        }
        // Right wall collide check
        max = 400;
        if(newLeft + baddie.offsetWidth > max) {
            console.log("Baddie collided with right wall");
            return false;
        }
        // Bottom wall collide check
        max = 300;
        if(newTop + baddie.offsetHeight > max) {
            console.log("Baddie collided with bottom wall");
            return false;
        }

        // Return if baddie collided
        return true;
    };

if语句，以防止卡通被放置在预定义区域之外

2 个答案: