JavaScriptの矢印キーを使用してキャンバス上の画像を移動する方法

Question

私はここで見てきたいくつかの異なる方法を試しましたが、画像を移動することができません。矢印キープレスのコードを変更しようとすると、キャンバスが縮まり、プレーヤーのモデル（スペーススペース）が消えるように見えるだけです。

ここで私は戻ってきて、私がこれまで持っているものは "描画ボード"です。

// Get the canvas and context 
var canvas = document.getElementById("space"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 1920; 
canvas.height = 700; 


// Create the image object 
var spaceperson = new Image(); 

// Add onload event handler 
spaceperson.onload = function() { 
    // Done loading, now we can use the image 
    ctx.drawImage(spaceperson, 280, 300); 
}; 


// artwork by Harrison Marley (using make8bitart.com) 
spaceperson.src = "http://i.imgur.com/Eh9Dpq2.png";` 

私はJavaScriptにはかなり新しく、矢印キーを使ってどのようにスペクタル画像を動かすことができるかを試しています。私はx、yの値にアクセスする宇宙人のクラスを作ろうとしていましたが、使用せずに画像を描画できないようです。

Answer 1

より完全な例：

//just a utility 
function image(url, callback){ 
    var img = new Image(); 
    if(typeof callback === "function"){ 
     img.onload = function(){ 
      //just to ensure that the callback is executed async 
      setTimeout(function(){ callback(img, url) }, 0) 
     } 
    } 
    img.src = url; 
    return img; 
} 

//a utility to keep a value constrained between a min and a max 
function clamp(v, min, max){ 
    return v > min? v < max? v: max: min; 
} 

//returns a function that can be called with a keyCode or one of the known aliases 
//and returns true||false wether the button is down 
var isKeyDown = (function(aliases){ 
    for(var i=256, keyDown=Array(i); i--;)keyDown[i]=false; 
    var handler = function(e){ 
     keyDown[e.keyCode] = e.type === "keydown"; 
     e.preventDefault(); //scrolling; if you have to suppress it 
    }; 

    addEventListener("keydown", handler, false); 
    addEventListener("keyup", handler, false); 

    return function(key){ 
     return(true === keyDown[ key in aliases? aliases[ key ]: key ]) 
    } 
})({ 
    //some aliases, to be extended 
    up: 38, 
    down: 40, 
    left: 37, 
    right: 39 
}); 



// Get the canvas and context 
var canvas = document.getElementById("space"); 
canvas.width = 1920; 
canvas.height = 700; 
var ctx = canvas.getContext("2d"); 

//the acutal image is just a little-part of what defines your figue 
var spaceperson = { 
    image: image("//i.imgur.com/Eh9Dpq2.png", function(img){ 
     spaceperson.width = img.naturalWidth; 
     spaceperson.height = img.naturalHeight; 

     //start the rendering by calling update 
     update(); 
    }), 

    //position 
    x: 60, y: 310, 
    width: 0, height: 0, 

    speed: 200 // 200px/s 
}; 

var lastCall = 0; //to calculate the (real) time between two update-calls 
//the render-fucntion 
function update(){ 
    //taking account for (sometimes changing) framerates 
    var now = Date.now(), time = lastCall|0 && (now-lastCall)/1000; 
    lastCall = now; 
    requestAnimationFrame(update); 

    var sp = spaceperson, 
     speed = sp.speed; 

    //checking the pressed buttons and calculates the direction 
    //two opposite buttons cancel out each other, like left and right 
    var dx = (isKeyDown('right') - isKeyDown('left')) * time, 
     dy = (isKeyDown('down') - isKeyDown('up')) * time; 

    //fix the speed for diagonals 
    if(dx && dy) speed *= 0.7071067811865475; // * 1/Math.sqrt(2) 

    if(dx) { //there is some movement on the x-axes 
     sp.x = clamp(
      //calculate the new x-Position 
      //currentPos + direction * speed 
      sp.x + dx * sp.speed, 

      //restraining the result to the bounds of the map 
      0, canvas.width - sp.width 
     ); 
    } 

    //same for y 
    if(dy) sp.y = clamp(sp.y + dy * sp.speed, 0, canvas.height - sp.height); 

    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(sp.image, sp.x, sp.y); 
} 

編集：

簡単な質問（私は願っています）。後で他のオブジェクトを追加するのであれば、update（）の衝突をチェックするのでしょうか？

これは単なる非常に基本的な例です。 update()関数の主な目的は、メインのイベントループとして機能することです。 各フレームで発生する必要のあるすべてのイベントを発生させる順序でトリガーする。

var lastCall = 0; 
function update(){ 
    //I always want a next frame 
    requestAnimationFrame(update); 

    //handle timing 
    var now = Date.now(), 
     //time since the last call in seconds 
     //cause usually it's easier for us to think in 
     //tems like 50px/s than 0.05px/ms or 0.8333px/frame 
     time = lastCall|0 && (now-lastCall)/1000; 

    lastCall = now; 

    movePlayer(time); 
    moveEnemies(time); 
    moveBullets(time); 

    collisionDetection(); 

    render(); 
} 

function render(){ 
    ctx.clear(0, 0, canvas.width, canvas.height); 
    drawBackground(ctx); 
    for(var i=0; i<enemies.length; ++i) 
     enemies[i].render(ctx); 
    player.render(ctx); 
} 

これらの機能をすべて実装する必要がありますが、可能な構造を知る必要はありません。 大きなタスクを壊すのを怖がらないでください（機能）をサブタスクにします。
そして、各敵にmove() -functionを与えることは意味がありますので、敵ごとに異なる動きパターン、 を実装することができます。または、敵ごとにパターンが同じであり、それをループで処理できます。
レンダリングと同じことですが、コードの最後の部分に表示されています。

Answer 2

私は解決策を見つけました。

// Get the canvas and context 
var canvas = document.getElementById("space"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 1920; 
canvas.height = 700; 
var xPos = 60; 
var yPos = 310; 

// Create the image object 
var spaceperson = new Image(); 

// Add onload event handler 
spaceperson.onload = function() { 
// Done loading, now we can use the image 
ctx.drawImage(spaceperson, xPos, yPos); 
}; 

function move(e){ 

if(e.keyCode==39){ 
    xPos+=10; 
} 
if(e.keyCode==37){ 
    xPos-=10; 
} 
if(e.keyCode==38){ 
    yPos-=10; 
} 
if(e.keyCode==40){ 
    yPos+=10; 
} 

canvas.width=canvas.width; 
ctx.drawImage(spaceperson, xPos, yPos); 

} 

document.onkeydown = move; 

// artwork by Harrison Marley 
spaceperson.src = "http://i.imgur.com/Eh9Dpq2.png"; 

Answer 3

私はしばらく前に周りを回っていたゲームから少し修正されたコードです。より多くのコードを表示したい場合はcomplete JS on GitHubをご覧ください。ゲームは不完全ですが、キャンバスの周りにイメージを移動する方法についての有用な手がかりを集めるべきです。

var spaceperson = { 
     speed: 256, 
     other_stuff: '' 
    }, 
    keysDown = [], 
    update, 
    main; 

addEventListener("keydown", function (e) { 
    keysDown[e.keyCode] = true; 
}, false); 

update = function (modifier) { 
    if (38 in keysDown && spaceperson.y > 0) { // UP 
    spaceperson.y -= spaceperson.speed * modifier; 
    } 
    if (40 in keysDown && spaceperson.y < CANVAS_HEIGHT - SPACEPERSON_HEIGHT) { // DOWN 
    spaceperson.y += spaceperson.speed * modifier; 
    } 
    if (37 in keysDown && spaceperson.x > 0) { // LEFT 
    spaceperson.x -= spaceperson.speed * modifier; 
    } 
    if (39 in keysDown && spaceperson.x < CANVAS_WIDTH - SPACEPERSON_WIDTH) { // RIGHT 
    spaceperson.x += spaceperson.speed * modifier; 
    } 
} 

Answer 4

私はこれが助けることができると思います。ここ

// Get the canvas and context 
 
var canvas = document.getElementById("space"); 
 
var ctx = canvas.getContext("2d"); 
 
canvas.width = 1920; 
 
canvas.height = 700; 
 
var x = 280; 
 
var y = 300; 
 

 
// Create the image object 
 
var spaceperson = new Image(); 
 

 
spaceperson.addEventListener("keypress", press); 
 

 
// Add onload event handler 
 
spaceperson.onload = function() { 
 
    // Done loading, now we can use the image 
 
    ctx.drawImage(spaceperson, x, y); 
 
}; 
 

 
function press(event) { 
 
    if(event.keyCode == 37) {//LEFT 
 
    x = x - 1; 
 
    } else if(event.keyCode == 38) {//UP 
 
    y = y - 1; 
 
    } else if(event.keyCode ==39) {//RIGHT 
 
    x = x + 1; 
 
    } else if(event.keyCode == 40) {//DOWN 
 
    y = y + 1; 
 
    } 
 
    draw(); 
 
} 
 

 
function draw(){ 
 
    ctx.drawImage(spaceperson,x,y); 
 
} 
 

 

 

 
// artwork by Harrison Marley (using make8bitart.com) 
 
spaceperson.src = "http://i.imgur.com/Eh9Dpq2.png";