Controller di gioco
Premi i pulsanti per spostare il quadrato rosso:
Prendi il controllo
Ora vogliamo controllare il quadrato rosso.
Aggiungi quattro pulsanti, su, giù, sinistra e destra.
Scrivere una funzione per ciascun pulsante per spostare il componente nella direzione selezionata.
Crea due nuove proprietà nel componentcostruttore e chiamale
speedX
e speedY. Queste proprietà vengono utilizzate come indicatori di velocità.
Aggiungi una funzione nel componentcostruttore, chiamata
newPos(), che usa le proprietà speedXe speedY
per modificare la posizione del componente.
La funzione newpos viene chiamata dalla funzione updateGameArea prima di disegnare il componente:
Esempio
<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>
Fermati
Se vuoi, puoi fermare il quadrato rosso quando rilasci un pulsante.
Aggiungere una funzione che imposterà gli indicatori di velocità su 0.
Per gestire sia gli schermi normali che i touch screen, aggiungeremo il codice per entrambi i dispositivi:
Esempio
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>
Tastiera come controller
Possiamo anche controllare il quadrato rosso usando i tasti freccia sulla tastiera.
Creare un metodo che controlli se viene premuto un tasto e impostare la key
proprietà myGameAreadell'oggetto sul codice chiave. Quando la chiave viene rilasciata, impostare la keyproprietà su false:
Esempio
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);
}
}
Quindi possiamo spostare il quadrato rosso se viene premuto uno dei tasti freccia:
Esempio
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();
}
Più tasti premuti
Cosa succede se si premono più tasti contemporaneamente?
Nell'esempio sopra, il componente può muoversi solo orizzontalmente o verticalmente. Ora vogliamo che il componente si muova anche in diagonale.
Crea un
keys array per l' myGameAreaoggetto e inserisci un elemento per ogni tasto premuto e assegnagli il valore true, il valore rimane true fino a quando il tasto non viene più premuto, il valore diventa
falsenella funzione listener di eventi keyup :
Esempio
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();
}
Utilizzo del cursore del mouse come controller
Se vuoi controllare il quadrato rosso usando il cursore del mouse, aggiungi un metodo in myGameAreaoggetto che aggiorni le coordinate xey del cursore del mouse:.
Esempio
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);
}
}
Quindi possiamo spostare il quadrato rosso usando il cursore del mouse:
Esempio
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Tocca lo schermo per controllare il gioco
Possiamo anche controllare il quadrato rosso su un touch screen.
Aggiungi un metodo myGameAreanell'oggetto che utilizza le coordinate xey del punto in cui viene toccato lo schermo:
Esempio
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);
}
}
Quindi possiamo spostare il quadrato rosso se l'utente tocca lo schermo, utilizzando lo stesso codice utilizzato per il cursore del mouse:
Esempio
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Controller sulla tela
Possiamo anche disegnare i nostri pulsanti sulla tela e usarli come controller:
Esempio
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();
}
Aggiungi una nuova funzione che calcola se un componente, in questo caso un pulsante, viene cliccato.
Inizia aggiungendo listener di eventi per verificare se viene fatto clic su un pulsante del mouse ( mousedowne mouseup). Per gestire i touch screen, aggiungi anche listener di eventi per verificare se lo schermo è cliccato su ( touchstarte touchend):
Esempio
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);
}
}
Ora l' myGameAreaoggetto ha proprietà che ci dicono le coordinate x e y di un clic. Utilizziamo queste proprietà per verificare se il clic è stato eseguito su uno dei nostri pulsanti blu.
Viene chiamato il nuovo metodo clicked, è un metodo del
componentcostruttore e controlla se il componente viene cliccato.
Nella updateGameAreafunzione, eseguiamo le azioni necessarie se si fa clic su uno dei pulsanti blu:
Esempio
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();
}