Game controllers

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

掌控一切

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

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

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

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

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

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

eksempel

<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() {}}
  minSpilDel.hastighedY -= 1;
{}
function movedown() {
  minSpilDel.hastighedY += 1;
{}
function moveleft() {
  minSpilDel.hastighedX -= 1;
{}
function moveright() {
  minSpilDel.hastighedX += 1;
{}
</script>
<button onclick="moveup()">OP</button>
<button onclick="movedown()">NED</button>
<button onclick="moveleft()">VENSTRE</button>
<button onclick="moveright()">HØJRE</button>

Try it yourself

Stop bevægelse

Hvis nødvendigt kan du stoppe den røde blok, når du frigiver knappen.

Tilføj en funktion til at sætte hastighedsmåleren til 0.

For at håndtere både almindelige skærme og berøringsskærme, tilføjer vi kode til begge typer enheder:

eksempel

function stopMove() {
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
{}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">OP</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">NED</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">VENSTRE</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">HØJRE</button>

Try it yourself

Tastatur som kontrol

Vi kan også kontrollere den røde blok med piletasterne på tastaturet.

opret en metode til at kontrollere om en tast er trykket ned, og gem myGameArea objektets tastekode egenskaber indstilles til tastekoden. Når tasten løsnes, vil tastekode egenskaber indstilles til false：

eksempel

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

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

eksempel

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

Try it yourself

按下多个键

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

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

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

eksempel

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

Try it yourself

Brug musemarkøren som kontrol

Hvis du vil bruge musemarkøren til at kontrollere den røde firkant, skal du myGameArea Tilføj en metode i objektet til at opdatere musemarkørens x og y koordinater:

eksempel

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.canvas.style.cursor = "none"; //skjul den oprindelige markør
    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);
  {}
{}

Så kan vi bruge musemarkøren til at flytte den røde firkant:

eksempel

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

Try it yourself

Rør skærmen for at kontrollere spillet

Vi kan også kontrollere den røde firkant på berøringsskærmen.

i myGameArea Tilføj en metode i objektet, der bruger skærmens berøringsskoordinates x og y:

eksempel

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

Så når brugeren rører skærmen, kan vi bruge samme kode som for musemarkøren til at flytte den røde firkant:

eksempel

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

Try it yourself

Kontrollerere på canvas

Vi kan også tegne vores egne knapper på canvas og bruge dem som kontrollerere:

eksempel

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

Tilføj en ny funktion til at afgøre, om en komponent（i dette tilfælde en knap）er blevet klikket。

Først tilføj en lytter til at tjekke, om der er blevet klikket på en museknap（mousedown og mouseup）。For at håndtere berøringsskærme skal der også tilføjes lyttere til at tjekke, om skærmen er blevet klikket（touchstart og touchend）：

eksempel

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

nu myGameArea objektet har egenskaber, der kan fortælle os x- og y-coordinaterne for klikket. Vi bruger disse egenskaber til at tjekke, om klikket blev udført på en af vores blå knapper.

Denne nye metode hedder clickeder component En metode for konstruktøren, der tjekker om komponenten er blevet klikket.

i updateGameArea i funktionen, hvis der klikkes på en af de blå knapper, vil vi udføre de nødvendige handlinger:

eksempel

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

Try it yourself