Drücken Sie die Tasten auf das rote Quadrat zu bewegen:
Erhalten Sie in der Systemsteuerung
Jetzt wollen wir das rote Quadrat zu steuern.
Fügen Sie vier Tasten, oben, unten, links und rechts.
Schreiben Sie eine Funktion für jede Taste, um die Komponente in die gewünschte Richtung zu bewegen.
Machen Sie zwei neue Eigenschaften in der component Konstruktor, und nennen sie speedX und speedY . Diese Eigenschaften werden als Geschwindigkeitsanzeigen verwendet.
Fügen Sie eine Funktion in der component Konstruktor genannt newPos() , die die verwendet speedX und speedY Eigenschaften , um die Position der Komponente ändern.
Die NEWPOS Funktion wird von der updateGameArea Funktion aufgerufen, bevor die Komponente Zeichnung:
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> Versuch es selber " Nicht bewegen
Wenn Sie möchten, können Sie das rote Quadrat Anschlag machen, wenn Sie eine Taste loslassen.
Fügen Sie eine Funktion, die die Geschwindigkeitsanzeigen auf 0 gesetzt wird.
Um mit sowohl normalen Bildschirmen und Touchscreens werden wir Code für beide Geräte hinzufügen:
Beispiel
function
stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button
omousedown="moveup()" onmouseup="stopMove()"
ontouchstart="moveup() ">UP</button>
<button
omousedown="movedown()" onmouseup="stopMove()"
ontouchstart="movedown()" >DOWN</button>
<button
omousedown="moveleft()" onmouseup="stopMove()"
ontouchstart="moveleft()" >LEFT</button>
<button
omousedown="moveright()" onmouseup="stopMove()"
ontouchstart="moveright()" >RIGHT</button>
Versuch es selber " Tastatur als Controller
Wir können auch das rote Quadrat steuern, indem Sie mit den Pfeiltasten auf der Tastatur.
Erstellen Sie eine Methode , die , wenn ein Schlüssel überprüft gedrückt wird , und stellen Sie den key des myGameArea Objekt an den Schlüsselcode. Wenn die Taste losgelassen wird, stellen Sie den key - Eigenschaft 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 bewegen, wenn eine der Pfeiltasten gedrückt werden:
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();
} Versuch es selber " Mehrere Tasten gedrückt
Was ist, wenn mehr als eine Taste gleichzeitig gedrückt?
In dem obigen Beispiel kann die Komponente nur horizontal oder vertikal zu bewegen. Jetzt wollen wir die Komponente auch diagonal bewegen.
Erstellen Sie einen keys - Array für die myGameArea Objekt, und legen Sie ein Element für jede Taste , die gedrückt wird, und geben Sie ihm den Wert true , bleibt der Wert true , bis die Taste nicht mehr gedrückt wird , der Wert wird false in 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();
} Versuch es selber " Mit der Maus-Cursor als Controller
Wenn Sie auf das rote Quadrat steuern möchten , indem Sie den Mauszeiger verwenden, fügen Sie eine Methode in myGameArea Objekt, das 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 der Maus-Cursor zu bewegen:
Beispiel
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
} Versuch es selber " Berühren Sie den Bildschirm das Spiel zu kontrollieren
Wir können auch das rote Quadrat auf einem Touch-Screen steuern.
Fügen Sie eine Methode in der myGameArea Objekt, das die x- und y - Koordinaten verwendet , wo 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 bewegen, wenn der Benutzer den Bildschirm berührt, durch den gleichen Code verwenden, wie wir für den Maus-Cursor tat:
Beispiel
function updateGameArea() {
myGameArea.clear();
if (myGameArea.touchX && myGameArea.touchY) {
myGamePiece.x = myGameArea.x;
myGamePiece.y =
myGameArea.y;
}
myGamePiece.update();
}
Versuch es selber " Controller auf der Leinwand
Wir können auch unsere eigenen Tasten auf der Leinwand zu 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, die, wenn eine Komponente herausfindet, in diesem Fall auf eine Schaltfläche wird geklickt.
Beginnen Sie mit dem Event - Listener Hinzufügen zu überprüfen , ob eine Maustaste gedrückt wird ( mousedown and mouseup ) . Um mit Touchscreens umgehen, fügen Sie auch Event - Listener zu überprüfen , ob der Bildschirm auf geklickt wird ( touchstart and 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);
}
} Nun ist die myGameArea Objekt hat Eigenschaften , die uns die x- und y-Koordinaten eines Klicks erzählt. Wir verwenden theese Eigenschaften zu überprüfen, ob der Klick auf einem unserer blauen Tasten durchgeführt wurde.
Die neue Methode wird aufgerufen , clicked , es ist ein Verfahren der ist component Konstruktor, und es wird geprüft , ob die Komponente geklickt wird.
In der updateGameArea Funktion nehmen wir die neccessarry Aktionen , wenn eine der blauen Tasten 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();
} Versuch es selber "