初學JavaScript嘗試使用事件鍵

Question

我是新來的JavaScript，並試圖學習它非常快。我需要鍵盤事件鍵的幫助。我正在嘗試使用WASD在JavaScript中移動圖像。我可以讓它向上，向下，向左和向右移動，但我無法弄清楚如何讓它沿對角線移動。非常感謝幫助。

"use strict"; 

var cvs; 
var ctx; 
var imagex=100; 
var imagey=100; 

function keydown_callback(ev){ 
    if(ev.keyCode === 68) 
     imagex += 5; 
    if(ev.keyCode === 65) 
     imagex -= 5; 
    if(ev.keyCode === 87) 
     imagey -= 5; 
    if(ev.keyCode === 83) 
     imagey += 5; 
    draw(); 
} 

function draw(){ 
    ctx.clearRect(0,0,600,600); 
    var background = new Image(); 
    background.src="wallpaper.jpg"; 
    ctx.drawImage(background, 0, 0, 600, 600); 
    var img = new Image(); 
    img.src="ninja.png"; 
    ctx.drawImage(img,imagex,imagey,128,256); 
} 

function main(){ 
    var tmp = document.getElementsByTagName("body"); 
    var body = tmp[0]; 
    body.addEventListener("keydown",keydown_callback); 
    cvs = document.getElementById("foo"); 
    ctx = cvs.getContext("2d"); 
    draw(); 
} 

Answer 1

見http://jsfiddle.net/7xkD7/1/（點擊第一個結果單元格）

"use strict"; 
var cvs, 
    ctx, 
    imagex=100, 
    imagey=100, 
    mov={'x+':0,'x-':0,'y+':0,'y-':0}; 
function get(thing,key){ 
    for(var i in window[thing]){ 
     if(window[thing][i].indexOf(key)!==-1){return i;} 
    } 
    return false; 
} 
function changeMov(key,val){ 
    switch(key){ 
     case 68:case 39: 
      mov['x+']=val;break; 
     case 65:case 37: 
      mov['x-']=val;break; 
     case 87:case 38: 
      mov['y-']=val;break; 
     case 83:case 40: 
      mov['y+']=val;break; 
     default:return false; 
    } 
} 

function keydown_callback(ev){ 
    var key=ev.which||ev.keyCode; 
    if(changeMov(key,1)===false){return;} 
    draw(); 
    ev.preventDefault(); 
    return false; 
} 
function keyup_callback(ev){ 
    var key=ev.which||ev.keyCode; 
    if(changeMov(key,0)===false){return;} 
} 
function draw(){ 
    imagex+=5*(mov['x+']-mov['x-']); 
    imagey+=5*(mov['y+']-mov['y-']); 
    ctx.clearRect(0,0,600,600); 
    var background = new Image(); 
    background.src="http://images1.videolan.org/images/largeVLC.png"; 
    ctx.drawImage(background, 0, 0, 100, 100); 
    var img = new Image(); 
    img.src="http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png"; 
    ctx.drawImage(img,imagex,imagey,128,256); 
} 

function main(){ 
    var body = document.body; 
    body.addEventListener("keydown",keydown_callback); 
    body.addEventListener("keyup",keyup_callback); 
    cvs = document.getElementById("foo"); 
    ctx = cvs.getContext("2d"); 
    draw(); 
} 

Answer 2

爲了使斜走，你只需選擇要對角移動鍵碼，當鍵被按下同時更改x和y值。如果您將x和y值更改爲相同的數量，它將以45度角移動。

看到這個演示代碼的使用數字小鍵盤來移動圖像和/右與PgUp鍵鍵將其向上/左與Home鍵，向上等：

http://jsfiddle.net/jfriend00/TmbN5/

var cvs; 
var ctx; 
var imagex=0; 
var imagey=0; 
var img; 

function keydown_callback(ev){ 
    var keymap = { 
     '38': [0,-5], // up 
     '40': [0,5], // down 
     '37': [-5,0], // left 
     '39': [5,0], // right 
     '36': [-5,-5], // up/left diagonal 
     '34': [5,5], // down/right diagonal 
     '33': [5,-5], // up/right diagonal 
     '35': [-5,5]  // down/left diagonal 
    }; 
    var move = keymap[ev.keyCode]; 
    if (move) { 
     imagex += move[0]; 
     imagey += move[1]; 
    } 
    draw(); 
    ev.preventDefault(); 
} 

function draw(){ 
    ctx.clearRect(0,0,1000,1000); 
    ctx.drawImage(img,imagex,imagey); 
} 

function main(){ 
    img = new Image(); 
    img.src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg"; 
    document.body.addEventListener("keydown",keydown_callback); 
    cvs = document.getElementById("foo"); 
    ctx = cvs.getContext("2d"); 
    draw(); 
    // grab initial keyboard focus (in jsFiddle) 
    setTimeout(function() { 
     document.getElementById("setFocus").focus(); 
    }, 1000); 
} 

main();