Ελεγκτής Παιχνιδιού

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

掌控一切

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

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

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

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

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

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

instance

<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()">Πάνω</button>
<button onclick="movedown()">Κάτω</button>
<button onclick="moveleft()">Αριστερά</button>
<button onclick="moveright()">Δεξιά</button>

Δοκιμάστε το προσωπικά

Σταμάτημα κίνησης

Αν χρειάζεται, μπορείτε να σταματήσετε το κόκκινο κουτί όταν απελευθερώνετε το κουμπί.

Προσθέστε μια συνάρτηση που ρυθμίζει τον δείκτη ταχύτητας σε 0.

Για να αντιμετωπίσουμε τα κανονικά οθόνες και τα οθόνες لمψης, θα προσθέσουμε κώδικα για τα δύο είδη συσκευών:

instance

function stopMove() {
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">Πάνω</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">Κάτω</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">Αριστερά</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">Δεξιά</button>

Δοκιμάστε το προσωπικά

το πληκτρολόγιο ως ελεγκτής

μπορούμε επίσης να ελέγχουμε τον κόκκινο κουτί με τα πλήκτρα κατεύθυνσης του πληκτρολογίου.

γίνεται η δημιουργία μιας μεθόδου για τον έλεγχο αν πατήθηκε κάποιο κλειδί και θα myGameArea του αντικειμένου κλειδί η ιδιότητα ρυθμίζεται ως κωδικόν κλειδί. Όταν απελευθερώνεται η κουμπίδα, θα κλειδί η ιδιότητα ρυθμίζεται ως false：

instance

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

Όπως αυτό, αν πατηθεί ένας από τους πλήκτες κατεύθυνσης, μπορούμε να κινήσουμε το κόκκινο κουτί:

instance

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  Εάν (myGameArea.key και myGameArea.key == 37) {myGamePiece.speedX = -1; }
  Εάν (myGameArea.key και myGameArea.key == 39) {myGamePiece.speedX = 1; }
  Εάν (myGameArea.key και myGameArea.key == 38) {myGamePiece.speedY = -1; }
  Εάν (myGameArea.key και myGameArea.key == 40) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

Δοκιμάστε το προσωπικά

Πιέστε πολλαπλά κουμπιά

Πιέστε πολλαπλά κουμπιά

Τι γίνεται αν πατηθούν πολλαπλά κουμπιά ταυτόχρονα;

Για παράδειγμα, στο παραπάνω παράδειγμα, το στοιχείο μπορεί να κινείται μόνο οριζόντια ή κάθετα. Τώρα θέλουμε να μπορεί να κινείται και διαγώνια. myGameArea Ορίζεται ένας keys Μια λίστα, και για κάθε πιεσμένο κουμπί εισάγεται ένα στοιχείο και του δίνεται τιμή true，η τιμή παραμένει true μέχρι να σταματήσει η πίεση του κουμπιού, η τιμή είναι στο keyup Η λειτουργία παρακολούθησης γεγονότων μεταβάλλεται σε false：

instance

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;
  Εάν (myGameArea.keys και myGameArea.keys[37]) {myGamePiece.speedX = -1; }
  Εάν (myGameArea.keys και myGameArea.keys[39]) {myGamePiece.speedX = 1; }
  Εάν (myGameArea.keys και myGameArea.keys[38]) {myGamePiece.speedY = -1; }
  if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

Δοκιμάστε το προσωπικά

使用鼠标光标作为控制器

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

instance

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.canvas.style.cursor = "none"; //隐藏原始光标
    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);
  }
}

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

instance

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

Δοκιμάστε το προσωπικά

触摸屏幕来控制游戏

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

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

instance

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

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

instance

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

Δοκιμάστε το προσωπικά

画布上的控制器

我们可以绘制自己的按钮在画布上，并将它们用作控制器：

instance

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）：

instance

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 Το αντικείμενο έχει ιδιότητες που μας πληροφορούν για τις συντεταγμένες x και y του κλικ. Χρησιμοποιούμε αυτές τις ιδιότητες για να ελέγξουμε αν το κλικ έγινε σε έναν από τους μπλε κουμπιά μας.

Αυτή η νέα μέθοδος ονομάζεται clickedείναι component Μια μέθοδος του κατασκευαστή που ελέγχει αν το στοιχείο έχει κλικ.

at updateGameArea within the function, if one of the blue buttons is clicked, we will perform the necessary operations:

instance

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

Δοκιμάστε το προσωπικά