Contrôleur de jeu
- Page précédente Composants de jeu
- Page suivante Obstacles de jeu
按下按钮可移动红色方块：
掌控一切
现在我们要控制红色方块。
添加四个按钮：上、下、左、右。
为每个按钮编写一个函数，以沿选定方向移动组件。
à component 构造函数中创建两个新属性，并将它们命名为 speedX et speedY。这些属性被用作速度指示器。
à component 构造函数中添加一个名为 newPos() 的函数，该函数使用 speedX et speedY 属性来更改组件的位置。
在绘制组件之前，从 updateGameArea 函数调用 newPos 函数：
实例
<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()">EN HAUT</button>
<button onclick="movedown()">EN BAS</button>
<button onclick="moveleft()">GAUCHE</button>
<button onclick="moveright()">DROITE</button>
Arrêter le déplacement
Si nécessaire, vous pouvez arrêter le déplacement du carré rouge lors de la libération du bouton.
Ajouter une fonction pour régler l'indicateur de vitesse à 0.
Pour faire face aux écrans normaux et aux écrans tactiles, nous ajoutons du code pour ces deux types d'appareils :
实例
function stopMove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">EN HAUT</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">EN BAS</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">GAUCHE</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">DROITE</button>
Le clavier en tant que contrôleur
Nous pouvons également contrôler le carré rouge à l'aide des touches de direction sur le clavier.
créer une méthode pour vérifier si une touche est appuyée et pour myGameArea l'objet key les propriétés sont réglées en code de touche. Lorsque la touche est relâchée, key les propriétés sont réglées en false：
实例
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);
}
}
Ainsi, si l'une des touches de direction est appuyée, nous pouvons déplacer le carré rouge :
实例
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
si (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
si (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
si (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
si (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
Appuyer sur plusieurs touches
Que faire si plusieurs touches sont appuyées en même temps ?
dans cet exemple, le composant ne peut se déplacer que horizontalement ou verticalement. Maintenant, nous voulons que le composant puisse également se déplacer en diagonale.
pour myGameArea créer un keys dans un tableau, et assignée à chaque touche appuyée true， cette valeur reste true jusqu'à ce que le bouton ne soit plus appuyé, cette valeur est insérée dans keyup la fonction d'écoute des événements devient false：
实例
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;
si (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
si (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
si (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
myGamePiece.newPos();
myGamePiece.update();
}
Utiliser le curseur souris comme contrôleur
Si vous souhaitez utiliser le curseur souris pour contrôler le carré rouge, veuillez myGameArea Ajouter une méthode à l'objet pour mettre à jour les coordonnées x et y du curseur souris :
实例
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.canvas.style.cursor = "none"; //cacher le curseur original
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 utiliser le curseur souris pour déplacer le carré rouge :
实例
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
Nous pouvons également contrôler le carré rouge sur un écran tactile.
à myGameArea Ajouter une méthode à l'objet, qui utilise les coordonnées x et y de l'endroit où l'utilisateur touche l'écran :
实例
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, lorsque l'utilisateur touche l'écran, nous pouvons utiliser le même code que pour le curseur souris pour déplacer le carré rouge :
实例
function updateGameArea() {
myGameArea.clear();
if (myGameArea.x && myGameArea.y) {
myGamePiece.x = myGameArea.x;
myGamePiece.y = myGameArea.y;
}
myGamePiece.update();
}
Contrôleurs sur le canevas
Nous pouvons également dessiner nos propres boutons sur le canevas et les utiliser en tant que contrôleur :
实例
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 pour déterminer si un composant (dans cet exemple, un bouton) a été cliqué.
Tout d'abord, ajoutez un écouteur d'événement pour vérifier si le bouton de la souris a été cliqué（mousedown et mouseup）。Pour gérer les écrans tactiles, il est nécessaire d'ajouter des écouteurs d'événements pour vérifier si l'écran a été cliqué（touchstart et touchend）：
实例
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 myGameArea L'objet a des attributs qui peuvent nous dire les coordonnées x et y du clic. Nous utilisons ces attributs pour vérifier si un clic a été effectué sur l'un de nos boutons bleus.
Cette nouvelle méthode s'appelle clickedest component Une méthode de constructeur qui vérifie si le composant a été cliqué.
à updateGameArea Dans la fonction, si l'un des boutons bleus est cliqué, nous exécuterons les opérations nécessaires :
实例
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();
}
- Page précédente Composants de jeu
- Page suivante Obstacles de jeu
