Contrôleurs de jeu
Appuyez sur les boutons pour déplacer le carré rouge :
Prenez le contrôle
Maintenant, nous voulons contrôler le carré rouge.
Ajoutez quatre boutons, haut, bas, gauche et droite.
Écrivez une fonction pour chaque bouton pour déplacer le composant dans la direction sélectionnée.
Créez deux nouvelles propriétés dans le componentconstructeur et appelez-les
speedX
et speedY. Ces propriétés sont utilisées comme indicateurs de vitesse.
Ajoutez une fonction dans le componentconstructeur, appelée
newPos(), qui utilise les propriétés speedXet speedY
pour modifier la position du composant.
La fonction newpos est appelée depuis la fonction updateGameArea avant de dessiner le composant :
Exemple
<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>
Arrête de bouger
Si vous le souhaitez, vous pouvez faire en sorte que le carré rouge s'arrête lorsque vous relâchez un bouton.
Ajoutez une fonction qui mettra les indicateurs de vitesse à 0.
Pour traiter à la fois les écrans normaux et les écrans tactiles, nous ajouterons du code pour les deux appareils :
Exemple
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>
Clavier comme contrôleur
Nous pouvons également contrôler le carré rouge en utilisant les touches fléchées du clavier.
Créez une méthode qui vérifie si une touche est enfoncée et définissez la key
propriété de l' myGameAreaobjet sur le code de la touche. Lorsque la clé est relâchée, définissez la keypropriété surfalse :
Exemple
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);
}
}
Ensuite, nous pouvons déplacer le carré rouge si l'une des touches fléchées est enfoncée :
Exemple
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();
}
Plusieurs touches enfoncées
Que faire si plusieurs touches sont enfoncées en même temps ?
Dans l'exemple ci-dessus, le composant ne peut se déplacer qu'horizontalement ou verticalement. Maintenant, nous voulons que le composant se déplace également en diagonale.
Créez un
keys tableau pour l' myGameAreaobjet et insérez un élément pour chaque touche enfoncée et donnez-lui la valeur true, la valeur reste true jusqu'à ce que la touche ne soit plus enfoncée, la valeur devient
falsedans la fonction d'écoute d' événement keyup :
Exemple
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();
}
Utilisation du curseur de la souris comme contrôleur
Si vous souhaitez contrôler le carré rouge à l'aide du curseur de la souris, ajoutez une méthode dans myGameAreal'objet qui met à jour les coordonnées x et y du curseur de la souris :.
Exemple
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);
}
}
Ensuite, nous pouvons déplacer le carré rouge à l'aide du curseur de la souris :
Exemple
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Touchez l'écran pour contrôler le jeu
On peut aussi contrôler le carré rouge sur un écran tactile.
Ajoutez une méthode dans l' myGameAreaobjet qui utilise les coordonnées x et y de l'endroit où l'écran est touché :
Exemple
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);
}
}
Ensuite, nous pouvons déplacer le carré rouge si l'utilisateur touche l'écran, en utilisant le même code que nous avons fait pour le curseur de la souris :
Exemple
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Contrôleurs sur la toile
Nous pouvons également dessiner nos propres boutons sur le canevas et les utiliser comme contrôleurs :
Exemple
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();
}
Ajoutez une nouvelle fonction qui détermine si un composant, dans ce cas un bouton, est cliqué.
Commencez par ajouter des écouteurs d'événements pour vérifier si un bouton de la souris est cliqué ( mousedownet mouseup). Pour traiter les écrans tactiles, ajoutez également des écouteurs d'événement pour vérifier si l'écran est cliqué ( touchstartet touchend):
Exemple
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);
}
}
Maintenant, l' myGameAreaobjet a des propriétés qui nous indiquent les coordonnées x et y d'un clic. Nous utilisons ces propriétés pour vérifier si le clic a été effectué sur l'un de nos boutons bleus.
La nouvelle méthode s'appelle clicked, c'est une méthode du
componentconstructeur et elle vérifie si le composant est cliqué.
Dans la updateGameAreafonction, nous effectuons les actions nécessaires si l'un des boutons bleus est cliqué :
Exemple
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();
}