လက်ဆုံး အသုံး

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

掌控一切

现在我们要控制红色方块。

添加四个按钮：上、下、左、右。

为每个按钮编写一个函数，以沿选定方向移动组件。

တွင် component 构造函数中创建两个新属性，并将它们命名为 speedX နှင့် speedY。这些属性被用作速度指示器。

တွင် component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX နှင့် speedY 属性来更改组件的位置。

在绘制组件之前，从 updateGameArea 函数调用 newPos 函数：

အက်ပ်နာ

<script>
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;
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.newPos();
  myGamePiece.update();
}
function moveup() {}}
  myGamePiece.speedY -= 1;
}
function movedown() {
  myGamePiece.speedY += 1;
}
function moveleft() {
  myGamePiece.speedX -= 1;
}
function moveright() {
  myGamePiece.speedX += 1;
}
</script>
<button onclick="moveup()">UP</button>
<button onclick="movedown()">DOWN</button>
<button onclick="moveleft()">LEFT</button>
<button onclick="moveright()">RIGHT</button>

亲自试一试

ပြောင်းလဲမှု ရပ်သွားကြောင်း

အကြိမ်ဖြင့် အဆိုပါ အဆိုပါ အဆိုပါ အနီရောင် ပုံစံအ�ွဲ့ကို ရပ်နိုင်ပါသည်

အသားချိန်း အချိန်အား 0 အစား ပြင်ဆင်ပါ

အသုံးပြုသည် အဆိုပါ ဖောင်ချိန်းနှင့် ကြောင်းခြောက် အသုံးပြုသည် အတွက် ကိုယ်စားပြု၍ အဆိုပါ အရာကို အသုံးပြုပါ

အက်ပ်နာ

function stopMove() {
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">UP</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">DOWN</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RIGHT</button>

亲自试一试

ကြောင်းခြောက် အသုံးပြုသည်

ကြောင်းခြောက် အသုံးပြု၍ အနီရောင် ပုံစံအဖွဲ့ကို ပြုပြင်နိုင်ပါသည်

အဆိုပါ အရာကို အသုံးပြု၍ အကြိမ်ဖြင့် အဆိုပါ ဖောင်ချိန်းကို သိရှိလိမ့်မည် အသုံးပြုသည် myGameArea အရာ key ဖောင်ချိန်းအသုံးပြုသည် အသုံးပြုသည် အကြိမ်ဖြင့် အဆိုပါ ဖောင်ချိန်းကို ဖြိုဖျက်ကြောင်း သိရှိလိမ့်မည် key ဖောင်ချိန်းအသုံးပြုသည် false：

အက်ပ်နာ

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);
    window.addEventListener('keydown', function (e) {
      myGameArea.key = e.keyCode;
    })
    window.addEventListener('keyup', function (e) {
      myGameArea.key = false;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

这样，如果按下方向键之一，我们就可以移动红色方块：

အက်ပ်နာ

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
  if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
  if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
  if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

亲自试一试

按下多个键

如果同时按下多个键怎么办？

在上面的例子中，组件只能水平或垂直移动。现在我们希望组件也可以沿对角线移动。

为 myGameArea 对象创建一个 keys 数组，并为每个按下的键插入一个元素，并为其赋值 true，该值保持 true ，直到不再按下该键，该值在 keyup 事件监听函数中变为 false：

အက်ပ်နာ

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);
    window.addEventListener('keydown', function (e) {
      myGameArea.keys = (myGameArea.keys || []);
      myGameArea.keys[e.keyCode] = true;
    })
    window.addEventListener('keyup', function (e) {
      myGameArea.keys[e.keyCode] = false;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}
 function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
  if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
  if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
  if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

亲自试一试

使用鼠标光标作为控制器

如果您想使用鼠标光标控制红色方块，请在 myGameArea 对象中添加一个方法来更新鼠标光标的 x 和 y 坐标：

အက်ပ်နာ

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.canvas.style.cursor = "none"; //hide the original cursor
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('mousemove', function (e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

然后我们就可以使用鼠标光标移动红色方块了：

အက်ပ်နာ

function updateGameArea() {
  myGameArea.clear();
  if (myGameArea.x && myGameArea.y) {
    myGamePiece.x = myGameArea.x;
    myGamePiece.y = myGameArea.y;
  }
  myGamePiece.update();
}

亲自试一试

触摸屏幕来控制游戏

我们还可以在触摸屏上控制红色方块。

တွင် myGameArea 对象中添加一个方法，该方法使用屏幕触摸位置的 x 和 y 坐标：

အက်ပ်နာ

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);
    window.addEventListener('touchmove', function (e) {
      myGameArea.x = e.touches[0].screenX;
      myGameArea.y = e.touches[0].screenY;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

然后，当用户触摸屏幕时，我们可以使用与鼠标光标相同的代码来移动红色方块了：

အက်ပ်နာ

function updateGameArea() {
  myGameArea.clear();
  if (myGameArea.x && myGameArea.y) {
    myGamePiece.x = myGameArea.x;
    myGamePiece.y = myGameArea.y;
  }
  myGamePiece.update();
}

亲自试一试

အစိုးရပ် ပေါ်တွင် အထိပ်စား အုပ်ချုပ်သည့် အရာများ

ကျွန်တော်တို့ အစိုးရပ် ပေါ်တွင် ကိုယ်ပိုင် ဘင့် ကို ဖြင့်ပြီး အထိပ်စား အုပ်ချုပ်သည့် အရာများ အား အသုံးပြုနိုင်ပါသည်:

အက်ပ်နာ

function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 120);
  myUpBtn = new component(30, 30, "blue", 50, 10);
  myDownBtn = new component(30, 30, "blue", 50, 70);
  myLeftBtn = new component(30, 30, "blue", 20, 40);
  myRightBtn = new component(30, 30, "blue", 80, 40);
  myGameArea.start();
}

添加一个新函数，用于确定某个组件（在本例中是一个按钮）是否被单击。

首先添加事件侦听器来检查是否单击了鼠标按钮（mousedown နှင့် mouseup）。如需应对触摸屏，还需要添加事件侦听器来检查屏幕是否被单击（touchstart နှင့် touchend）：

အက်ပ်နာ

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);
    window.addEventListener('mousedown', function (e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    })
    window.addEventListener('mouseup', function (e) {
      myGameArea.x = false;
      myGameArea.y = false;
    })
    window.addEventListener('touchstart', function (e) {
      myGameArea.x = e.pageX;
      myGameArea.y = e.pageY;
    })
    window.addEventListener('touchend', function (e) {
      myGameArea.x = false;
      myGameArea.y = false;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

ယခု myGameArea အရာဝတ္တုကို သူတို့က လုပ်ကိုင်တာကို လုပ်ကိုင်တာကို ချီတင်ထားသည်။ အကြောင်းမှာ သူတို့က လုပ်ကိုင်တာကို လုပ်ကိုင်တာကို လုပ်ကိုင်တာကို ချီတင်ထားသည်။

အဆိုပါ အတွက် အမည်ပြုထားသော တင်ပြခြင်း clickedသည် component ကိရိယာတစ်ခုကို လုပ်ကိုင်တာကို စစ်ဆေးသည့် စနစ်တစ်ခုဖြစ်ပါသည်。

တွင် updateGameArea လုပ်ငန်းများတွင် အကယ်၍ ကြီးမားသော အက်ပ်နာ တစ်ခုခု ကို လုပ်ကန့်မှုပြုလျှင် လိုအပ်သော လုပ်ဆောင်ချက်များ ပြုလုပ်ပါ:

အက်ပ်နာ

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.clicked = function() {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var clicked = true;
    if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
      clicked = false;
    }
    return clicked;
  }
}
function updateGameArea() {
  myGameArea.clear();
  if (myGameArea.x && myGameArea.y) {
    if (myUpBtn.clicked()) {
      myGamePiece.y -= 1;
    }
    if (myDownBtn.clicked()) {
      myGamePiece.y += 1;
    }
    if (myLeftBtn.clicked()) {
      myGamePiece.x += -1;
    }
    if (myRightBtn.clicked()) {
      myGamePiece.x += 1;
    }
  }
  myUpBtn.update();
  myDownBtn.update();
  myLeftBtn.update();
  myRightBtn.update();
  myGamePiece.update();
}

亲自试一试