javascript - 触地后跳跃球员

Question

当组件或方 block 接触 Canvas 底部，然后我按下向上箭头时，它会与底部碰撞，每次跳跃，当我按下向上箭头时，组件都会向上跳跃，直到组件最终不再跳跃。根本跳不起来。但当这个问题发生时，组件同时左右移动完全静止。我用箭头键控制方 block ，它是我正在创建的这个平台游戏的玩家，我不知道如何更改它。

var myGamePiece;
var platformWidth = 500;
var platformX = 0;
var platformY = 250;

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
}

var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");

    document.body.insertBefore(this.canvas, document.body.childNodes[0]);

    this.interval = setInterval(updateGameArea, 20);

    window.addEventListener("keydown", function(e) {
      myGameArea.key = e.keyCode;
    });

    window.addEventListener("keyup", function(e) {
      myGameArea.key = false;
    });
  },

  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
};

function component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.speedX = 0;
  this.speedY = 0;
  this.gravity = 0.05;
  this.gravitySpeed = 0;

  this.update = function() {
    ctx = myGameArea.context;

    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };

  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;

    this.hitBottom();
  };

  this.hitBottom = function() {
    var rockbottom = myGameArea.canvas.height - this.height;

    if (this.y > rockbottom) {
      this.y = rockbottom;

      if (myGameArea.canvas.height - this.height && myGamePiece.key == 38) {
        this.y = this.speedY;
      }
    }
  };
}

function updateGameArea() {
  myGameArea.clear();

  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;

  if (myGameArea.key && myGameArea.key == 37) {
    myGamePiece.speedX = -5;
  }
  if (myGameArea.key && myGameArea.key == 39) {
    myGamePiece.speedX = 5;
  }
  if (myGameArea.key && myGameArea.key == 38) {
    myGamePiece.speedY = -5;
  } else {
    myGamePiece.speedY = 5;
  }

  if (myGameArea.key && myGameArea.key == 40) {
    myGamePiece.speedY = 5;
  }

  myGamePiece.newPos();
  myGamePiece.update();
}

startGame();

Answer 1

您是否忘记重置重力速度？

this.hitBottom = function() {
  // ...
  if (this.y > rockbottom) {
    // ...
    this.gravitySpeed = 0; // reset?
  }
};

var myGamePiece;
var platformWidth = 360;
var platformX = 0;
var platformY = 120;

function startGame() {
  myGameArea.start();
  myGamePiece = new Component(12, 12, "red", 10, 10);
}

var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = platformWidth;
    this.canvas.height = platformY;
    this.context = this.canvas.getContext("2d");

    document.body.insertBefore(this.canvas, document.body.childNodes[0]);

    this.interval = setInterval(updateGameArea, 20);

    window.addEventListener("keydown", function(e) {
      myGameArea.key = e.keyCode;
    });

    window.addEventListener("keyup", function(e) {
      myGameArea.key = false;
    });
  },

  fill: function(color) {
    this.context.save();
    this.context.fillStyle = color;
    this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
    this.context.restore();
  },

  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
};

function Component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.speedX = 0;
  this.speedY = 0;
  this.gravity = 0.05;
  this.gravitySpeed = 0;

  this.update = function() {
    ctx = myGameArea.context;

    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };

  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;

    this.hitBottom();
  };

  this.hitBottom = function() {
    var rockbottom = myGameArea.canvas.height - this.height;

    if (this.y > rockbottom) {
      this.y = rockbottom;

      if (myGameArea.canvas.height - this.height && myGamePiece.key == 38) {
        this.y = this.speedY;
      }
      
      this.gravitySpeed = 0; // reset?
    }
  };
}

function updateGameArea() {
  myGameArea.fill('#DE7');

  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;

  if (myGameArea.key) {
    switch (myGameArea.key) {
      case 37: // left arrow
        myGamePiece.speedX = -5;
        break;
      case 38: // up arrow
        myGamePiece.speedY = -5;
        break;
      case 39: // right arrow
        myGamePiece.speedX = +5;
        break;
      case 40: // down arrow
      default:
        myGamePiece.speedY = +5;
    }
  }

  myGamePiece.newPos();
  myGamePiece.update();
}

startGame();

body {
  background: #000;
}

<小时/>

这是另一种使用类的方法，您可以通过使用实际的向量类来清理向量数学，例如Victor.js .

const main = () => {
  new GravityGame({
    width : 360,
    height : 180,
    refreshRate : 20
  }).start();
}

class AbstractGameClient {
  constructor(options) {
    this.refreshRate = options.refreshRate
    this.view = new GameArea({
      width : options.width,
      height : options.height
    })
  }
  
  update() {
    this.view.update()
  }
  
  start() {
    let self = this
    self.intervalId = setInterval(function() { self.update() }, self.refreshRate)
    return self
  }
  
  stop() {
    if (self.intervalId) {
      clearInterval(self.intervalId)
    }
  }
}

class GravityGame extends AbstractGameClient {
  constructor(options) {
    super(options)
    
    let myGamePiece = new Component({
      width : 12,
      height : 12,
      color : 'red'
    })
    
    this.view.addComponent(myGamePiece)
  }
}

class GameArea {
  constructor(options) {
    let self = this
  
    self.canvas = document.createElement('canvas')
    self.width = options.width
    self.height = options.height
    self.key = null
    self.components = []

    self.addListeners()
    self.render()
  }

  render() {
    let self = this
  
    self.canvas.width = self.width
    self.canvas.height = self.height
    self.context = self.canvas.getContext('2d')

    document.body.insertBefore(self.canvas, document.body.childNodes[0])
  }
  
  addComponent(component) {
    this.centerComponent(component)
    this.components.push(component)
  }
  
  addListeners() {
    let self = this;
  
    window.addEventListener('keydown', function(e) {
      self.key = e.keyCode;
    });
    window.addEventListener('keyup', function(e) {
      self.key = false;
    });
  }

  fill(color) {
    this.context.save();
    this.context.fillStyle = color;
    this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
    this.context.restore();
  }

  clear() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
  
  update() {
    let self = this
    let speed = { x : 0, y : 0 }

    if (self.key) {
      switch (self.key) {
        case 37: // left arrow
          speed.x = -5;
          break;
        case 38: // up arrow
          speed.y = -5;
          break;
        case 39: // right arrow
          speed.x = +5;
          break;
        case 40: // down arrow
        default:
          speed.y = +5;
      }
    }
    
    self.fill('#DE7')
    
    self.components.forEach(component => {
      component.speed.x = speed.x
      component.speed.y = speed.y
      component.reposition(self.context)
      component.redraw(self.context)
    })
  }
  
  centerComponent(component) {
    let xOffset = Math.floor((this.canvas.width / 2) - component.width / 2)
    let yOffset = Math.floor((this.canvas.height / 2) - component.height / 2)
    
    component.position = { x : xOffset, y : yOffset }
  }
};

class Component {
  constructor(options) {
    let self = this
  
    self.width = options.width
    self.height = options.height
    self.position = options.position
    self.color = options.color
    self.type = options.type

    self.speed = { x : 0, y : 0 }
    self.gravity = { x : 0, y : 0.05 };
    self.acceleration = { x : 0, y : 0 };
  }

  redraw(context) {
    context.fillStyle = this.color;
    context.fillRect(this.position.x, this.position.y, this.width, this.height);
  }

  reposition(context) {
    let self = this
    
    // Increase acceleration
    self.acceleration.x += self.gravity.x;
    self.acceleration.y += self.gravity.y;
    
    // pos + speed + acceleration
    self.position.x += self.speed.x + self.acceleration.x;
    self.position.y += self.speed.y + self.acceleration.y;

    self.checkBounds(context);
  }

  checkBounds(context) {
    let self = this
    let rockbottom = context.canvas.height - this.height

    if (self.position.y > rockbottom) {
      self.position.y = rockbottom

      if (context.canvas.height - self.height && self.key == 38) {
        self.position.y = self.speed.y
      }
      
      self.acceleration = { x : 0, y : 0 } // reset
    }
  }
}

main();

body {
  background: #000;
}