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.
Ecrire une fonction pour chaque bouton pour déplacer le composant dans la direction choisie.
Faire deux nouvelles propriétés dans le component constructeur, et les appeler speedX et speedY . Ces propriétés sont utilisées comme indicateurs de vitesse.
Ajout d' une fonction dans le component constructeur, appelé newPos() , qui utilise le speedX et speedY propriétés pour modifier la position du composant.
La fonction newpos est appelée à partir de la fonction de 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> Essayez - le vous - même » Arrête de bouger
Si vous voulez, vous pouvez faire l'arrêt de carré rouge lorsque vous relâchez un bouton.
Ajouter une fonction qui va définir les indicateurs de vitesse à 0.
Pour faire face à deux écrans normaux et les écrans tactiles, nous allons ajouter du code pour les deux appareils:
Exemple
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>
Essayez - le vous - même » Clavier en tant que contrôleur
Nous pouvons également contrôler le carré rouge en utilisant les touches fléchées du clavier.
Créer une méthode qui vérifie si une touche est enfoncée, et définir la key de propriété du myGameArea objet au code clé. Lorsque la touche est relâchée, définissez la key propriété à false :
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 sont pressées:
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();
} Essayez - le vous - même » Touches multiples Pressée
Que faire si plus d'une touche est pressée en même temps?
Dans l'exemple ci-dessus, le composant peut se déplacer horizontalement ou verticalement. Maintenant, nous voulons que le composant à déplacer également en diagonale.
Créer une keys réseau pour le myGameArea objet, et insérer un élément pour chaque clé qui est pressé, et lui donner la valeur true , la valeur reste vrai jusqu'à ce que la clé est plus pressé, la valeur devient false dans la fonction keyup écouteur d' événement:
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();
} Essayez - le vous - même » Utilisation du curseur de la souris en tant que contrôleur
Si vous souhaitez contrôler le carré rouge en utilisant le curseur de la souris, ajoutez une méthode de myGameArea 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();
} Essayez - le vous - même » Touchez l'écran pour contrôler le jeu
Nous pouvons également contrôler le carré rouge sur un écran tactile.
Ajouter une méthode dans le myGameArea objet 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.touchX && myGameArea.touchY) {
myGamePiece.x = myGameArea.x;
myGamePiece.y =
myGameArea.y;
}
myGamePiece.update();
}
Essayez - le vous - même » Contrôleurs sur la toile
Nous pouvons également tirer nos propres boutons sur la toile, et de les utiliser en tant que 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();
}Ajouter une nouvelle fonction qui figure 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é ( mousedown and mouseup ) . Pour faire face à des écrans tactiles, également ajouter des écouteurs d'événements pour vérifier si l'écran est cliqué ( touchstart and 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 , le myGameArea objet a des propriétés qui nous indique les coordonnées y d'un clic x et. Nous utilisons theese propriétés pour vérifier si le clic a été effectué sur l'un de nos boutons bleus.
La nouvelle méthode est appelée clicked , il est une méthode de la component constructeur, et il vérifie si le composant est cliqué.
Dans la updateGameArea fonction, nous prenons les mesures neccessarry 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();
} Essayez - le vous - même »