Перетаскивание символов холста HTML5

Question

Я пытаюсь сделать анимацию персонажа, прочитав этот учебник: http://mrbool.com/html5-canvas-moving-a-character-with-sprites/26239. Очень легко заставить персонажа уйти влево («идти вправо» уже сделано). Но как заставить персонажа прыгать (с анимацией)? Я думал о чем-то вроде этого:

case 38: 
     if (y + dy > HEIGHT){ 
      y += dy 
     } 

    break; 

... но это просто переместить характер вверх (без анимации). Кто-нибудь может мне помочь? Некоторый пример кода будет полезен.

Answer 1

Вы поведение прыжков, как это (используя один и тот же код на уроке)

JSFiddle

var canvas;// the canvas element which will draw on 
var ctx;// the "context" of the canvas that will be used (2D or 3D) 
var dx = 50;// the rate of change (speed) horizontal object 
var x = 30;// horizontal position of the object (with initial value) 
var y = 150;// vertical position of the object (with initial value) 
var limit = 10; //jump limit 
var jump_y = y; 
var WIDTH = 1000;// width of the rectangular area 
var HEIGHT = 340;// height of the rectangular area 
var tile1 = new Image();// Image to be loaded and drawn on canvas 
var posicao = 0;// display the current position of the character 
var NUM_POSICOES = 6;// Number of images that make up the movement 
var goingDown = false; 
var jumping; 

function KeyDown(evt){ 
    switch (evt.keyCode) { 
     case 39: /* Arrow to the right */ 
      if (x + dx < WIDTH){ 
       x += dx; 
       posicao++; 
       if(posicao == NUM_POSICOES) 
        posicao = 1; 

       Update(); 
      } 
      break;  
     case 38: 
      jumping = setInterval(Jump, 100); 
    } 
} 

function Draw() {  
    ctx.font="20px Georgia"; 
    ctx.beginPath(); 
    ctx.fillStyle = "red"; 
    ctx.beginPath(); 
    ctx.rect(x, y, 10, 10); 
    ctx.closePath(); 
    ctx.fill(); 
    console.log(posicao); 
} 
function LimparTela() { 
    ctx.fillStyle = "rgb(233,233,233)"; 
    ctx.beginPath(); 
    ctx.rect(0, 0, WIDTH, HEIGHT); 
    ctx.closePath(); 
    ctx.fill(); 
} 
function Update() { 
    LimparTela();  
    Draw(); 
} 

var Jump = function(){ 
    if(y > limit && !goingDown){ 
     y-=10; 
     console.log('jumping: ' + y); 
    } else{ 
    goingDown = true; 
     y +=10; 
     if(y > jump_y){ 
      clearInterval(jumping); 
      goingDown = false; 
     } 

    } 
} 

function Start() { 
    canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d"); 
    return setInterval(Update, 100); 
} 

window.addEventListener('keydown', KeyDown); 
Start(); 

Answer 2

Нет ни одного правильного ответа на этот вопрос, и если вы не найдете библиотеку игрового дизайна, то тоже нет простого. Ваша проблема в том, что вы перемещаете персонажа мгновенно в ответ на ввод, но скачок требует движения со временем. Вам придется либо найти движущуюся библиотеку спрайтов - у меня нет, в частности, рекомендации, но я уверен, что у Google есть несколько - или настройте что-то самостоятельно, которое запускается каждые миллисекунды и обновляет позицию персонажа, а некоторые вид переменной скорости.

Редактировать: Глядя на этот учебник, самое простое решение, которое приходит на ум, это поместить ваш код анимации внутри Update(), например, так:

function Update() { 
    LimparTela(); 
    Animate(); 
    Draw(); 
} 

Внутри Animate(), вы должны следить за высоты персонажа и вертикальный импульс. Если импульс положительный, немного увеличьте y-позицию, иначе уменьшите ее немного. В любом случае, немного уменьшите количество оборотов. Добавьте что-то, чтобы персонаж не проходил через пол, и чтобы ключ вверх установил импульс персонажа, чтобы он был положительным, если он на полу.

Обратите внимание, что это невероятно голое решение, но для базового учебного пособия он выполнит эту работу.