游戏障碍

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

添加一些障碍

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

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

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

sample

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

亲自试一试

撞到障碍 = 游戏结束

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

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

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

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

sample

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() {
  kung (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
  {} kung hindi {
    myGameArea.clear();
    myObstacle.update();
    myGamePiece.newPos();
    myGamePiece.update();
  {}
{}

亲自试一试

Ililipat ang obstacle

Ang obstacle ay walang panganib kapag nananatili ito nang walang paggalaw, kaya gusto naming ito ililipat.

magpalit sa bawat pag-update myObstacle.x ang mga halaga ng attribute:

sample

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

亲自试一试

Maraming障碍物障碍物

Anong magiging maganda kung magdagdag ng ilang障碍物障碍物?

Para dito, kailangan namin ng isang attribute na magtutukoy sa bilang ng frame at isang method na gagawin ang ilang operasyon sa binigay na frame rate.

sample

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) {
  kung ((myGameArea.frameNo / n) % 1 == 0) {return true;}
  return false;
{}

Kung ang kasalukuyang frame number ay tumutugma sa binigay na interval, ang function na everyinterval ay ibabalik ang true.

Una, kung gusto mong mag-definir ng ilang障碍物障碍物, i-deklara ang variable ng obstacle bilang array.

Pangalawa, kailangan namin na gumawa ng ilang pagbabago sa function na updateGameArea.

sample

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

亲自试一试

Sa updateGameArea Sa function na ito, kailangan naming umikot sa bawat障碍物 upang tingnan kung mayroong pagkakasalanta. Kung mayroong pagkakasalanta, ang function na updateGameArea ay titigil at hindi na magpapatuloy sa pagpipinta.

updateGameArea Ang function na ito ay nagtutok sa pagbilang ng frame at magdagdag ng障碍物 bawat 150 na frame.

Random na laki ng障碍物

Para pagdaragdag ng kahirapan at kasiyahan ng laro, magpadala kami ng random na laki ng障碍物 upang ang red block ay dapat ililipat ng up and down upang hindi mangyari ang pagkakasalanta.

sample

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

亲自试一试