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

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-case

(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

您可以立即 return false 以避免有人对该变量出错的可能性。但是当我看到你的代码时，我认为你应该在使用检查的代码中搜索问题。

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;
    };

Answer 2

尝试这样做，首先获取你的移动值，然后在你的 switchcase 之后测试它，并确保你的 isBaddieMovable return true of false...如果它 return 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);
    }

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

If-statement to prevent cartoon to be placed outside a predefiend area

javascript

if-statement