Game Controller
- Vorige Pagina Game Componenten
- Volgende Pagina Game Obstacles
按下按钮可移动红色方块：
掌控一切
现在我们要控制红色方块。
添加四个按钮：上、下、左、右。
为每个按钮编写一个函数，以沿选定方向移动组件。
在 component 构造函数中创建两个新属性，并将它们命名为 speedX en speedY。这些属性被用作速度指示器。
在 component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX en 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()">OMLAAG</button>
<button onclick="movedown()">OMHOOG</button>
<button onclick="moveleft()">LINKS</button>
<button onclick="moveright()">RECHTS</button>
Stoppen met bewegen
Indien nodig kunt u de rode blok stoppen wanneer de knop wordt losgelaten.
Voeg een functie toe om de snelheidsindicator in te stellen op 0.
Om zowel gewone schermen als touchscreens aan te pakken, voegen we code toe voor beide apparaten:
实例
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">OMLAAG</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">OMHOOG</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LINKS</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RECHTS</button>
Toetsenbord als controller
We kunnen ook met de richtingstoetsen op het toetsenbord de rode blok besturen.
maak een methode om te controleren of een bepaalde toets is ingedrukt en stel myGameArea het object key Eigenschap ingesteld als toetscode. Wanneer een knop wordt losgelaten, wordt key Eigenschap ingesteld als 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);
}
}
op deze manier, als een van de richttoetsen wordt ingedrukt, kunnen we de rode方块bewegen:
实例
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
als (myGameArea.key en myGameArea.key == 37) {myGamePiece.speedX = -1; }
als (myGameArea.key en myGameArea.key == 39) {myGamePiece.speedX = 1; }
als (myGameArea.key en myGameArea.key == 38) {myGamePiece.speedY = -1; }
als (myGameArea.key en myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
meerdere toetsen indrukken
Wat als meerdere toetsen tegelijkertijd worden ingedrukt?
in het bovenstaande voorbeeld kunnen componenten alleen horizontaal of verticaal bewegen. Nu willen we dat het component ook diagonaal kan bewegen.
voor myGameArea het object een keys het array, en voeg een element toe voor elke ingedrukte knop en geef het een waarde true，deze waarde blijft true totdat de knop niet meer wordt ingedrukt, de waarde in keyup de event listener functie wordt 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;
als (myGameArea.keys en myGameArea.keys[37]) {myGamePiece.speedX = -1; }
als (myGameArea.keys en myGameArea.keys[39]) {myGamePiece.speedX = 1; }
als (myGameArea.keys en myGameArea.keys[38]) {myGamePiece.speedY = -1; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
Gebruik de muiscursor als controller
Als je de rode方块 met de muiscursor wilt besturen, kies dan myGameArea Voeg een methode toe aan het object om de x- en y-coordinaten van de muiscursor bij te werken:
实例
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.canvas.style.cursor = "none"; //verberg de oorspronkelijke 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);
}
}
Daarna kunnen we de rode方块 met de muiscursor verplaatsen:
实例
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Raak het scherm aan om het spel te besturen
We kunnen ook de rode方块 op het aanraakscherm besturen.
在 myGameArea Voeg een methode toe aan het object die de x- en y-coordinaten van het schermtouchpunt gebruikt:
实例
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);
}
}
Daarna kunnen we de code gebruiken die gelijk is aan de muiscursor om de rode方块 te verplaatsen wanneer de gebruiker het scherm aanraakt:
实例
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Controleurs op het canvas
We kunnen ook onze eigen knoppen tekenen op het canvas en ze gebruiken als controllers:
实例
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();
}
Voeg een nieuwe functie toe om te bepalen of een component (in dit geval een knop) is geklikt.
Voordat je een event listener toevoegt om te controleren of een muisknop is geklikt（mousedown en mouseup）。Om touchscreens aan te pakken, moeten er ook event listeners worden toegevoegd om te controleren of het scherm is geklikt（touchstart en 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);
}
}
Nu myGameArea Het object heeft eigenschappen die ons kunnen vertellen op welke x- en y-coordinaten het is geklikt. We gebruiken deze eigenschappen om te controleren of er op een van onze blauwe knoppen is geklikt.
Deze nieuwe methode heet clickedis component Een methode van de constructor die controleert of een component is geklikt.
在 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();
}
- Vorige Pagina Game Componenten
- Volgende Pagina Game Obstacles
