2014-10-23 5 views
-3

Привет, я довольно новичок в программировании, и это, вероятно, очень простой ответ, но я не знаю, как это исправить. Я делаю своего рода художественную программу, которую вы рисуете с помощью клавиш со стрелками, я также использую возвышенный текст 2 в качестве моего редактора.Переменная не определена JS

По словам разработчика. Консоль не определена, но она выглядит для меня определенной. В любом случае я искал ответ, но большинство вещей, которые я видел, были просто людьми, которые забыли определить переменную, иначе это не 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); 
<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> 
+0

* "... По словам разработчика. Console он не определен ..." * *** Что *** не определяется? –

+2

@PHPglue: Если вы говорите об операторе 'in', он преобразует свой левый операнд в строку. 'var o = {}; о [37] = "Foo"; 37 в o; // true' –

+1

Вы имеете в виду людей, которые просто забыли определить переменную, как вы забыли определить «mySprite» здесь? – myfunkyside

ответ

0

Я попробовал это на онлайн скрипку двигателя и что отсутствует ваша mySprite декларация.

Вам необходимо объявить спрайт по всему миру, как ваш объект keysDown. Поэтому я установил свой спрайт на var mySprite ={speed:10, y:0, x:0};

Вам нужно инициализировать x и y и скорость, или вы попытаетесь выполнить математику с неопределенными значениями, которые также будут устанавливать x и y в NaN (а не число).

This is the link to the JS fiddle.

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 
var mySprite ={speed:10, y:0, x:0}; 
 
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);
<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>

+0

Не проблема. Удачи! –

Смежные вопросы