Question

我目前正在开发一个Javascript游戏（几乎所有内容都基于教程，所以我不担心共享代码）。

问题是，按空格键后我无法跳转角色。请问，有人可以查看代码并帮助我吗？

//编辑：很抱歉我提供的信息不足。问题是 - 代码被写入，游戏处于状态，角色被动画化（=正在运行）并且背景正在移动。昨天，我尝试实现一些基本控件，例如按空格键跳转。问题是，玩家根本没有跳过，浏览器控制台也没有给我任何错误陈述。

字符在第5行和第311行中定义为播放器。

跳跃在以下示例中定义：

按空格按钮

    var KEY_CODES = {
    32: 'space'
  };
  var KEY_STATUS = {};
  for (var code in KEY_CODES) {
    if (KEY_CODES.hasOwnProperty(code)) {
       KEY_STATUS[KEY_CODES[code]] = false;
    }
  }
  document.onkeydown = function(e) {
    var keyCode = (e.keyCode) ? e.keyCode : e.charCode;
    if (KEY_CODES[keyCode]) {
      e.preventDefault();
      KEY_STATUS[KEY_CODES[keyCode]] = true;
    }
  };
  document.onkeyup = function(e) {
    var keyCode = (e.keyCode) ? e.keyCode : e.charCode;
    if (KEY_CODES[keyCode]) {
      e.preventDefault();
      KEY_STATUS[KEY_CODES[keyCode]] = false;
    }
  };

其他跳转信息（请阅读代码中的注释）

this.update = function() {

      // jump, if the characted is NOT currently jumping or falling
      if (KEY_STATUS.space && this.dy === 0 && !this.isJumping) {
        this.isJumping = true;
        this.dy = this.jumpDy;
        jumpCounter = 12;
        assetLoader.sounds.jump.play();
      }

      // longer jump if the space bar is pressed down longer
      if (KEY_STATUS.space && jumpCounter) {
        this.dy = this.jumpDy;
      }

      jumpCounter = Math.max(jumpCounter-1, 0);

      this.advance();

      // gravity
      if (this.isFalling || this.isJumping) {
        this.dy += this.gravity;
      }

      // change animation is-falling
      if (this.dy > 0) {
        this.anim = this.fallAnim;
      }
      // change animation is-jumping
      else if (this.dy < 0) {
        this.anim = this.jumpAnim;
      }
      else {
        this.anim = this.walkAnim;
      }

      this.anim.update();
    };

       /**
     * Update the Sprite's position by the player's speed
     */
    this.update = function() {
      this.dx = -player.speed;
      this.advance();
    };
    /**
     * Draw the current player's frame
     */
    this.draw = function() {
      this.anim.draw(this.x, this.y);
    };
  }
  Player.prototype = Object.create(Vector.prototype);

对我来说一切似乎都很好，但是玩家只是不动了。：（

任何帮助？

如果您对完整代码感到好奇，请转到此处：http://pastebin.com/DHZKhBMT

EDIT2：

非常感谢您迄今为止的回复。

我已将RequestAnimFrame移至功能的结尾 - 请记住这一点，谢谢。

我还实现了上面提供的简单跳转脚本Ashish，但角色仍然没有跳跃。

这就是现在的样子：

/** JUMP KEYS DEFINITION **/

    $(document).keypress(function(e){

        if(e.which==32){

            $('Player.prototype').css({'top':"0px"});

        }

    setTimeout(function(){

        $('Player.prototype').css({'top':"200px"});
    },350);

    });

/** DEFINING CHARACTER **/

    function Player(x, y) {
        this.dy        = 0;
        this.gravity   = 1;
        this.speed     = 6;
        this.jumpDy    = -10;
        this.isJumping = false;
        this.width     = 60;
        this.height    = 96;
        this.sheet     = new SpriteSheet('imgs/normal_walk.png', this.width, this.height);
        this.walkAnim  = new Animation(this.sheet, 4, 0, 11);
        this.jumpAnim  = new Animation(this.sheet, 4, 3, 3);
        this.fallAnim  = new Animation(this.sheet, 4, 3, 3);
        this.anim      = this.walkAnim;
        Vector.call(this, x, y, 0, this.dy);

        var jumpCounter = 0;  // Maximalna dlzka drzania tlacidla skakania
      }
      Player.prototype = Object.create(Vector.prototype);

我哪里错了？

Answer 1

我试过http://jsfiddle.net/Ykge9/1/

你在动画中有一个无限循环，requestAnimFrame应该在函数的末尾：

 /**
  * Loop cykly hry
  */
  function animate() {

    background.draw();

    for (i = 0; i < ground.length; i++) {
      ground[i].x -= player.speed;
      ctx.drawImage(assetLoader.imgs.grass, ground[i].x, ground[i].y+250);
    }

    if (ground[0].x <= -platformWidth) {
      ground.shift();
      ground.push({'x': ground[ground.length-1].x + platformWidth, 'y': platformHeight});
    }

    player.anim.update();
    player.anim.draw(64, 260);
    requestAnimFrame( animate );
  }

无法在Javascript游戏中实现跳跃

1 个答案: