Gangguan Permainan

按下按钮可移动红色方块：

添加一些障碍

现在我们想为游戏添加一些障碍。

将新组件添加到游戏区域。将其设为绿色，宽 10 像素，高 200 像素，然后将其放置在右侧 300 像素、向下 120 像素的位置。

需要更新每一帧中的障碍物组件：

实例

var myGamePiece;
var myObstacle;
function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 120);
  myObstacle = new component(10, 200, "green", 300, 120);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  myObstacle.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

Cuba sendiri

撞到障碍 = 游戏结束

在上面的例子中，当您碰到障碍物时什么也不会发生。在游戏中，这并不令人满意。

我们如何知道我们的红色方块是否撞到了障碍物？

在组件构造函数中创建一个新方法，用于检查该组件是否与另一个组件相撞。每次帧更新时都应调用此方法，每秒 50 次。

还要向 myGameArea 对象添加 stop() 方法，该方法会清除 20 毫秒的间隔。

实例

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);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },
  stop : function() {
    clearInterval(this.interval);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
  }
  this.crashWith = function(otherobj) {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var otherleft = otherobj.x;
    var otherright = otherobj.x + (otherobj.width);
    var othertop = otherobj.y;
    var otherbottom = otherobj.y + (otherobj.height);
    var crash = true;
    if ((mybottom < othertop) ||
    (mytop > otherbottom) ||
    (myright < otherleft) ||
    (myleft > otherright)) {
      crash = false;
    }
    kembali crash;
  }
}
function updateGameArea() {
  jika (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
  } else {
    myGameArea.clear();
    myObstacle.update();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

Cuba sendiri

Gerakkan penghalang

Penghalang diam tidak berbahaya, jadi kami ingin ia bergerak.

ubah setiap update myObstacle.x nilai properti:

实例

function updateGameArea() {
  jika (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
  } else {
    myGameArea.clear();
    myObstacle.x += -1;
    myObstacle.update();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

Cuba sendiri

Penghalang berbanyak

Bagaimana tentang menambahkan beberapa penghalang?

Untuk itu, perlu properti untuk menghitung frame serta metode untuk melaksanakan beberapa operasi dengan frekuensi frame yang diberikan.

实例

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.frameNo = 0;
    this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },
  stop : function() {
    clearInterval(this.interval);
  }
}
function everyinterval(n) {
  jika ((myGameArea.frameNo / n) % 1 == 0) {kembali true;}
  kembali false;
}

jika nomor bingkai saat ini sejalan dengan interval yang diberikan, fungsi everyinterval kembali true.

pertama, jika ingin mendefinisikan beberapa penghalang, deklarasikan variabel penghalang sebagai array.

kemudian, perlu membuat beberapa perubahan ke fungsi updateGameArea.

实例

var myGamePiece;
var myObstacles = [];
function updateGameArea() {
  var x, y;
  for (i = 0; i < myObstacles.length; i += 1) {
    if (myGamePiece.crashWith(myObstacles[i])) {
      myGameArea.stop();
      return;
    }
  }
  myGameArea.clear();
  myGameArea.frameNo += 1;
  if (myGameArea.frameNo == 1 || everyinterval(150)) {
    x = myGameArea.canvas.width;
    y = myGameArea.canvas.height - 200
    myObstacles.push(new component(10, 200, "green", x, y));
  }
  for (i = 0; i < myObstacles.length; i += 1) {
    myObstacles[i].x += -1;
    myObstacles[i].update();
  }
  myGamePiece.newPos();
  myGamePiece.update();
}

Cuba sendiri

Di updateGameArea Dalam fungsi, kita harus mengulangi melalui setiap benda penghalang untuk memeriksa apakah terjadi tabrakan. Jika terjadi tabrakan, fungsi updateGameArea akan berhenti dan tidak akan dilukis lagi.

updateGameArea Fungsi menghitung bintang frame dan menambahkan benda penghalang setiap 150 bintang.

Benda penghalang ukuran acak

Untuk menambah kesulitan dan kegarisan permainan, kami akan mengirimkan benda penghalang ukuran acak, supaya kubu merah harus bergerak naik turun untuk menghindari tabrakan.

实例

function updateGameArea() {
  var x, height, gap, minHeight, maxHeight, minGap, maxGap;
  for (i = 0; i < myObstacles.length; i += 1) {
    if (myGamePiece.crashWith(myObstacles[i])) {
      myGameArea.stop();
      return;
    }
  }
  myGameArea.clear();
  myGameArea.frameNo += 1;
  if (myGameArea.frameNo == 1 || everyinterval(150)) {
    x = myGameArea.canvas.width;
    minHeight = 20;
    maxHeight = 200;
    height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
    minGap = 50;
    maxGap = 200;
    gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
    myObstacles.push(new component(10, height, "green", x, 0));
    myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
  }
  for (i = 0; i < myObstacles.length; i += 1) {
    myObstacles[i].x += -1;
    myObstacles[i].update();
  }
  myGamePiece.newPos();
  myGamePiece.update();
}

Cuba sendiri