Pelin ohjain

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

掌控一切

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

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

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

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

sivulla component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX ja 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()">Ylös</button>
<button onclick="movedown()">ALAS</button>
<button onclick="moveleft()">VASEN</button>
<button onclick="moveright()">OIKEA</button>

Kokeile itse

Pysäytä liikkuminen

Jos tarpeen, voit pysäyttää punaisen neliön, kun napin vapautetaan.

Lisäämään funktion, joka asettaa nopeusindikaattorin arvoksi 0.

Vastaamaan tavallisiin näyttöihin ja kosketusnäyttöihin, lisäämme koodia molemmille laitteille:

实例

function stopMove() {
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">Ylös</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">ALAS</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">VASEN</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">OIKEA</button>

Kokeile itse

Näppäimistö ohjaimena

voimme käyttää näppäimistön suuntanäppäimiä punaisen neliön ohjaamiseen.

luodaan metodi tarkistamaan onko jotain näppäintä painettuna ja myGameArea olion avain Asetetaan ominaisuus avainkoodeiksi. Kun näppäin vapautetaan, avain Asetetaan ominaisuus 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;
  jos (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
  jos (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
  jos (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
  jos (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
}

Kokeile itse

按下多个键

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

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

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

Kokeile itse

Käytä hiiren osoittimena ohjainta

Jos haluat käyttää hiiren osoittimen hallitsemiseen punaista laatikkoa, valitse myGameArea Lisäämällä olioon menetelmä päivittääksesi hiiren osoittimen x- ja y-koordinaatit:

实例

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

Sitten voimme käyttää hiiren osoittimen liikuttamaan punaista laatikkoa:

实例

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

Kokeile itse

Koskettele näyttöä ohjataksesi peliä

Voimme myös hallita punaista laatikkoa kosketusnäytöllä.

sivulla myGameArea Lisäämällä olioon menetelmä, joka käyttää näytön kosketuspaikan x- ja y-koordinaatteja:

实例

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

Sitten, kun käyttäjä koskettaa näyttöä, voimme käyttää samaa koodia kuin hiiren osoittimen liikuttamiseen liikkua punaista laatikkoa:

实例

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

Kokeile itse

Taulun ohjaimet

Voimme myös piirtää omia painikkeitamme taululle ja käyttää niitä ohjaintenä:

实例

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

Lisää uusi funktio, joka määrittää, onko tietty komponentti (tässä tapauksessa painike) napsautettu。

Ensimmäinen askel on lisätä tapahtumien kuuntelijoita tarkistamaan, onko napsautettu hiiren painiketta (mousedown ja mouseup）。Jos haluat käsitellä kosketusnäyttöä, sinun täytyy lisätä tapahtumien kuuntelijoita tarkistamaan, onko näyttöä napsautettu (touchstart ja 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);
  }
}

Nyt myGameArea Objekti saa ominaisuuden, joka kertoo napsautuksen x- ja y-koordinaatit. Käytämme näitä ominaisuuksia tarkistamaan, onko napsautus suoritettu yhdellä jostakin sinisistä painikkeista.

Tämä uusi metodi kutsutaan clickedon component Konstruktori-metodi, joka tarkistaa, onko komponentti napsautettu.

sivulla updateGameArea Funktiolla, jos yksi sinisistä painikkeista napsautetaan, suoritetaan tarvittavat toimenpiteet:

实例

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

Kokeile itse