Fatal编程技术网

Javascript 变量未定义为JS

javascript html google-chrome variables

Javascript 变量未定义为JS,javascript,html,google-chrome,variables,var,Javascript,Html,Google Chrome,Variables,Var,嗨，我对编程很陌生，这可能是一个很容易回答的问题，但我不知道如何解决它。我正在制作一种用箭头键绘制的艺术程序，我也在使用sublime text 2作为我的编辑器 根据开发控制台，它没有定义，但在我看来它是定义的。不管怎样，我一直在寻找答案，但我看到的大多数情况都是人们忘记定义变量，否则就不是JS、HTML了 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var keysDo

嗨，我对编程很陌生，这可能是一个很容易回答的问题，但我不知道如何解决它。我正在制作一种用箭头键绘制的艺术程序，我也在使用sublime text 2作为我的编辑器

根据开发控制台，它没有定义，但在我看来它是定义的。不管怎样，我一直在寻找答案，但我看到的大多数情况都是人们忘记定义变量，否则就不是JS、HTML了

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var keysDown = {};
window.addEventListener('keydown', function(e) {
    keysDown[e.keyCode] = true;
});
window.addEventListener('keyup', function(e) {
    delete keysDown[e.keyCode];
});

function update(mod) {
    if (37 in keysDown) {
        mySprite.x -= mySprite.speed * mod;
    }
    if (38 in keysDown) {
        mySprite.y -= mySprite.speed * mod;
    }
    if (39 in keysDown) {
        mySprite.x += mySprite.speed * mod;
    }
    if (40 in keysDown) {
        mySprite.y += mySprite.speed * mod;
    }
}

function render() {
var img = document.getElementById("super");
ctx.drawImage(img,mySprite.x,mySprite.y);
}
function run() {
    update((Date.now() - time) / 1000);
    render();
    time = Date.now();
}

var time = Date.now();
setInterval(run, 10);


用PNG绘制
我在在线小提琴引擎上尝试了这个，但缺少的是你的
mySprite
声明

您需要像
keysDown
对象一样全局声明精灵。所以我将我的精灵设置为
var mySprite={speed:10，y:0，x:0}

您需要初始化x和y以及速度，否则您将尝试使用未定义的值进行计算，这也会将x和y设置为NaN（不是数字）





var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var mySprite={speed:10，y:0，x:0}；
var keysDown={}；
window.addEventListener（'keydown'，函数（e）{
keysDown[e.keyCode]=真；
});
window.addEventListener（'keyup'，函数（e）{
删除keysDown[e.keyCode]；
});
功能更新（mod）{
如果（37英寸向下）{
mySprite.x-=mySprite.speed*mod；
}
如果（38英寸向下）{
mySprite.y-=mySprite.speed*mod；
}
如果（39英寸向下）{
mySprite.x+=mySprite.speed*mod；
}
如果（40英寸向下）{
mySprite.y+=mySprite.speed*mod；
}
}
函数render（）{
var img=document.getElementById（“超级”）；
ctx.drawImage（img，mySprite.x，mySprite.y）；
}
函数运行（）{
更新（（Date.now（）-time）/1000）；
render（）；
时间=日期。现在（）；
}
var time=Date.now（）；
设置间隔（运行，10）


用PNG绘制

“…根据开发控制台，它没有定义…”什么没有定义？@PHPglue:如果您正在谈论
运算符中的
，它会将其左操作数转换为字符串<代码>变量o={}；o[37]=“foo”；37英寸o；//真的
你是说那些忘记定义变量的人，就像你忘了在这里定义
mySprite
一样？@Harry：如果你说的是
mySprite
，我肯定看不到它在任何地方定义过。每个变量都必须有var吗？我以前定义过没有var的变量，我也尝试过在这些变量中加入var，但是没有用？我还试图在画布上添加边框。我该如何解决这个问题？抱歉，如果这是一个非常愚蠢的问题，那不是问题。祝你好运！

<html>
    <head>
        <title>Draw With PNGS</title>
    </head>
    <body>
        <canvas id="canvas" height="400" width="800" ></canvas>
        <img id="super" src="superman.png" alt="superman" width="20" height="20">
        <script type="text/javascript" src="main.js"></script>
            </body>
</html>