HTML ဂရပ်ဖစ်

ဂရပ်ဖစ် ပင်မစာမျက်နှာ

Google Maps

Maps မိတ်ဆက် Maps အခြေခံ Maps Overlays Maps ပွဲများ Maps ထိန်းချုပ်မှုများ Maps အမျိုးအစားများ Maps အကိုးအကား

SVG ကျူတိုရီရယ်

SVG နိဒါန်း HTML တွင် SVG SVG စတုဂံ SVG စက်ဝိုင်း SVG Ellipse SVG လိုင်း SVG Polygon SVG Polyline SVG လမ်းကြောင်း SVG စာသား SVG Stroking SVG Filters နိဒါန်း SVG မှုန်ဝါးခြင်းအကျိုးသက်ရောက်မှုများ SVG Drop Shadows SVG Linear SVG Radial SVG ဥပမာများ SVG အကိုးအကား

Canvas ကျူတိုရီရယ်

Canvas မိတ်ဆက် ကင်းဗတ်ဆွဲခြင်း။ Canvas Coordinates ကင်းဗတ် Gradients ကင်းဗတ်စာသား ကင်းဗတ်ပုံများ ကင်းဗတ်ရည်ညွှန်း

ကင်းဗတ်နာရီ

နာရီ မိတ်ဆက် နာရီမျက်နှာ နာရီနံပါတ်များ နာရီလက်များ နာရီစတင်

HTML ဂိမ်း

ဂိမ်းမိတ်ဆက် ဂိမ်း Canvas ဂိမ်းအစိတ်အပိုင်းများ ဂိမ်းထိန်းချုပ်သူများ ဂိမ်းအတားအဆီးများ ဂိမ်းရမှတ် ဂိမ်းပုံများ ဂိမ်းအသံ ဂိမ်းဆွဲငင်အား ဂိမ်းခုန်ခြင်း။ ဂိမ်းလှည့်ခြင်း။ ဂိမ်းလှုပ်ရှားမှု

ဂိမ်းရမှတ်


အနီရောင်စတုရန်းကိုရွှေ့ရန် ခလုတ်များကို နှိပ်ပါ။








ရမှတ်ကိုရေတွက်ပါ။

ဂိမ်းတစ်ခုတွင် ရမှတ်ကို ထိန်းထားရန် နည်းလမ်းများစွာရှိသည်၊ ကျွန်ုပ်တို့သည် ကင်းဗတ်စ်ပေါ်တွင် ရမှတ်တစ်ခုကို မည်သို့ရေးရမည်ကို သင့်အား ပြသပါမည်။

ပထမဆုံး ရမှတ်တစ်ခု ပြုလုပ်ပါ

ဥပမာ

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 160);
  myScore = new component("30px", "Consolas", "black", 280, 40, "text");
  myGameArea.start();
}

ကင်းဗတ်ဒြပ်စင်ပေါ်တွင် စာသားရေးရန်အတွက် အထားအသိုသည် ထောင့်မှန်စတုဂံပုံဆွဲခြင်းနှင့် ကွဲပြားသည်။ ထို့ကြောင့် constructor အား ဤ component သည် type "text" ဖြစ်သည်ကို အပိုအငြင်းအခုံတစ်ခုသုံးပြီး ကွန်ပြူတာတည်ဆောက်သူကို ခေါ်ရပါမည်။

အစိတ်အပိုင်းတည်ဆောက်မှုစနစ်တွင် အစိတ်အပိုင်းသည် အမျိုးအစား "စာသား" ရှိမရှိ စမ်းသပ်ပြီး fillTextနည်းလမ်းအစား fillRectနည်းလမ်းကို အသုံးပြုပါ-

ဥပမာ

function component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    if (this.type == "text") {
      ctx.font = this.width + " " + this.height;
      ctx.fillStyle = color;
      ctx.fillText(this.text, this.x, this.y);
    } else {
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }
...
}



နောက်ဆုံးတွင် ကျွန်ုပ်တို့သည် ကင်းဗတ်စ်ပေါ်တွင် ရမှတ်များကိုရေးပေးသည့် updateGameArea လုပ်ဆောင်ချက်တွင် ကုဒ်အချို့ကို ပေါင်းထည့်ပါသည်။ frameNoရမှတ်ကို ရေတွက်ရန် ကျွန်ုပ်တို့သည် ပိုင်ဆိုင်မှုကို အသုံးပြုသည် -

ဥပမာ

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].speedX = -1;
    myObstacles[i].newPos();
    myObstacles[i].update();
  }
  myScore.text = "SCORE: " + myGameArea.frameNo;
  myScore.update();
  myGamePiece.newPos();
  myGamePiece.update();
}