C'est la 4ème étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson4.html.

La balle rebondit librement partout et vous pourriez la regarder indéfinimment... Mais il n'y a pas d'interaction avec le joueur. Ce n'est pas un jeu si vous ne pouvez pas le contrôler! Nous allons donc ajouter une interaction avec le joueur : un paddle pour notre balle.

Créer un paddle pour taper la balle

Nous avons besoin d'un paddle, ce n'est rien d'autre qu'un rectangle! Ajoutons donc à notre code quelques variables pour le définir :

var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;

Nous venons donc de définir la taille et la longueur du paddle, ainsi que son point de départ sur l'axe x. Mais il faut encore le dessiner, nous allons donc créer la fonction drawPaddle() pour l'afficher à l'écran. Ajouter cette fonction juste sous drawBall() :

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

Contrôler le paddle au clavier

On peut dessiner le paddle mais celui-ci ne répondra pas à nos commandes. Il faut donc  ajouter quelques commandes claviers. Pour ça on aura besoin de :

  • Deux varibales pour stocker l'information de si c'est le bouton gauche ou le bouton droit qui est pressé.
  • Deux "event listeners" (des événements qui écoute en bon francais)  : keydown et keyup. On créera du code qui s'occupera des mouvement du paddle quand les boutons seront préssés.
  • Deux fonctions qui s'occuperont de keydown et keyup.
  • La possibilité de bouger le paddle à gauche et à droite.

Pour définir si un bouton est préssé ou pas, on peut utiliser une simple variable booléenne initialisée à false (parce que de base le bouton n'est pas préssé). Ajoutez ces variables parmis les autres :

var rightPressed = false;
var leftPressed = false;

Pour savoir si des touches sont préssés nous allons utiliser des "listeners". Ajoutez ces lignes juste au dessus de setInterval() :

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

When the keydown event is fired on any of the keys on your keyboard (when they are pressed), the keyDownHandler() function will be executed. The same pattern is true for the second listener: keyup events will fire the keyUpHandler() function (when the keys stop being pressed). Add these to your code now, below the addEventListener() lines:

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}

Quand on presse une touche du clavier, l'information est gardée dans une variable. La variable concerné est mis sur true. Quand la touche est relachén, la varibale revient à  false. C'est aussi simple que ça.

Les deux fonctions prennent un paramètres, representé par la variable e. Avec cette variable vous avez une information précieuse : le keyCode qui contient l'information de quelle touche est préssée ( vous pouvez aller faire un tour içi). Par exemple 37 est le keycode de la flèche gauche du clavier et 39 celui de la flèche droite. Si la gauche est préssée leftPressed est mis à  true, et quand celle-ci est relaché leftPressed est mis à false. Le même processus pour la flèche droite s'occupe de gérer rightPressed.

La logique du déplacement du paddle

Nous avosn maintenant tout ce qui nous faut pour gérer les touches. Il ne reste plus qu'a actualiser notre code pour utiliser tout ça et pouvoir faire bouger le paddle à l'écran. Dans la fonction draw(), nous allons voir si c'est la gauche ou la droite qui est utiliséeà chaque rafraichîssement d'image. Notre code va ressembler à ça :

if(rightPressed) {
    paddleX += 7;
}
else if(leftPressed) {
    paddleX -= 7;
}

Si on appuie sur la gauche, le paddle fera 7 pixels sur la gauche et si on appuie sur la droite il en fera 7 à droite. Cela marche et pouvez le tester en mettant le code juste après les tests de bordure de la balle et après avoir appelé drawPaddle(), sans quoi il ne s'afficherait pas à l'écran! Mais vous allez vous rendre compte qu'il va pouvoir sortir du canvas, comme la balle avant! Vous devez commencer à voir ce qui faut faire, essayez donc de gérer en seulement deux if les bordures de la zone de jeu pour que le paddle ne sorte plus (n'oubliez pas la taille du paddle qui rentre en jeu dans le calcul de coordonées).

if(rightPressed && paddleX < canvas.width-paddleWidth) {
    paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
    paddleX -= 7;
}

La position en x paddleX du paddle bouge de 0 à gauche jusqu'à canvas.width-paddleWidth à droite (les coordonnées du paddle sont le x et le y du coin gauche en haut comme pour la canvas).

Pour ceux qui ne l'aurait pas fait il ne vous reste plus qu'a mettre dans draw() et sous drawBall() et ses conditions, drawPaddle() et de copier le code du déplacement et de gestion de bordures en dessous

drawPaddle();

Comparez votre code

Voici le code final du chapitre, à vous de vérifier et de le tester en live pour voir si il y a des différences.

Exercice: faites aller le paddle plus vite ou plus doucement et essayer de changer sa taille.

Dans le prochain chapitre

Nous commençons à avoir quelque chose qui ressemble à un jeu grâce à un contrôle de paddle mais rien ne se passe et vous ne pouvez meme pas perdre. Cela va changer car nous allons ajouter un Game over pour pouvoir arrêter cette balle qui rebondit indéfiniment.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : eerrtrr
Dernière mise à jour par : eerrtrr,