အချက်အလက် အပိုင်း

在游戏区域添加一个红色方块：

အစိတ်အပိုင်း ပြင်ဆင်ရန်

အစိတ်အပိုင်း စနစ်တူဝါဒ် ကို ဖန်တီးရန် သဘောတူ ပြုပြီး ဂယင်ဘက်စက် နေရာတွင် အစိတ်အပိုင်း ပြင်ဆင်ရန် သဘောတူပြုပါသည်。

အရာဝတ္တု စနစ်တူဝါဒ် ကိုcomponent（component）ကို ကျွန်တော်တို့သည် ပထမဆုံး အစိတ်အပိုင်း ကို ဖန်တီးခဲ့သည်၊ အမည်မှာ myGamePiece:

အက်ရှိသည်

var myGamePiece;
function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}

亲自试一试

ထိုအစိတ်အပိုင်းများသည် ပုံစံနှင့် လှုပ်ရှားခြင်းကို တွန်းပြောင်နိုင်သော ဗီဇများ နှင့် နည်းလမ်းများ ပါဝင်သည်。

အချက်အလက်

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

首先，创建一个名为 updateGameArea() 的新函数。

在 myGameArea 对象中，添加一个间隔，该间隔将每 20 毫秒运行一次 updateGameArea() 函数（每秒 50 次）。再添加一个名为 clear() 的函数，用于清除整个画布。

在 component 构造函数中，添加了一个名为 update() 的函数，用于处理组件的绘制。

updateGameArea() 函数调用 clear() 和 update() 方法。

结果是组件每秒会被绘制和清除 50 次：

အက်ရှိသည်

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);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  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);
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
}

亲自试一试

让它动起来

为了证明红色方块每秒被绘制 50 次，每次更新游戏区域时，我们都会将 x 位置（水平）更改一个像素：

အက်ရှိသည်

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

亲自试一试

လည်း အကြောင်းပြချက်ကို ရှာဖွေသည်။

အကြောင်းပြချက်မှာ ရှိသည်မဟုတ်ဘဲ၊ သို့သော် အကြောင်းပြချက်ကို လျှော့ချခြင်းမရှိဘဲ clear() စနစ်၊ အဆိုပါ အပိုင်းအခွဲ၏ ပြောင်းလဲမှုတွေ့ရှိသော နောက်ဆုံး အချိန်ချိန်တွင် သို့မဟုတ် နေရာတွင် အညွှန်းပေးသည့် အညွှန်းများကို ရှာဖွေသည်:

အက်ရှိသည်

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

亲自试一试

အကျယ်အဝန်း ပြောင်းလဲပါ:

အရာ၏ အကျယ်အဝန်း နှင့် အမြင့် ကို ပြုပြင်ပါ:

အက်ရှိသည်

10x140 ပုံအရွယ် ပုံပေါင်း ကို ဖန်တီးပါ:

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "red", 10, 120);
}

亲自试一试

အကြောင်းအရာ ပြောင်းလဲပါ:

အရာ၏ အကြောင်းအရာ ကို ပြုပြင်ပါ:

အက်ရှိသည်

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "blue", 10, 120);
}

亲自试一试

အခြား အကြောင်းအရာများ ကို အသုံးပြုနိုင်ပါ:

အက်ရှိသည်

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}

亲自试一试

အရာ၏ အခြေအနေ ပြောင်းလဲပါ:

ကိုယ်စားပြု အရာကို ပြားလှိုင်း၏ အရှေ့အထိပ် ကုဒ်တွင် ခွဲခြားခွဲခြား တည်ထားပါ:

ပြားလှိုင်း၏ အရှေ့အထိပ် ကုဒ်မှာ (0,0) ဖြစ်သည်:

ပြားလှိုင်းကို လျှောက်လိုက်ပြီး အခြေခံ ကုဒ်များ ကို ကြည့်ရမည်:

အမျိုးမျိုးသော အရာကို ပေးပြပါ:

အက်ရှိသည်

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

亲自试一试

အရာများ

အမျိုးမျိုးသော အရာကို ပိုမိုများစွာ ကို ပေးပြပါ:

အက်ရှိသည်

var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
  redGamePiece = new component(75, 75, "red", 10, 10);
  yellowGamePiece = new component(75, 75, "yellow", 50, 60);
  blueGamePiece = new component(75, 75, "blue", 10, 110);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

亲自试一试

ပြောင်းလဲသွားသော အရာ

သုံးအရာကို ပြောင်းလဲသွားသော ခုံးများ ကို ပေးပြပါ:

အက်ရှိသည်

function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

亲自试一试