အချိန် အခင်း

ဘေ့စ်နှာ ထိုးနောက် အရောင်အရည်များ ပြောင်းလဲလာမည်။

အပင်အား ထပ်ပေး

ကျွန်တော်တို့သည် အဲဒီ ပုံစံအား အပင်အား ထပ်ပေးရန် ဆန္ဒရှိသည်။

အခြေခံ အပင်အား အော်ဂန်းပျံသွားအော်ဂန်းအား ထပ်ပေးပါ။ အကြီးအား ၁၀ ပုံအကွက်ခန့် အမြင့် ၂၀၀ ပုံအကွက်ခန့် အရောင် ဂရင်း ဖြင့် စတင်ပြီး အရှေ့ဘက် ၃၀၀ ပုံအကွက် အောက်ဘက် ၁၂၀ ပုံအကွက် နေရာသို့ ချထားပါ။

တစ်ခုခုသော အချိန်ပိုင်းတွင် အပင်ကို ထပ်ပေးရသည့်အတွက် ကိုင်တာအား အသုံးပြုပါ။

အမှုန့်

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 毫秒的间隔。

အမှုန့်

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

亲自试一试

ပျက်စီးများ လှုပ်ရှားခြင်း

ပျက်စီးများ အခြေခံအချက်အစုအဖွဲ့များ မှ အကျင့်မတူက အန္တရာယ်မရှိဘူး။ အရေးပါသော အချက်အစုအဖွဲ့များကို လှုပ်ရှားပါကြလော့。

အခြားအချက်အစုအဖွဲ့များကို ပြန်လည်တိုက်ရိုက်သည် myObstacle.x အချက်အစုအဖွဲ့များ၏ အချက်အရာများ

အမှုန့်

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

亲自试一试

အသုံးပြုရန် ပျက်စီးများ

အပိုမိုသော ပျက်စီးများ ထပ်ပေါင်းပါလား။

ဒါကြောင်းဖြင့် အဆင့်အခြောက်အပိုင်းအချက်ကို ခန့်မှန်းရန် အခြေခံ အချက်အစုအဖွဲ့ကို အသုံးပြုပါ။ အခြားအချက်အစုအဖွဲ့ကို ပြုလုပ်ရန် အခြားအချက်အစုအဖွဲ့ကို အသုံးပြုပါ။

အမှုန့်

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

ဖြင့် လက်ရှိအပိုင်းအချက်သည် အခြားအပိုင်းအချက်နှင့် ကိုက်ညီသည့် အချိန်ထိပ်အပိုင်းအချက်ဖြင့် အပိုင်းအချက်များကို ပြန်လည်တိုက်ရိုက်သည်။

အပြီးတွင် အသုံးပြုရန် အပိုမိုသော ပျက်စီးများကို စက္ခုအစုအဖွဲ့အဖြစ် အသုံးပြုပါ။

ဒါကြောင်းဖြင့် ကျွန်ုပ်တို့က 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();
}

亲自试一试

在 updateGameArea 函数中，我们必须循环遍历每个障碍物来查看是否发生碰撞。如果发生碰撞，updateGameArea 函数将停止，并且不再进行绘制。

updateGameArea 函数对帧进行计数，并每隔 150 帧添加一个障碍物。

随机大小的障碍

为了增添游戏的难度和趣味，我们将发送随机大小的障碍物，以便红色方块必须上下移动才不会发生碰撞。

အမှုန့်

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

亲自试一试