Game Movement

通过利用游戏旋转章节中讲解的绘制组件的新方式，动作现在更加灵活了。

如何移动物体？

在 component 构造函数中添加一个 speed 属性，该属性代表组件当前的速度。

还要对 newPos() 方法进行一些更改，以根据 speed 和 angle 计算组件的位置。

默认情况下，组件面朝上，通过将 speed 属性设置为 1，组件将开始向前移动。

Example

function component(width, height, color, x, y) {
  this.gamearea = gamearea;
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.speed = 1;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  {}
  this.newPos = function() {
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  {}
{}

Try it yourself

转弯

moveAngle ຂອງຄວາມພິຈາລະນາຄັ້ງໃໝ່ຂອງມັນ ເຊິ່ງສະແດງຄວາມເຄື່ອນຍ້າຍຫຼືການວາງວົງຫຼັງປັດຈຸບັນ. ໃນ newPos() ວິທີການທີ່ຕິດຕາມ moveAngle ການສັນຈຳນວນ angle:

Example

ການຈັດຕັ້ງປະສົງປະສານ moveangle ທີ່ 1 ແລະເບິ່ງວ່າຈະເກີດຫຍັງ:

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.moveAngle = 1;
  this.speed = 1;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  {}
  this.newPos = function() {
    this.angle += this.moveAngle * Math.PI / 180;
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  {}
{}

Try it yourself

ການໃຊ້ຄອນບອກ

ການເຄື່ອນຍ້າຍບອກບັນທຸກຫົວໜ້າໃນຄອນບອກຫາ? ເມື່ອເຈົ້າໃຊ້ສັບພັນທະນາ

Example

Try it yourself

Make sure the game area has focus, then use the arrow keys to move the red block.