Question

我正在使用画布制作一个JavaScript游戏。当按下键盘（37）时，我想让角色（玩家）跳跃并着陆在下一个即将到来的日志上。因此，我尝试使数组在更新时包含日志的y位置，并且按下键盘时，播放器会以规则的顺序降落在日志中y的位置。

但是，这很奇怪。播放器没有降落在原木的计划y位置上，有时在跳跃时突然移至其他位置，并且在第一次按键盘时（第二次及之后，它跳得很好），玩家未跳到y位置。我真的不知道几天的原因...下面的代码有问题吗？我该如何解决这个问题？

这是一个github地址，其中包含与游戏有关的所有文件。 https://github.com/psh5487/lionTravel.git

其中，RS_PlayGame.js与跳跃和着陆直接相关。

RS_PlayGame.js

function PlayGameState()
{
    //player
    this.sprPlayer = new SpriteAnimation(resourcePreLoader.GetImage("/.c9/img/game_player.png"), 125, 167, 4, 4);
    this.x = 150;
    this.y = 200;

    this.Invalid();

    this.isJumpingUp = false;
    this.jumpPower = 0;

    //log
    this.imgShortlog1 = resourcePreLoader.GetImage("/.c9/img/game_shortlog.png");
    this.imgShortlog2 = resourcePreLoader.GetImage("/.c9/img/game_shortlog.png");
    this.imgShortlog3 = resourcePreLoader.GetImage("/.c9/img/game_shortlog.png");

    //moving logs
    this.posShortlog1 = 0+200;
    this.speedShortlog1 = 7;

    this.posShortlog2 = 315+200;
    this.speedShortlog2 = 7;

    this.posShortlog3 = 625+200;
    this.speedShortlog3 = 7;

    //default y position of log
    this.y_log_position_Arr = new Array(3);
    this.y_log_position_Arr[0] = 350;
    this.y_log_position_Arr[1] = 300;
    this.y_log_position_Arr[2] = 350;

    //player position after jumping
    this.afterjump_Arr = new Array();
    this.afterjump_Arr[0] = 350;
    this.afterjump_Arr[1] = 300;
    this.afterjump_Arr[2] = 350;

    this.i = 0;
}

PlayGameState.prototype.Render = function()
{
    var theCanvas = document.getElementById("GameCanvas");
    var Context = theCanvas.getContext("2d");

    //drawing log
    Context.drawImage(this.imgShortlog1, this.posShortlog1, this.y_log_position_Arr[0], 170, 32);
    Context.drawImage(this.imgShortlog2, this.posShortlog2, this.y_log_position_Arr[1], 170, 32);
    Context.drawImage(this.imgShortlog3, this.posShortlog3, this.y_log_position_Arr[2], 170, 32);

    //drawing player
    this.sprPlayer.Render(Context);
};

PlayGameState.prototype.Update = function()
{ 
    this.sprPlayer.Update();

    //moving log
    this.posShortlog1 -= this.speedShortlog1;
    this.posShortlog2 -= this.speedShortlog2;
    this.posShortlog3 -= this.speedShortlog3;

    if(this.posShortlog1 < -170)
    {
        this.posShortlog1 = 800;

        var y_position_values_ud = [350, 300, 250];
        var position_index_ud = getRandomInt(3);
        var y_log_position_ud = y_position_values_ud[position_index_ud];

        this.y_log_position_Arr[0] = y_log_position_ud;

        this.afterjump_Arr.push(this.y_log_position_Arr[0]);
    }

    if(this.posShortlog2 < -170)
    {
        this.posShortlog2 = 800;

        var y_position_values_ud = [350, 300, 250];
        var position_index_ud = getRandomInt(3);
        var y_log_position_ud = y_position_values_ud[position_index_ud];

        this.y_log_position_Arr[1] = y_log_position_ud;

        this.afterjump_Arr.push(this.y_log_position_Arr[1]);
    }

    if(this.posShortlog3 < -170)
    {
        this.posShortlog3 = 800;

        var y_position_values_ud = [350, 300, 250];
        var position_index_ud = getRandomInt(3);
        var y_log_position_ud = y_position_values_ud[position_index_ud];

        this.y_log_position_Arr[2] = y_log_position_ud;

        this.afterjump_Arr.push(this.y_log_position_Arr[2]);
    }

    //keyboard control
    if(this.isJumpingUp == false)
    {
        if(inputSystem.isKeyDown(37))
        {
            this.isJumpingUp = true;
            this.jumpPower = -17;
            this.i++;
        }
    }
    else
    {
        this.y += this.jumpPower;
        this.jumpPower += 1;

        if(this.y >= this.afterjump_Arr[this.i]-150)
        {
            this.y = this.afterjump_Arr[this.i]-150;

            this.isJumpingUp = false;
        }
        this.Invalid();
    }
};

PlayGameState.prototype.Invalid = function()
{
    this.sprPlayer.SetPosition(this.x, this.y);
};

//getting random number
function getRandomInt(num)
{
    return Math.floor(Math.random() * num);
}

Answer 1

我在GitHub上发布了您的游戏，并试图了解您在做什么。

代码不容易理解，您混合了面向对象和函数式编程，我删除了一些游戏元素并放慢了游戏速度，以显示一些有关玩家如何跳跃的调试信息，所以现在我从技术上讲，fork只是一个让玩家跳跃的动画： https://raw.githack.com/heldersepu/lionTravel/master/index.html

玩家未登陆日志的原因在于以下代码行：

    if(this.y >= this.afterjump_Arr[1]-150)
    {
        this.y = this.afterjump_Arr[1]-150;

        this.isJumpingUp = false;
    }

您不是将日志与固定变量进行比较，而是可以将播放器定位在右侧，以使它跳到正确的位置，但您将无法通过将播放器向左或向右移动来进行错觉。键，只要您让玩家水平移动，这种错觉就会显示出真正的问题。

我建议您再学习一些游戏开发课程，这样您才能更好地理解游戏元素之间的冲突。

javascript游戏：让玩家跳跃并着陆

1 个答案: