Question

我无法获取跟踪该人的代码

当我试图调用它们时，它说变量是未定义的。 xcor=10;和ycor=10;很简单，对吧？但是，当我尝试alert(xcor);时，它表示该变量未定义。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
    var canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var scaleX = canvas.width / window.innerWidth;
    var scaleY = canvas.height / window.innerHeight;
    var scaleToFit = Math.min(scaleX, scaleY);
    stage.style.transformOrigin = "0 0";
    stage.style.transform = "scale("+scaleToFit+")";

    var xcor = 10;
    var ycor = 10;

    function leftArrowPressed() {
        document.getElementById("image1").src = "guy";
        var element = document.getElementById("image1");
        element.style.left = parseInt(element.style.left) - 20 + 'px';
        xcor=xcor-1;
    }

    function rightArrowPressed() {
        document.getElementById("image1").src = "https://img.fotor.com/share/1484177305166vaq.png";
        var element = document.getElementById("image1");
        element.style.left = parseInt(element.style.left) + 20 + 'px';
        var xcor=xcor+1;
    }

    function upArrowPressed() {
        var element = document.getElementById("image1").src = "https://img.fotor.com/share/1484094028738dPY.png";
        var element = document.getElementById("image1")
        element.style.top = parseInt(element.style.top) - 20 + 'px';
        var ycor=ycor-1;
    }

    function downArrowPressed() {
        var element = document.getElementById("image1").src = "guy";
        var element = document.getElementById("image1");
        element.style.top = parseInt(element.style.top) + 20 + 'px';
        var ycor=ycor+1;
    }

    function spaceBarPressed(){
        document.getElementById("demo").innerHTML = + window.xcor +" and " + window.ycor;
    }

    function leftP2(){
        document.getElementById("image2").src = "/left.png";
        var element = document.getElementById("image2");
        element.style.left = parseInt(element.style.left) - 20 + 'px';
    }

    function rightP2(){
        document.getElementById("image2").src = "/right.png";
        var element = document.getElementById("image2");
        element.style.left = parseInt(element.style.left) + 20 + 'px';
    }

    function upP2(){
        document.getElementById("image2").src = "/up.png";
        var element = document.getElementById("image2");
        element.style.top = parseInt(element.style.top) - 20 + 'px';
    }

    function downP2(){
        document.getElementById("image2").src = "/down.png";
        var element = document.getElementById("image2");
        element.style.top = parseInt(element.style.top) + 20 + 'px';
    }

    function moveSelection(event) {                    
        switch (event.keyCode) {
            case 65:
                leftArrowPressed();
                break;
            case 68:
                rightArrowPressed();
                break; 
            case 87:
                upArrowPressed();
                break;
            case 83:
                downArrowPressed();
                break;
            case 32:
                spaceBarPressed();
                break;
            case 72:
                leftP2();
                break;
            case 75:
                rightP2();
                break;
            case 85:
                upP2();
                break;
            case 74:
                downP2();
                break;
        }
    }

    function gameLoop(){
        moveSelection();
        document.getElementById("image1").style.visibility = "visible";
        setTimeout("gameLoop()",0);
    }
    </script>
    <style>
    body{
        background-color:#999999;
        background-image: url("https://img.fotor.com/share/1484270966026uCF.jpg");
        background-size: 75px 75px;
    }
    </style>
</head>

<body onload="gameLoop();" onkeydown="" onkeyup="moveSelection(event)" cz-shortcut-listen="true">
    <img id="image1" src="https://img.fotor.com/share/1484177305166vaq.png" style="TOP:200px;LEFT:200px;position:absolute;">
    <img id="image2" src="/down.png" style="TOP:400px;LEFT:400px;position:absolute;">
    <p id="demo" style="color:white;">Hi</p>
</body>
</html>

Answer 1

您似乎在某些功能中使用xcor重新定义ycor和var。你应该只是增加。

在顶部你有：

var xcor = 10;
var ycor = 10;

然后你有：

function leftArrowPressed() {
       document.getElementById("image1").src = "guy";
        var element = document.getElementById("image1");
        element.style.left = parseInt(element.style.left) - 20 + 'px';
       xcor=xcor-1;

    }

这是一个正确的增量。然后你有：

function rightArrowPressed() {
      document.getElementById("image1").src = "https://img.fotor.com/share/1484177305166vaq.png";
        var element = document.getElementById("image1");
        element.style.left = parseInt(element.style.left) + 20 + 'px';
        var xcor=xcor+1; //THIS IS NOT A CORRECT INCREMENT

    }

如何为我的角色添加坐标，这是一个将继续移动的img

1 个答案: