如何反转画布上元素的方向？

Question

我试图做到这一点，以便当我的“玩家”达到50的jumpDistance时，它会掉下来，所以他做了一个小的“跳转”。

此时代码可能并不完全“干净”，但是我正在开始使用Javascript。

我通过使用for循环延迟使播放器跳转。 我试图以同样的方式使他失望，但这并没有按照我的计划进行。

**注意：按空格开始！

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

Answer 1

您需要一个下循环，可以在跳转的顶部切换到该下循环：

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)
}

演示1

您还可以更改超时时间，以添加伪重力效果。

演示2

如何反转画布上元素的方向？

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-02-15 22:22:20

如何反转画布上元素的方向？

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-02-15 22:22:20

解决方案1
2 已采纳 2017-02-15 22:22:20