Question

我试图这样做，以便当我的'玩家'达到跳跃距离50时，它会下降，所以他会做一个小小的“跳跃”。

此时代码可能不完全“干净”，但我开始使用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)
}

<强> Demo 1

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

<强> Demo 2

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

1 个答案: