Oyun Kontrolleri

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

掌控一切

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

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

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

içinde component 构造函数中创建两个新属性，并将它们命名为 speedX ve speedY。这些属性被用作速度指示器。

içinde component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX ve speedY 属性来更改组件的位置。

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

Örnek

<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.güncelle = 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 Temizle();
  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()">YUKARI</button>
<button onclick="movedown()">AŞAĞI</button>
<button onclick="moveleft()">SOL</button>
<button onclick="moveright()">SAĞ</button>

Kişisel olarak deneyin

Hareket durdur

Gerekirse, düğmeyi bıraktığınızda kırmızı bloğu durdurabilirsiniz.

Hız göstergesini 0'a ayarlayacak bir fonksiyon ekleyin.

Normal ekranlar ve dokunmatik ekranlar için, her iki cihaz için de kod ekleyeceğiz:

Örnek

function stopMove() {
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">YUKARI</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">AŞAĞI</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">SOL</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">SAĞ</button>

Kişisel olarak deneyin

Klavye olarak kontrolör

Kırmızı bloğu yönlendirmek için klavyedeki yön tuşlarını kullanabiliriz.

Bir method oluşturarak belirli bir tuşa basılıp basılmadığını kontrol edebilir ve myGameArea nesnenin key Özellik, anahtar kodunu ayarlar. Tuşa basıldığında, key Özellik ayarlanmıştır false：

Örnek

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

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

Örnek

function updateGameArea() {
  myGameArea Temizle();
  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();
}

Kişisel olarak deneyin

按下多个键

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

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

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

Örnek

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

Kişisel olarak deneyin

Fare işaretçisini kontrolör olarak kullan

Eğer fare işaretçisini kırmızı küpü kontrol etmek istiyorsanız, lütfen: myGameArea X ve y koordinatlarını güncellemek için bir yöntem ekleyin:

Örnek

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.canvas.style.cursor = "none"; //orijinal imleyiciyi gizle
    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);
  }
}

Sonra kırmızı küpü fare işaretçisiyle hareket ettirebiliriz:

Örnek

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

Kişisel olarak deneyin

Ekranı dokunarak oyunu kontrol et

Ayrıca, dokunmatik ekranda kırmızı küpü kontrol edebiliriz.

içinde myGameArea Bir yöntem ekleyerek, ekran dokunuş konumunun x ve y koordinatlarını kullanabiliriz:

Örnek

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

Sonra, kullanıcı ekranı dokunduğunda, kırmızı küpü hareket ettirmek için fare işaretçisiyle aynı kodu kullanabiliriz:

Örnek

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

Kişisel olarak deneyin

Canvastaki kontrolörler

Kendi butonlarımızı çizip, bunları kontrolör olarak kullanabiliriz:

Örnek

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

Bir yeni fonksiyon ekleyin, belirli bir bileşenin (örneğin, bir düğme) tıklanıp tıklanmadığını belirlemek için.

Öncelikle, fare butonunun tıklanıp tıklanmadığını kontrol etmek için olay dinleyicisi ekleyin (mousedown ve mouseup）。Dokunmatik ekranı desteklemek için, ekranın tıklanıp tıklanmadığını kontrol etmek için olay dinleyicileri eklemek gerekiyor (touchstart ve touchend）：

Örnek

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

Şimdi myGameArea x ve y koordinatlarını bizim tıkladığımız bir mavi düğmeye tıklanmış olup olmadığını kontrol etmek için kullandığımız bir özellik.

Bu yeni yöntem clickedolmakta component Bir yapıcı fonksiyon yöntemi, bileşenin tıklanıp tıklanmadığını kontrol eder.

içinde updateGameArea Fonksiyonunda, mavi düğmelerden birine tıklanırsa gerekli işlemleri gerçekleştireceğiz:

Örnek

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.güncelle = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.tıkladı = function() {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var tıkladı = true;
    if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
      tıkladı = false;
    }
    return tıkladı;
  }
}
function updateGameArea() {
  myGameArea Temizle();
  if (myGameArea.x && myGameArea.y) {
    if (myUpBtn.tıkladı()) {
      myGamePiece.y -= 1;
    }
    if (myDownBtn.tıkladı()) {
      myGamePiece.y += 1;
    }
    if (myLeftBtn.tıkladı()) {
      myGamePiece.x += -1;
    }
    if (myRightBtn.tıkladı()) {
      myGamePiece.x += 1;
    }
  }
  myUpBtn.güncelle();
  myDownBtn.güncelle();
  myLeftBtn.update();
  myRightBtn.update();
  myGamePiece.update();
}

Kişisel olarak deneyin