キャンバス上の要素の向きを逆にするにはどうすればいいですか？

私は私の「プレーヤー」は50のjumpDistanceに達したときに、それが倒れたので、彼は小さな「ジャンプ」を作るようにそれを作ってみました。キャンバス上の要素の向きを逆にするにはどうすればいいですか？

コードは、この時点で正確に「クリーン」ではないかもしれませんが、私はJavaScriptで始めますよ。

私は遅れてforループを使って、プレイヤーのジャンプを行いました。私は彼を同じように下ろそうとしましたが、これは私が計画した方法ではうまくいかなかったのです。

** NOTE：スペースキーを押し開始します！


 

 
    <!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

*これは私が計画した方法ではうまくいかなかった*その意味がわからない。おそらく 'upLoop'機能を反映しますが、' YPOS + = 1を行い 'downLoop'機能をしたいと思います;'。また、アニメーションでジャーキネスが見え始める場合は、['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

キャンバス上の要素の向きを逆にするにはどうすればいいですか？

答えて

関連する問題