Div 的边距不变答案

【问题标题】：Div's margin doesn't changeDiv 的边距不变
【发布时间】：2021-03-20 17:43:03
【问题描述】：

嗯，这真的很烦人。我现在挣扎了10分钟。我不知道为什么它不工作。我的问题是，我正在尝试制作蛇游戏。我制作了一个函数，它使用marginTop 和marginLeft 属性移动一个div。

function 有一个 switch 语句，其中 div 被移动。在这个语句中，一切正常，div 移动。但早些时候，在同一个 function 中，我有一个 if 语句，其中 div 当然也应该在某个条件下移动。关键是，这个 if 语句检查蛇的坐标是否超出范围，如果条件为真，它会重置蛇的位置。但是，显然，蛇的没有在移动。

这是一段JS代码：

var snake = document.getElementById("snake")

globalDir = "KeyD" // Right.

function getMarg(margin) {
    return parseInt(margin.substring(0, margin.search("px")))
}


function moveSnake() {
    var style = snake.currentStyle || window.getComputedStyle(snake)

    var snakeX = style.marginLeft
    var snakeY = style.marginTop

    if(getMarg(snakeX) === 500) { // Here, the snake doesn't move.
        snake.style.marginLeft = "0px"
    }

    switch(globalDir) { // Here, the snake mooves.
        case "KeyW":
            snake.style.marginTop = `${getMarg(snakeY) - 10}px`

            break

        case "KeyS":
            snake.style.marginTop = `${getMarg(snakeY) + 10}px`

            break

        case "KeyA":
            snake.style.marginLeft = `${getMarg(snakeX) - 10}px`

            break

        case "KeyD":
            snake.style.marginLeft = `${getMarg(snakeX) + 10}px`

            break
    }
}

/*
* Rest of the code creates a 'looper', that is an interval, which loops the
* function 'moveSnake'. Also, listens for a key press and if any key's
* pressed,'globalDir' variable changes to the pressed key.
*/

有什么想法吗？

【问题讨论】：

首先，请提供适当的minimal reproducible example 此类问题，而不仅仅是 JavaScript 代码。
if(getMarg(snakeX) === 500) { // Here, the snake doesn't move. - 但那个条件实际上是正确的，你确认了吗？你为什么在这里比较恰好 500 像素，为什么这不是大于/小于比较？
@CBroe，是的，我做到了。从技术上讲，我之前使用了console.log("Test...") 语法，并且在控制台中我打印了“测试...”，所以我确信这个条件曾经是正确的。我也确信，getMarg(snakeX) > 499 等条件应该没问题，我应该在控制台中打印出“测试....”。
@CBroe here - codepen.io/kafajku/pen/GRjjWvG 一旦它进入右边界，你应该得到'It's 500！在控制台中打印出来。
此时您设置了 snake.style.marginLeft = "0px"，但之后您的 switch 语句仍会执行。这将进入KeyD 块（假设您还没有按下任何键），并且仍然使用getMarg(snakeX) 的旧值，它仍然是500，因为您没有在两者之间更新snakeX。 var snakeX = style.marginLeft 仅获取当时的当前值，这不会“实时更新”snakeX 稍后，当style.marginLeft 更改时，

标签： javascript html margin

【解决方案1】：

如果有人遇到类似的愚蠢问题，这是我的 JS 代码的更新片段，来自问题：

var snake = document.getElementById("snake")

globalDir = "KeyD" // Right.

function getMarg(margin) {
    return parseInt(margin.substring(0, margin.search("px")))
}


function moveSnake() {
    var style = snake.currentStyle || window.getComputedStyle(snake)

    var snakeX = style.marginLeft
    var snakeY = style.marginTop

    if(getMarg(snakeX) === 500) { // Here, the snake doesn't move.
        snake.style.marginLeft = "0px"
    }

    // Update the 'style' and snake's coords
    style = snake.currentStyle || window.getComputedStyle(snake)

    snakeX = style.marginLeft
    snakeY = style.marginTop

    switch(globalDir) { // Here, the snake mooves.
        case "KeyW":
            snake.style.marginTop = `${getMarg(snakeY) - 10}px`

            break

        case "KeyS":
            snake.style.marginTop = `${getMarg(snakeY) + 10}px`

            break

        case "KeyA":
            snake.style.marginLeft = `${getMarg(snakeX) - 10}px`

            break

        case "KeyD":
            snake.style.marginLeft = `${getMarg(snakeX) + 10}px`

            break
    }
}

/*
* Rest of the code creates a 'looper', that is an interval, which loops the
* function 'moveSnake'. Also, listens for a key press and if any key's
* pressed,'globalDir' variable changes to the pressed key.
*/

感谢@CBroe！

【讨论】：