ဂန္ဒ ပုံ

နှင်းပေါင်းပေါင်းပုံကို စွပ်စွပ်ထည့်သွင်းရန် နှင်းပေါင်းပေါင်းပုံကို အသုံးပြုပြီး၊

ပုံစံကုဒ်ကို အသုံးပြုခြင်းမှာမည်မှာလဲသနည်း?

ပုံစံကုဒ်ကို ပုံမှန်တွင် ထပ်ထည့်ရန်၊ "getContext("2d")" အကိုယ်ဝင်ပုံစံကုဒ်၏ ပုံစံကုဒ်အချက်အလက် နှင့် နည်းလမ်းများကို အသုံးပြုပြီး၊

ကျွန်တော်တို့၏ ဂိမ်းတွင် ဂိမ်းအစုအဝေးကို ပုံစံကုဒ်အဖြစ် ဖန်တီးရန်၊ အကိုယ်ဝင်ကုဒ်မှူးကို အသုံးပြုပြီး၊ ပုံစံကုဒ်၏ url ကို အသုံးပြုပြီး၊ အကိုယ်ဝင်ကုဒ်မှူးကို အသုံးပြုရန် လိုအပ်သည်။ ပြီးတော့၊ အကိုယ်ဝင်ကုဒ်မှူးကို "image" အမျိုးအစား အသုံးပြုရန် လိုအပ်သည်:

အက်စ်ပုံ

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

အကိုယ်ဝင်ကုဒ်မှူးတွင်၊ ကျွန်တော်တို့က အကိုယ်ဝင်အမျိုး "image" ကို စစ်ဆေးပြီး၊ "new Image()" အကိုယ်ဝင်ပုံစံကုဒ်များကို ကိုယ်ဝင်ပုံစံကုဒ်အရင်းအမြစ် ဖန်တီးကြပြီ။ ကျွန်တော်တို့က ပုံစံကုဒ်ကို ဖတ်ရှုရာတွင်၊ ကျွန်တော်တို့က ဖတ်ရှုပုံစံ "drawImage" ကို အသုံးပြုကြပြီး၊ "fillRect" ပုံစံကို အသုံးပြုခြင်း မဟုတ်ဘူး:

အက်စ်ပုံ

function component(width, height, color, x, y, type) {
  this.type = type;
  if (type == "image") {}}
    this.image = new Image();
    this.image.src = color;
  }
  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 (type == "image") {}}
      ctx.drawImage(this.image,
        this.x,
        this.y,
        this.width, this.height);
    } else {
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }
}

亲自试一试

ပုံ

အစိတ်အပိုင်း image အရာ src အချက်အလက်

ရှေ့ဆောင်ရာ ပုံကို ပြောင်းလဲစေရန် အားလုံး တက်ပြောင်း ချင်လျှင် နှုတ်သတ်ချက် အား အပ်စီးခြင်း နှင့် အားလုံး ပြန်လည် ပြောင်းလဲစေတယ်

အက်စ်ပုံ

function move(dir) {
  myGamePiece.image.src = "angry.gif";
  if (dir == "up") {myGamePiece.speedY = -1; }
  if (dir == "down") {myGamePiece.speedY = 1; }
  if (dir == "left") {myGamePiece.speedX = -1; }
  if (dir == "right") {myGamePiece.speedX = 1; }
}
function clearmove() {
  myGamePiece.image.src = "smiley.gif";
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}

亲自试一试

နောက်ခံပုံစံ ပုံ

နောက်ခံပုံစံ ပုံများကို အစိတ်အပိုင်းအဖြစ် ထည့်သွင်းပြီး စခုလမ်းကြောင်းအတွင်း နောက်ခံပုံစံကို အဆင့်ချဲ့ ပြီး အချိန်အတိုင်း ထပ်ထည့်သွင်းတယ်

အက်စ်ပုံ

var myGamePiece;
var myBackground;
function startGame() {
  myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
  myBackground = new component(656, 270, "citymarket.jpg", 0, 0, "image");
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  myBackground.newPos();
  myBackground.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

亲自试一试

နောက်ခံပုံစံကို ပြောင်းလဲစေတယ်

နောက်ခံပုံစံအစိတ်အပိုင်းကို speedX နောက်ခံပုံစံကို ပြောင်းလဲစေရန် သုံးနိုင်သော အချက်အလက်များ:

အက်စ်ပုံ

function updateGameArea() {
  myGameArea.clear();
  speedX = -1;
  myBackground.newPos();
  myBackground.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

亲自试一试

背景循环

为了让这幅相同的背景永远循环，我们必须使用特定的技术。

首先告诉组件构造函数这是背景。然后，组件构造函数将添加图像两次，将第二个图像立即放置在第一个图像之后。

တွင် newPos() စက်တန်း တွင် အဆိုင် အရာဝတ္တု အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ အဆိုင် အရာဝတ္တု အဆိုင် အခြေအနေ စက်တန်း x စံပုံ အဆင်း အဆိုင် 0:

အက်စ်ပုံ

function component(width, height, color, x, y, type) {
  this.type = type;
  if (type == "image" || type == "background") {
    this.image = new Image();
    this.image.src = color;
  }
  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 (type == "image" || type == "background") {
      ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
      if (type == "background") {
        ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
      }
    }
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.type == "background") {
      if (this.x == -(this.width)) {
        this.x = 0;
      }
    }
  }
}

亲自试一试