Question

可能是我关于这个主题的第三或第四篇文章，感谢迄今为止的帮助。

我在javascript中有一个小平台游戏项目，用户可以控制一个可以左右运行的立方体，可以跳跃和（随后）掉落。

我遇到的问题是，当我按下跳跃按钮时，我的角色跳跃，达到最大高度，然后跌落（这是所需的）但是如果跳跃按钮继续按下，则角色然后再次“跳跃”并且是陷入一个跳跃/下降的无限循环，它具有立方体在半空中摇晃的视觉效果。

虽然可爱又搞笑，但这并不令人满意。有些人可以帮我解决一些禁用跳跃布尔值的代码，同时按下按键，然后一旦释放按键，重新启用它，然后再按下按键。代码如下，谢谢。

<!DOCTYPE html>

<head>

<meta charset="utf-8" />

    <title>Platformer!</title>

    <style>
     * {
        padding: 0;
        margin: 0;
    }
    canvas {
        background: "#eee"; 
        display: block;
        margin: 0 auto;
        border: 2px solid black;
    }        
    </style>

</head>

<body>

    <canvas id="gameCanvas" width="640" height="560"></canvas>

    <script>

        var canvas = document.getElementById("gameCanvas");

        var ctx = canvas.getContext("2d");

        var coinRad = 8;
        var coinX = 40;
        var coinY = 80;

        var x = 20;
        var y = 510;
        var w = 30;
        var h = 50;

        var rightPressed = false;
        var leftPressed = false;

        var ducked = false;
        var jumping = false;

        var falling = false;

        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

        function keyDownHandler(e) {
            if(e.keyCode == 39) {
            rightPressed = true;
        }
        else if(e.keyCode == 37) {
            leftPressed = true;
        }
        else if(e.keyCode == 40) {
            ducked = true;
            }
        else if(e.keyCode == 32) {
            jumping = true;
        }
        }


        function keyUpHandler(e) {
            if(e.keyCode == 39) {
            rightPressed = false;
        }
        else if(e.keyCode == 37) {
            leftPressed = false;
            }
        else if(e.keyCode == 40) {
            ducked = false;
            }
        else if(e.keyCode == 32) {
            jumping = false;
            falling = true;
        }
        }

        function drawCube() {
            ctx.beginPath();
            ctx.rect(x,y,w,h);
            ctx.fillStyle = "Green";
            ctx.fill();
            ctx.closePath();
            }

        function run() {
            ctx.clearRect(0,0,canvas.width,canvas.height);

             if (jumping) {
                if (y > canvas.height/3) {
                    y -= 20;
                }
                 if (y <= canvas.height/3) {
                     jumping = false;
                     falling = true;
                 }
                }
            else if (falling) {
                if (y < 510) {
                    y += 40;
                }
                if (y >= 510) {
                    y = 510;
                    falling = false;
                }
            }
            if (leftPressed) {
                if (x > 0) {
                    x -= 2.5;
                }
            }
            else if (rightPressed) {
                if (x < canvas.width-w) {
                    x += 2.5;
                }
            }
            drawCube();
        }

        setInterval(run, 10);

    </script>
</body>

Answer 1

我希望这有帮助：

<canvas id="gameCanvas" width="640" height="560"></canvas>

<script>

    var canvas = document.getElementById("gameCanvas");

    var ctx = canvas.getContext("2d");

    var coinRad = 8;
    var coinX = 40;
    var coinY = 80;

    var x = 20;
    var y = 510;
    var w = 30;
    var h = 50;

    var rightPressed = false;
    var leftPressed = false;

    var ducked = false;
    var jumping = false;

    var falling = false;

    var down = true;

    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

    function keyDownHandler(e) {
        if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
    else if(e.keyCode == 40) {
        ducked = true;
        }
    else if(e.keyCode == 32) {
    if (down) {
        jumping = true;
        down = false;
    }

    }
    }


    function keyUpHandler(e) {
        if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
        }
    else if(e.keyCode == 40) {
        ducked = false;
        }
    else if(e.keyCode == 32) {
        jumping = false;
        falling = true;
    }
    }

    function drawCube() {
        ctx.beginPath();
        ctx.rect(x,y,w,h);
        ctx.fillStyle = "Green";
        ctx.fill();
        ctx.closePath();
        }

    function run() {
        ctx.clearRect(0,0,canvas.width,canvas.height);

         if (jumping) {
            if (y > canvas.height/3) {
                y -= 20;
            }
             if (y <= canvas.height/3) {
                 jumping = false;
                 falling = true;
             }
            }
        else if (falling) {

            if (y < 510) {
                y += 40;
            }
            if (y >= 510) {
                y = 510;
                falling = false;
                down = true;
            }
        }
        if (leftPressed) {
            if (x > 0) {
                x -= 2.5;
            }
        }
        else if (rightPressed) {
            if (x < canvas.width-w) {
                x += 2.5;
            }
        }
        drawCube();
    }

    setInterval(run, 10);

</script>

https://jsfiddle.net/hg788rj7/

字符跳转脚本javascript平台游戏

1 个答案: