перемещение прямоугольника внутри холста

Question

моего кода:

$(document).ready(function() { 

    var canvas, 
    ctx, 
    playerimage, 
    x, 
    y, 
    speed = 5, //speed for the player to move at 
    width = 10, //width of the player 
    height = 10; //height of the player 

    function init() { 
     canvas = $("#Mycanvas"); 
     ctx = canvas[0].getContext('2d'); 
     x = canvas.width()/2; 
     y = canvas.height()/2; 

     playerimage = new Image(); 
     playerimage.src = "ninja.png"; //path to the image to use for the player 
     window.addEventListener("keydown", update, false); 
     //canvas.addEventListener("keypress", update); 
     render(); 
    } 

    $(window).load(function() { init(); }); 

    function update(event) { 
     if (event.keyCode == 38) { 
      y -= speed; //going up 
     } 
     if (event.keyCode == 40) { 
      y += speed; //going down 
     } 
     if (event.keyCode == 37) { 
      x -= speed; //going left 
     } 
     if (event.keyCode == 39) { 
      x += speed; //going right 
     } 
     render(); 
    } 

    function render() { 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.fillRect(x, y, width, height); 


    } 
}); 

моего jsfiddle: http://jsfiddle.net/BLpGH/14/

, как вы можете видеть, что прямоугольник не двигается вместо этого, похоже, рисования Stead линии перемещения Я не Не хочу, чтобы он рисовал линию, как я могу это сделать?

Answer 1

Рабочая версия под, и demo here.

Я переместил clearRect на функцию обновления, чтобы он работал до изменения значений. Я также добавил if условий, поэтому img не выйдет из canvas.

function update(event) { 
     if (x + 20 > canvas.width() && event.keyCode == 39) { 
      ctx.clearRect(x, y, width, height); 
      x = canvas.width() - 15; 
      render(); 
      return false; 
     } 
     if (x - 10 < 0 && event.keyCode == 37) { 
      ctx.clearRect(x, y, width, height); 
      x = 5; 
      render(); 
      return false; 
     } 

     if (y - 10 < 0 && event.keyCode == 38) { 
      ctx.clearRect(x, y, width, height); 
      y = 5; 
      render(); 
      return false; 
     } 
     if (y + 20 > canvas.height() && event.keyCode == 40) { 
      ctx.clearRect(x, y, width, height); 
      y = canvas.height() - 15; 
      render(); 
      return false; 
     } 

     ctx.clearRect(x, y, width, height); 
     if (event.keyCode == 38) { 
      y -= speed; //going up 
     } 
     if (event.keyCode == 40) { 
      y += speed; //going down 
     } 
     if (event.keyCode == 37) { 
      x -= speed; //going left 
     } 
     if (event.keyCode == 39) { 
      x += speed; //going right 
     } 
     render(); 
    } 

    function render() { 
     ctx.fillRect(x, y, width, height); 
    } 

Я использую x + 20, потому что вы определили квадрат (ширина = 10, // ширина игрока). Поэтому, если вы находитесь рядом с концом холста, я хотел бы гарантировать, что это ширина холста, но потому, что x определил левый пиксель изображения квадрата/игрока, я добавил 2x 10. В противоположном направлении это не обязательно, поэтому достаточно ширины 1x. То же самое с y.

Answer 2

canvas.width и canvas.height - это функции. Храните их как вары или позвоните canvas.width() и canvas.height()

Answer 3

Измените эту строку:

ctx.clearRect(0, 0, canvas.width, canvas.height); 

... к этому:

ctx.clearRect(0, 0, canvas.width(), canvas.height()); 

Демо: http://jsfiddle.net/BLpGH/15/

То есть, позвонить .width и .height как функции. Хотя было бы более эффективно хранить эти значения в переменных, а не иметь два вызова метода каждый раз, когда вы перерисовываете.

Answer 4

Вы не очищаете холст правильно. Переменная canvas является объектом jQuery, а ширина и высота - это вызовы функций, а не свойства. Изменить эту строку

ctx.clearRect(0, 0, canvas.width(), canvas.height());