Question

基本上，当我在命令行上运行我的.js文档时，我不断收到消息“文档未定义”。我正在尝试创建一个超级基本的游戏，用户通过使用箭头键帮助松鼠到达栗子。到目前为止，我还无法移动松鼠，我怀疑它与文档有关，我没有定义错误（第1-3行，也可能是链接中的52）。

您可以在以下jsfiddle link

中找到我的代码（html，css和js）

（http://jsfiddle.net/8Lbkcsq2/）

var squirrelImg = document.getElementById("squirrelImg");
var forest = document.getElementById("forest");
var chestnutImg = document.getElementById("chestnutsImg");

var squirrel = {
    name: "Mr. Squirrel",
    has_chestnuts: false,
    hungry: true
};

var chestnuts = {
    name: "chestnuts"
};

var positionLeft = 0;
var positionTop = 0;

function move(e) {
    // 39 for right arrow
    if (e.keyCode === 39) {
        if (positionLeft < 850) {
            positionLeft += 50;
            squirrelImg.style.left = positionLeft + "px";
        }
    }
    // 40 for down arrow
    if (e.keyCode === 40) {
        if (positionTop < 600) {
            positionTop += 50;
            squirrelImg.style.top = positionTop + "px";
        }
    }
    // 37 for left arrow
    if (e.keyCode === 37) {
        positionLeft -= 50;
        if (positionLeft < 0) {
            positionLeft += 50; // CHANGE TO +=50 LATER
        }
        squirrelImg.style.left = positionLeft + "px";
    }
    // 38 for up arrow
    if (e.keyCode === 38) {
        positionTop -= 100;
        if (positionTop < 0) {
            positionTop += 50; // CHANGE TO +=50 LATER
        }
        squirrelImg.style.top = positionTop + "px";
    }
    foundChestnuts();
}

document.onKeyDown = move();

function foundChestnuts() {
    if ((squirrelImg.style.top == "300px") && (squirrelImg.style.left == "750px")) {
        squirrel.has_chestnuts = true;
        alert("Thank you for helping Mr. Squirrel find his chestnuts!");
        var eat = confirm("Should Mr.Squirrel eat his chestnuts?");
        if (eat === true) {
            alert("Time to eat!");
            alert("Yum! Mr. Squirrel isn't hungry anymore!");
        } else {
            alert("I guess Mr. Squirrel can wait a little longer...");
        }
    } else {
        squirrel.has_chestnuts = false;
    }
}

body {
    background-color: #b5916c;
}
h3 {
    font-weight: bold;
    text-decoration: underline;
}
p {
    font-family:'Dancing Script', cursive;
    font-size: large;
}
#forest {
    background-image: url(http://s21.postimg.org/jyht762hj/forestfloor.jpg);
    width: 850px;
    height: 600px;
    position: relative;
    /*opacity: 0.5;*/
}
#squirrelImg {
    position: absolute;
    background-image: url(http://s24.postimg.org/wkqh9by4x/squirrel.png);
    height: 100px;
    width: 100px;
    left: 0;
    top: 0;
}
#chestnutsImg {
    position: absolute;
    background-image: url(http://s28.postimg.org/kgiubxhnd/chestnuts.jpg);
    height: 100px;
    width: 100px;
    left: 750px;
    top: 300px;
}

<body>
     <h3>A Plea from Mr. Squirrel:</h3>

    <p>My dearest human,</p>
    <p>I seem to have misplaced my chestnuts and I am quite famished.</p>
    <p>Would you mind assisting me in locating them?</p>
    <p>Much obliged!</p>
    <div id="forest">
        <div id="squirrelImg"></div>
        <div id="chestnutsImg"></div>
    </div>
</body>

Answer 1

问题在于move()要求将事件传递给它，但是当您执行document.onKeyDown = move();时，不会传递任何事件。

将document.onKeyDown = move();更改为document.addEventListener("keydown", move, false);

working jsfiddle

Answer 2

添加事件监听器document.body.addEventListener('keydown', function(e) {...}而不是document.onKeyDown = move()。

的 Updated Fiddle

Answer 3

请将脚本放在</body>之前，或放在window.onload回调函数中。因为在您致电document.getElementById时未创建文档对象。

是的，问题是document.onKeyDown = move()。正确的事件处理程序是document.onkeydown，处理程序应该是函数move，而不是函数结果move()。所以只需更改为document.onkeydown=move

未对'document.getElementById（）'的文档定义错误

3 个答案: