javascript - 按住跳跃时如何让我的 Angular 色不飞

Question

我正在用 javascript 制作游戏。现在，当按住跳跃时，我的 Angular 色会一直跳跃。我希望他不要一直跳来跳去。即使保持跳跃，我如何让他停止跳跃并在 2 秒左右后下来？我有重力，我放手后他就下来了..但我希望他自己下来。

播放器

import { detectCollisionLeft } from './collision';
import Map from './map';
import Entity from './entity';

class Player extends Entity {
  constructor(x, y) {
    super(x, y)
    this.width = 24,
      this.height = 24,
      this.color = "blue",
      // this.pos = {
      //   x: 20, // change to level start later
      //   y: 20
      // }
    this.velX = 0;
    this.maxVelX = 3;
    this.velY = 0;
    this.maxVelY = 8;
    this.gravity = 3;
    this.jumping = false
    // this.topLeft = {
    //   x: this.pos.x,
    //   y: this.pos.y - this.height
    // }
    // this.botRight = {
    //   x: this.pos.x + this.width,
    //   y: this.pos.y
    // }

    // this.top = this.pos.y
    // this.left = this.pos.x
    // this.bot = this.pos.y + this.height;
    // this.right = this.pos.x + this.width
  }

  draw(ctx) {
    // console.log('j')
    ctx.fillStyle = this.color;
    ctx.fillRect(this.pos.x, this.pos.y, this.width, this.height)
  }

  moveLeft() {
    // debugger
    // if (this.map.collidingWithMap(this.topLeft)) {
    //   console.log('hi')  
    //   return
    // }
    this.velX = -this.maxVelX
  }

  moveRight() {
    this.velX = this.maxVelX
  }

  jump() {
    // if (this.pos.y === 600 - this.height)
      if (!this.jumping) {
        this.velY = -this.maxVelY
        this.jumping = true
    }
  }

  comeDown() {
    this.jumping = false
    this.velY = this.gravity
  }

  stop() {
    this.velX = 0;
  }

  update(dt) {
    // console.log(this.pos)
    if (!dt) return

    this.pos.x += this.velX
    this.pos.x += this.velX
    this.pos.y += this.velY + this.gravity
    // if (this.pos.y + this.height > 600) {
    //   this.pos.y = 600 - this.height
    // }

  }





}

export default Player;

Controller

import Player from './player1';
import Map from './map';

class Controller {
  constructor(player, map, ctx) {
    this.player = player;
    this.map = map;
    this.ctx = ctx
    // this.keyboardHandlers = this.keyboardHandlers.bind(this);

    // this.keyboardHandlers();


  // keyboardHandlers() {

    // document.addEventListener("keypress", (e) => {
    //   if (e.keyCode === 38 || 87) {
    //     this.player.jumping = false;
    //     this.player.jump();
    //     // break;
    //   }
    // })

    document.addEventListener("keydown", (e) => {
      switch (e.keyCode) {
        case 38 && 87: // up arrow
          // console.log("w")

          if (this.player.jumping === false) {
            this.player.jump();
          }
          break;

        // case 40 && 83: // down arrow

        //   this.player.move("down");
        //   // console.log(this.player.pos)
        //   this.player.draw(this.ctx)
        //   break;

        case 37 && 65: // left arrow

          this.player.moveLeft();
          break;

        case 39 && 68: // right arrow

          this.player.moveRight();
          break;

        case 32: // space
          // debugger
          this.map.flipMap();

        // case 38 && 39: // doesnt work
        //   console.log('upright')
        //   break;

        // case 13: // enter
        //   if (this.game.menu === true) {

        //   } else {

        //   }

        default:
          break;
      }
    })

    document.addEventListener("keyup", (e) => {
      // debugger
      switch (e.keyCode) {
        case 38 && 87: // up arrow
          // console.log("w")
          if (this.player.jumping)
            this.player.comeDown()
          break;

        // case 40 && 83: // down arrow

        //   if (this.player.velY > 0)
        //     this.player.stop();
        //   break;

        case 37 && 65: // left arrow
          if (this.player.velX < 0)
            this.player.stop();
          break;

        case 39 && 68: // right arrow
          if (this.player.velX > 0)
            this.player.stop();
          break;

        // case 32: // space
        //   this.map.flipMap(this.ctx);

        // case 38 && 39: // doeswnt work
        //   console.log('upright')
        //   break;

        // case 13: // enter
        //   if (this.game.menu === true) {

        //   } else {

        //   }

        default:
          break;
      }
    })
  }
  // }
}

export default Controller;

游戏

import Player from './player';
import Map from './map';
import Controller from './controller';
import Tile from './tile'
import { buildLevel, levels } from './level'
import Collision from './collision';

class Game {
  constructor(ctx) {
    this.ctx = ctx;
    // this.map = new Map(ctx);
    // // debugger
    // this.tile = new Tile()
    // this.map = new Map(this.ctx)
    this.map = new Map(levels[1].tiles, this, this.color);
    this.player = new Player(20, 20);
    this.controller = new Controller(this.player, this.map, this.ctx, this);
    this.collision = new Collision(this.map)
    this.tiles = [];
    this.color = "black"
    // // this.controller = new Controller(this.player, this.map, ctx)
    // // this.keyboardHandlers(ctx)
    // this.render(ctx);
  };

  draw(ctx) {
    // debugger
    ctx.clearRect(0, 0, 1000, 600)
    // debugger
    // this.tiles.forEach(tile => tile.draw(ctx))
    this.player.draw(ctx)
    this.map.tiles.forEach(tile => tile.draw(ctx))

    // this.map.render(ctx)
  }

  start() {
    // debugger
    // this.tiles = buildLevel(levels[1].tiles, this)
    this.map.create(levels[1].tiles, this);
    this.lastTime = 0;
    // this.controller.keyboardHandlers();
    requestAnimationFrame(this.animate.bind(this))
  }

  animate(time) {
    const dt = time - this.lastTime;
    this.draw(this.ctx)
    // this.tiles.forEach(tile => tile.update())
    this.player.update(dt)
    this.collision.isColliding(this.player)
    // this.lastTime = time;

    requestAnimationFrame(this.animate.bind(this))
  }

  // draw(ctx) {
  //   console.log('cear')
  //   ctx.clearRect(0, 0, 1000, 600)
  // }

  // render(ctx) {
  //   // debugger
  //   ctx.clearRect(0, 0, 1000, 600)

  //   this.map.render(ctx)
  //   this.player.draw(ctx)
  // }
}

const CONSTANTS = {
  GRAVITY: 0.4
}

export default Game;

Answer 1

当用户开始跳跃时设置一个超时时间，如果用户还没有释放按键则自动调用comeDown:

//On key down
case 38 && 87: // up arrow
  // console.log("w")

  if (this.player.jumping === false) {
    this.player.jump();
    this._timeout = setTimeout(()=>{
      if(this.player.jumping === true)
        this.player.comeDown()
    },2000)
  }
  break;

//On key up
case 38 && 87: // up arrow
  // console.log("w")
  if (this.player.jumping){
    clearTimeout(this._timeout)
    this.player.comeDown()
  }
  break;

此外，(与此问题无关)，case 38 && 87: 不会按您预期的那样工作:

由于表达式 38 && 87 等于 87(由于 &&)，它不适用于 38。

要写 38 OR 87，你必须写两个折叠的情况:

case 38:
case 87:
  //code here