Batas Permainan

tekan tombol untuk memgerakkan blok merah:

tambahkan beberapa penghalang

kini kami ingin menambahkan beberapa penghalang ke permainan.

tambahkan komponen baru ke area permainan. Dapatkan warna hijau, lebar 10 piksel, tinggi 200 piksel, dan letakkan di posisi kiri 300 piksel, ke bawah 120 piksel.

mengupdate komponen penghalang setiap frame:

实例

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();
}

Coba Sendiri

Tabrakan = Permainan Berakhir

Dalam contoh di atas, ketika Anda menabrak benda, tidak ada yang terjadi. Dalam permainan, hal ini tidak memuaskan.

Bagaimana kita tahu bahwa blok merah kita menabrak benda?

Dalam konstruktur komponen, buat metode baru untuk memeriksa apakah komponen ini bertabrakan dengan komponen lain. Metode ini harus dipanggil setiap update frame, 50 kali per detik.

harus diisi myGameArea tambahan objek stop() method, yang akan menghapus jeda 20 milidetik.

实例

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;
    }
    return crash;
  }
}
function updateGameArea() {
  if (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
  } else {
    myGameArea.clear();
    myObstacle.update();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

Coba Sendiri

Gerakkan rambu

Rambu yang tetap tidak berbahaya, jadi kami ingin menggerakkan nya.

mengubah setiap pengupdatean myObstacle.x nilai properti:

实例

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

Coba Sendiri

Rambu berbagai macam

Bagaimana dengan menambahkan beberapa rambu?

Untuk hal ini, kami memerlukan properti untuk menghitung frame serta metode untuk melaksanakan beberapa operasi pada rate 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) {
  if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
  return false;
}

Jika nomor frame saat ini sejalan dengan interval yang diberikan, fungsi everyinterval mengembalikan true.

Pertama, jika ingin mendefinisikan beberapa rambu, deklarasikan variabel rambu sebagai array.

Kemudian, kami perlu melakukan beberapa perubahan pada 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();
}

Coba Sendiri

di updateGameArea Dalam fungsi, kita harus mengulangi melintasi setiap obstruktur untuk melihat apakah terjadi tabrakan. Jika terjadi tabrakan, fungsi updateGameArea akan berhenti dan tidak lagi akan menggambar.

updateGameArea Fungsi menghitung frame dan menambah obstruktur setiap 150 frame.

Obstruktur ukuran acak

Untuk menambah kesulitan dan keseruan permainan, kami akan mengirim obstruktur ukuran acak, sehingga blok merah harus bergerak naik turun supaya tidak terjadi 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();
}

Coba Sendiri