Question

我正在尝试制作2D平台游戏，但我缺少重力的重要组成部分。

我已经尝试了一切，从查看本网站上的问题到查看在线教程和您的视频。

由于我没有想法，我真的需要帮助让重力进入游戏。

正如我所说，我已经尝试查看了多个教程和视频，包括以下内容：

http://www.somethinghitme.com/2013/01/09/creating-a-canvas-platformer-tutorial-part-one/

但这是使用在画布中创建的形状而不是图像。

我已经知道您必须使用速度函数以及重力变量。然后，您必须将其全部放入密钥处理程序函数中，以便可以执行它。

            //spaceman variables
            var sx = canvasWidth / 2; // start the spaceman in the centre
            var sy = canvasHeight / 2;
            var sdx = 0; // set initial speed to 0
            var sdy = 0;
            var sspeed = 3; // create a variable for speed
            var gravity = 0.2;
            var svX = 0;
            var svY = (Math.random() * -10) - 5;

            //set variables to use for key presses
            //these are Boolean variables
            //they can only be true or false
            var rightPressed = false;
            var leftPressed = false;
            var upPressed = false;
            var downPressed = false;

            function keyDownHandler(e) {
                if (e.keyCode == 39) {
                    rightPressed = true;
                } else if (e.keyCode == 37) {
                    spaceman2Ready = true;
                    spacemanReady = false;
                    leftPressed = true;
                } else if (e.keyCode == 38) {
                    upPressed = true;
                } else if (e.keyCode == 40) {
                    downPressed = true;
                }
            }

            function keyUpHandler(e) {
                if (e.keyCode == 39) {
                    rightPressed = false;
                    sdx--;
                } else if (e.keyCode == 37) {
                    spaceman2Ready = false;
                    spacemanReady = true;
                    leftPressed = false;
                    sdx--;
                } else if (e.keyCode == 38) {
                    upPressed = false;
                    sdx--;
                } else if (e.keyCode == 40) {
                    downPressed = false;
                    sdx--;
                }
            }

            // add something to "listen" for an event
            //an event is keypress, mouse movement, mouse click etc.
            document.addEventListener("keydown", keyDownHandler, false);
            document.addEventListener("keyup", keyUpHandler, false);



            function draw() {

                ctx.clearRect(0, 0, canvas.width, canvas.height);


                if (rightPressed == true) {
                    sdx = sspeed;
                } else if (leftPressed == true) {
                    sdx = -sspeed;
                } else if (upPressed == true) {
                    sdy = -sspeed;
                } else if (downPressed == true) {
                    sdy = sspeed
                }

                if (rightPressed == false && leftPressed == false && upPressed == false && downPressed == false) {
                    sdx = 0;
                    sdy = 0;
                }

                sx = sx + sdx;
                sy = sy + sdy;

                }
                if (spacemanReady) {
                    ctx.drawImage(spacemanImage, sx, sy);

                if (spaceman2Ready) {
                    ctx.drawImage(spaceman2Image, sx, sy);
                }

                // basically the setTimeout part, but this time its requesting the function that we made at the top
                requestAnimationFrame(draw);

            }

            // this is to get the loop for the animation to start going
            window.addEventListener("load",
            function() {
                draw();
            });

            < /script>

            </body >

            </html>/

Answer 1

您应该使用重力来更新每帧的位置（在绘图功能中）。看起来像：

if(sy > 0){
    sdy += gravity
}

我已经用您的重力游戏创建了一个codepen。我希望这会有所帮助！

麻烦增加2D平台游戏的重力

1 个答案: