如何在 canvas 上使用 javascript 中的箭头键移动图像

Question

我已经尝试了几种我在此处看到的不同方法，但我无法完全移动我的图像。每当我尝试调整箭头键按下的代码时，它似乎只会让我的 canvas 缩小并且我的玩家模型（space 人）消失。

这里是 "drawing board" 我经常回到的地方，以及到目前为止我所拥有的。

// 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 的新手，我只是想弄清楚如何使用箭头键移动 specperson 图像。我试图为 space 人制作一个 class 来访问他们的 x,y 值，但我似乎无法在不使用 .onload

的情况下绘制图像

Answer 1

我找到了解决办法！

// 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 2

这是我前一段时间闲逛的游戏中的一些稍微修改过的代码。如果您想查看更多代码，请查看 complete JS on GitHub。游戏不完整，但您应该收集一些有用的线索，了解如何在 canvas.

周围移动图像

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 3

我不确定，但我认为这会有所帮助。

// 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";

Answer 4

这里有一个更完整的例子：

//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);
}

编辑：

A quick question (I hope); if I was to later add other objects, would I check for collisions in 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() 函数可能是有意义的，这样你就可以为每个敌人实现不同的移动模式，或者你说每个敌人的模式是（并且将是）完全相同的，最好参数化，然后你可以在循环中处理它。
渲染也是如此，正如我在代码的最后一部分中展示的那样。

如何在 canvas 上使用 javascript 中的箭头键移动图像

How to move image on canvas using arrow keys in javascript

html

javascript

canvas

image

keypress