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에 여러 가지가 있다고 확신합니다. 또는 수 밀리 초마다 실행되며 캐릭터의 위치와 일부를 업데이트하는 무언가를 직접 설정해야합니다. 일종의 속도 변수.

편집 :

Animate()의 내부

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

, 당신은 캐릭터의 높이를 추적해야하는 튜토리얼, 마음과 같이, Update()의 내부에 애니메이션 코드를 삽입하는 것입니다에 오는 가장 간단한 솔루션을 찾고 수직 운동량. 운동량이 양수이면 y 위치를 조금 올리십시오. 그렇지 않으면 조금 줄이십시오. 어느 쪽이든, 기세를 조금 줄이십시오. 캐릭터가 바닥을 통과하지 못하도록 무언가를 추가하고, 업 키로 캐릭터의 추진력을 설정하여 바닥에있는 경우 긍정적으로 유지하십시오.

이 솔루션은 믿을 수 없을 정도로 베어 본 솔루션이지만 기본 자습서에서는 작업을 수행합니다.