如果声明防止漫画被放置在预先定义的区域之外

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

本文关键字:定义 区域 声明 如果      更新时间:2024-06-11

我在获取下面的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;

尝试这样做,首先获取移动值,然后在切换后对其进行测试,并确保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);
    }

您可以立即返回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;
    };