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

Javascript 如何为我的角色添加坐标，这是一个将继续移动的img
javascript html css canvas
Javascript 如何为我的角色添加坐标，这是一个将继续移动的img,javascript,html,css,canvas,Javascript,Html,Css,Canvas,我找不到跟踪那个家伙的密码这意味着当我试图调用变量时，变量是未定义的xcor=10和ycor=10很简单，对吗？但是当我尝试执行警报（xcor）时表示变量未定义 <!DOCTYPE html> <html> <head> <title></title> <script> var canvas = document.getElementById('canvas'); canvas.width
我找不到跟踪那个家伙的密码
这意味着当我试图调用变量时，变量是未定义的<代码>xcor=10和
ycor=10很简单，对吗？但是当我尝试执行警报（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>


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”；
stage.style.transform=“缩放（“+scaleToFit+”）；
var xcor=10；
var ycor=10；
函数leftarrowspressed（）{
document.getElementById（“image1”）.src=“guy”；
var元素=document.getElementById（“image1”）；
element.style.left=parseInt（element.style.left）-20+'px'；
xcor=xcor-1；
}
函数rightarrowspressed（）{
document.getElementById（“image1”）.src=”https://img.fotor.com/share/1484177305166vaq.png";
var元素=document.getElementById（“image1”）；
element.style.left=parseInt（element.style.left）+20+'px'；
var xcor=xcor+1；
}
函数upArrowPressed（）{
var element=document.getElementById（“image1”）.src=”https://img.fotor.com/share/1484094028738dPY.png";
var元素=document.getElementById（“image1”）
element.style.top=parseInt（element.style.top）-20+'px'；
var ycor=ycor-1；
}
函数向下箭头按下（）{
var element=document.getElementById（“image1”）.src=“guy”；
var元素=document.getElementById（“image1”）；
element.style.top=parseInt（element.style.top）+20+'px'；
var ycor=ycor+1；
}
函数spaceBarPressed（）{
document.getElementById（“demo”）.innerHTML=+window.xcor+”和“+window.ycor”；
}
函数leftP2（）{
document.getElementById（“image2”）.src=“/left.png”；
var元素=document.getElementById（“image2”）；
element.style.left=parseInt（element.style.left）-20+'px'；
}
函数rightP2（）{
document.getElementById（“image2”）.src=“/right.png”；
var元素=document.getElementById（“image2”）；
element.style.left=parseInt（element.style.left）+20+'px'；
}
函数upP2（）{
document.getElementById（“image2”）.src=“/up.png”；
var元素=document.getElementById（“image2”）；
element.style.top=parseInt（element.style.top）-20+'px'；
}
函数downP2（）{
document.getElementById（“image2”）.src=“/down.png”；
var元素=document.getElementById（“image2”）；
element.style.top=parseInt（element.style.top）+20+'px'；
}
函数移动选择（事件）{
开关（event.keyCode）{
案例65：
左箭头按下（）；
打破
案例68：
右箭头按下（）；
打破
案例87：
向上箭头按下（）；
打破
案例83：
向下箭头按下（）；
打破
案例32：
空格键（）；
打破
案例72：
leftP2（）；
打破
案例75：
右P2（）；
打破
案例85：
upP2（）；
打破
案例74：
downP2（）；
打破
}
}
函数gameLoop（）{
移动选择（）；
document.getElementById（“image1”）.style.visibility=“可见”；
setTimeout（“gameLoop（）”，0）；
}
身体{
背景色：#999999；
背景图像：url（“https://img.fotor.com/share/1484270966026uCF.jpg");
背景尺寸：75px 75px；
}
你好
在某些函数中，您似乎正在使用var
重新定义xcor
和ycor
。你应该只是在递增
在顶部，您有：
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

    }

那么你有：
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

    }

这是一个正确的增量。那么你有：
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

    }

你能举个例子吗