Как изменить направление элемента на холсте?

Я пытался сделать так, чтобы, когда мой «Игрок» достиг прыгающего сопротивления 50, он падает, поэтому он делает небольшой «прыжок».Как изменить направление элемента на холсте?

Код может быть не совсем «чистым» на данном этапе, но я начинаю с Javascript.

Я заставил игрока прыгать, используя цикл for с задержкой. Я попытался заставить его пойти так же, но это не получилось так, как я планировал.

Fiddle demo

** Примечание: Нажмите пробел, чтобы начать!


 

 
    <!DOCTYPE html> 
 
    <html> 
 

 
    <style> 
 
    #canvas { 
 
    background-color: rgba(177, 177, 177, 1); 
 
    } 
 

 
    </style> 
 
    <body> 
 
    <div> 
 
    <p id="jumpDistance"></p> 
 
    <p id="jumpDirection"></p> 
 
    </div> 
 
    <canvas id="canvas" width="800" height="400"></canvas> 
 

 
    <script> 
 

 
    var canvas = document.querySelector('#canvas'); 
 
    var context = canvas.getContext('2d'); 
 

 

 
    var xPos = 150; 
 
    var yPos = 375; 
 
    var jumpDistance = 0; 
 
    function spelerObj() { 
 

 
     canvas.width=canvas.width; 
 
     context.rect(xPos, yPos, 25, 25); 
 
     context.stroke(); 
 
     context.fillStyle = "#FF0000"; 
 
     context.fillRect(xPos, yPos, 25, 25); 
 
    } 
 
    function jump(e) { //Here the player jumps, with a loop that calculates it's jump-distance. 
 
     //alert(e.keyCode); 
 
     if (e.keyCode == 32) {// 
 
      function upLoop() { 
 
       setTimeout(function() { 
 
        if(jumpDistance < 50) { 
 
         yPos -= 1; 
 
         jumpDistance++; 
 
         upLoop(); 
 
         spelerObj(); 
 
         document.getElementById("jumpDistance").innerHTML = jumpDistance.toString(); 
 

 

 
        } 
 
       }, 1) 
 
      } 
 

 

 
      upLoop(); 
 
      spelerObj(); 
 

 

 
     } 
 
    } 
 

 

 
    document.onkeydown = jump; 
 
</script> 
 

 
</body> 
 
</html>

источник

2017-02-15 Hendry

Я не вижу, где вы пытаетесь привести перемычку вниз. Кроме того, ваша функция перехода, вероятно, не должна находиться внутри оператора if. [Обновлена скрипка] (https://jsfiddle.net/gcmyur3o/2/) – isherwood

* Это не получилось так, как я планировал * Я не знаю, что это значит. Вероятно, вам нужна функция 'downLoop', которая отражает функцию' upLoop', но 'yPos + = 1;'. Вы также можете посмотреть ['requestAnimationFrame'] (https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame), если вы начнете видеть подергивание в анимации. –

Вы нуждались бы в downloop, что вы можете переключиться в верхней части прыжка:

function upLoop() { 
    setTimeout(function() { 
     if (jumpDistance < 50) { 
      yPos -= 1; 
      jumpDistance++; 
      upLoop(); 
     } else { 
      downLoop(); 
     } 

     spelerObj(); 
     document.getElementById("jumpDistance").innerHTML = jumpDistance.toString(); 
    }, 1) 
} 

function downLoop() { 
    setTimeout(function() { 
     if (jumpDistance > 0) { 
      yPos += 1; 
      jumpDistance--; 
      downLoop(); 
     } 

     spelerObj(); 
     document.getElementById("jumpDistance").innerHTML = jumpDistance.toString(); 
    }, 1) 
}

Demo 1

Вы также можете варьировать время ожидания, чтобы добавить эффект псевдогравитации.

Demo 2

источник

2017-02-15 22:22:20 isherwood

Спасибо большое, я новичок в Javascript и попытался сделать что-то простое для практических целей. Благодаря вашему демо 1, я получил его, но он все еще немного вигглый. Но мне удастся исходить отсюда! Большое спасибо! – Hendry

Как изменить направление элемента на холсте?

ответ

Смежные вопросы