Gamecontroller
Drücke die Knöpfe, um das rote Quadrat zu bewegen:
Übernehmen Sie die Kontrolle
Jetzt wollen wir das rote Quadrat kontrollieren.
Fügen Sie vier Schaltflächen hinzu, nach oben, unten, links und rechts.
Schreiben Sie für jede Schaltfläche eine Funktion, um die Komponente in die ausgewählte Richtung zu bewegen.
Erstellen Sie zwei neue Eigenschaften im componentKonstruktor und nennen Sie sie
speedX
und speedY. Diese Eigenschaften werden als Geschwindigkeitsindikatoren verwendet.
Fügen Sie im componentKonstruktor eine Funktion mit dem Namen hinzu
newPos(), die die Eigenschaften speedXund speedY
verwendet, um die Position der Komponente zu ändern.
Die newpos-Funktion wird von der updateGameArea-Funktion aufgerufen, bevor die Komponente gezeichnet wird:
Beispiel
<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()">UP</button>
<button onclick="movedown()">DOWN</button>
<button onclick="moveleft()">LEFT</button>
<button onclick="moveright()">RIGHT</button>
Nicht bewegen
Wenn Sie möchten, können Sie das rote Quadrat stoppen, wenn Sie eine Taste loslassen.
Fügen Sie eine Funktion hinzu, die die Geschwindigkeitsanzeigen auf 0 setzt.
Um sowohl mit normalen Bildschirmen als auch mit Touchscreens umzugehen, fügen wir Code für beide Geräte hinzu:
Beispiel
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">UP</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">DOWN</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RIGHT</button>
Tastatur als Controller
Wir können das rote Quadrat auch mit den Pfeiltasten auf der Tastatur steuern.
Erstellen Sie eine Methode, die prüft, ob eine Taste gedrückt wird, und legen Sie die key
Eigenschaft des myGameAreaObjekts auf den Tastencode fest. Wenn die Taste losgelassen wird, setzen Sie die keyEigenschaft auf false:
Beispiel
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);
}
}
Dann können wir das rote Quadrat verschieben, wenn eine der Pfeiltasten gedrückt wird:
Beispiel
function updateGameArea() {
myGameArea.clear();
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();
}
Mehrere Tasten gedrückt
Was passiert, wenn mehr als eine Taste gleichzeitig gedrückt wird?
Im obigen Beispiel kann sich die Komponente nur horizontal oder vertikal bewegen. Jetzt wollen wir, dass sich die Komponente auch diagonal bewegt.
Erstellen Sie ein
keys Array für das myGameAreaObjekt, und fügen Sie ein Element für jede gedrückte Taste ein, und geben Sie ihm den Wert true, der Wert bleibt wahr, bis die Taste nicht mehr gedrückt wird, der Wert wird
falsein der Keyup- Ereignis-Listener-Funktion:
Beispiel
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;
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();
}
Verwendung des Mauszeigers als Controller
Wenn Sie das rote Quadrat mit dem Mauszeiger steuern möchten, fügen Sie eine Methode in myGameAreaObjekt hinzu, die die x- und y-Koordinaten des Mauszeigers aktualisiert:.
Beispiel
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.canvas.style.cursor = "none"; //hide the original 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);
}
}
Dann können wir das rote Quadrat mit dem Mauszeiger verschieben:
Beispiel
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Berühre den Bildschirm, um das Spiel zu steuern
Wir können das rote Quadrat auch auf einem Touchscreen steuern.
Fügen Sie dem Objekt eine Methode myGameAreahinzu, die die x- und y-Koordinaten der Stelle verwendet, an der der Bildschirm berührt wird:
Beispiel
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);
}
}
Dann können wir das rote Quadrat verschieben, wenn der Benutzer den Bildschirm berührt, indem wir denselben Code wie für den Mauszeiger verwenden:
Beispiel
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Controller auf der Leinwand
Wir können auch unsere eigenen Schaltflächen auf die Leinwand zeichnen und sie als Controller verwenden:
Beispiel
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();
}
Fügen Sie eine neue Funktion hinzu, die ermittelt, ob auf eine Komponente, in diesem Fall eine Schaltfläche, geklickt wird.
Beginnen Sie mit dem Hinzufügen von Ereignis-Listenern, um zu überprüfen, ob eine Maustaste gedrückt wird ( mousedownund mouseup). Um mit Touchscreens umzugehen, fügen Sie auch Ereignis-Listener hinzu, um zu überprüfen, ob auf den Bildschirm geklickt wird ( touchstartund touchend):
Beispiel
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);
}
}
Jetzt myGameAreahat das Objekt Eigenschaften, die uns die x- und y-Koordinaten eines Klicks mitteilen. Anhand dieser Eigenschaften prüfen wir, ob der Klick auf einen unserer blauen Buttons erfolgt ist.
Die neue Methode heißt clicked, ist eine Methode des
componentKonstruktors und prüft, ob auf die Komponente geklickt wird.
In der updateGameAreaFunktion führen wir die notwendigen Aktionen aus, wenn auf eine der blauen Schaltflächen geklickt wird:
Beispiel
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();
}