HTML5 est actuellement une nouvelle norme qui s’impose comme le futur des applications et des jeux web. Nous allons nous intéresser dans cette série d’articles à JawsJs, un petit Framework JavaScript qui va exploiter la balise canvas introduite par HTML5. Pour cette première prise de contact ,nous allons créer un petit shooter vertical très classique. Je vous invite d’ailleurs à récupérer les images que nous allons utiliser ici.
Enfin il est nécessaire d’avoir déjà des connaissances en programmation et de préférénce en développement web cela va de soi. Si vous avez besoin de consolider vos bases dans ces domaines voici de très bons liens :
- Le site du zéro avec ses tutoriels sur HTML5/CSS et JavaScript (débutant)
- Le blog BrainCracking (avancé)
Vous êtes prêt ? Alors c’est partie !
Installation et création du projet
Dans un premier temps il faut récupérer JawsJs depuis le site officiel ou sur Github, je vous recommande de prendre une version non compressée car le débogage sera plus facile. Ensuite il faut créer un projet web sur votre disque, par exemple dans mes documents ou alors dans un dossier sur votre serveur web. Nous allons créer un fichier index.html qui contiendra la partie visible du jeu, un dossier assets où on placera les ressources graphique et enfin un dossier js pour mettre les fichiers JavaScript. Placez donc les images que vous avez récupéré tout à l’heure dans le dossier assets, le fichier jawsjs.min.js dans le dossier js et enfin ouvrez le fichier index.html avec votre éditeur de code préféré (perso j’utilise SublimText2 mais n’importe quel éditeur de texte ou IDE fera l’affaire).
Le code
On va passer au choses sérieuses maintenant et coder un peu, pas trop en réalité car comme vous allez le constater JawsJs va nous faciliter grandement la vie 🙂 On commence par ajouter le code HTML qui va structurer le document, puis ajouter juste avant la fermeture de la balise body deux scripts, l’import de JawsJS et le script qui contiendra le code jeu.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>JawsJS Shooter</title>
<style>
body { text-align: center; }
</style>
</head>
<body>
<canvas id="gameCanvas" width="480" height="600">
Votre navigateur n'est pas compatible !
</canvas>
<script src="js/jaws.js"></script>
<script>
(function() {
function GameState ()
{
this.setup = function() { }
this.update = function() { }
this.draw = function() { }
}
window.onload = function() {
jaws.start(GameState);
}
})();
</script>
</body>
</html>
Le code est encapsulé dans une closure, ça va nous permettre de travailler dans un espace totalement sécurisé, pour notre exemple ce n’est pas obligatoire mais dés que vous travaillerez sur une page avec beaucoup de scripts différents ça sera obligatoire pour ne pas avoir de mauvaises surprises.
Vous remarquerez que j’ai déjà ajouté une classe avec trois méthodes ainsi qu’une une fonction d’initialisation au chargement de la page, c’est cette fonction qui sera chargée de démarrer le jeu via la méthode start() qui prend en paramètre une classe représentant un « état ».
La classe GameState va représenter le jeu, c’est ce qu’on appel un état de jeu. On trouvera des états pour les menus et les différents écrans de score par exemple. Dans la méthode setup() nous effectuerons toutes les initialisations de variables locales et d’objets. La méthode update() permettra quant-à elle de mettre à jour la logique du jeu. Enfin la méthode draw() sera chargée de dessiner dans le canvas 60 fois par seconde (dans le meilleur des mondes O:-) ).
A oui une dernière chose, pas besoin de spécifier quel balise canvas on utilise ici, JawsJS va la trouver tout seul à l’initialisation. Cependant si vous utilisez plusieurs canvas il est possible de lui spécifier celui à utiliser avec la propriété jaws.canvas.
Affichage et déplacement du vaisseau
Un sprite est un élément graphique affiché à l’écran, cela peut être un joueur, un projectile, un ennemie ou un élément du décor. Les sprites peuvent être de 2 types : Animés ou statiques. Ici nous n’utiliserons que des sprites statiques mais vous verrez par la suite qu’utiliser une feuille de sprite pour animer un personnage est vraiment très facile. Voilà maintenant comment afficher un Sprite à l’écran et le déplacer avec les touches du clavier :
function GameState ()
{
// Sprite du vaisseau avec son image
var ship = new jaws.Sprite({ image:"assets/ShipR.png" });
var shipSpeed = 4;
// Initialisation de la position du vaisseau
this.setup = function()
{
ship.x = (jaws.width / 2) - (ship.width / 2); // Centré sur X
ship.y = jaws.height - ship.height - 10; // En bas
}
// Mise à jour de la position avec les touches du clavier
this.update = function()
{
// Position du vaisseau avant mise à jour
var position = { x: ship.x, y: ship.y };
if (jaws.pressed("left")) {
position.x -= shipSpeed;
}
else if (jaws.pressed("right")) {
position.x += shipSpeed;
}
// Gestion des collisions avec les bords de l'écran
if (position.x > 0 && position.x + ship.width < jaws.width)
{
ship.x = position.x;
ship.y = position.y;
}
}
// Affichage
this.draw = function()
{
jaws.context.clearRect(0, 0, jaws.width, jaws.height);
ship.draw();
}
}
// Chargement de Jaws et des ressources
window.onload = function()
{
jaws.assets.add("assets/ShipR.png");
jaws.assets.add("assets/BallR.png");
jaws.start(GameState);
}
C’est vraiment très facile et JawsJS met à notre disposition un tas de méthodes pour nous simplifier la vie. On va commencer par la fin si ça ne vous dérange pas car c’est dans la fonction onload que tout commence. Effectivement dans un premier temps on va précharger les ressources graphiques grâce au gestionnaire de contenu proposé par Jaws, ensuite on démarre le jeu en passant la classe GameState a la méthode jaws.start() qui se chargera d’en créer une instance.
Dans cette classe il y a un Sprite de type jaws.Sprite() prenant divers paramètres, ici on lui donne une image (que nous avons préchargé avant). Même si ce Sprite est statique il faut qu’il puisse se déplacer donc une variable shipSpeed a été déclarée (on aurait aussi très bien pu utiliser des valeurs en dur dans le code mais ce n’est pas très sexy vous ne trouvez pas ?). On place ensuite le vaisseau en bas de l’écran, vous noterez que l’on peut connaitre à tout moment la taille du canvas avec les propriétés jaws.width et jaws.height.
La suite est vraiment toute bête, on utilise jaws.pressed(uneTouche) pour savoir si elle est enfoncée et si c’est le cas on met à jour notre structure de position. A la fin on test si la prochaine position est valide (si le Sprite ne sort pas de l’écran) et si elle est valide on passe ses valeurs au Sprite du vaisseau.
J’attire votre attention sur la méthode draw() car il y a quelque chose de très important à savoir. Tout ce qui passe dans cette méthode est appelé au mieux 60 fois par secondes, il faut donc éviter de surcharger inutilement cette fonction avec des choses qui pourraient être affichées autrement.
Par exemple le background du canvas peut être géré en CSS, la gestion du score peut être une balise div au dessus de la zone de jeu. C’est très important car ça peut littéralement tuer vos performances alors attention 😉 Dans notre cas on efface le contenu de l’écran à chaque passe et on affiche le sprite (mis à jour ou pas).
Je vous ai dit que le fond d’écran pouvait et devait être géré en css et voilà donc le code à ajouter dans la balise <style> présente dans la balise <head> pour afficher le fond au jeu.
canvas { background: url('assets/background.jpg') center; }
Conclusion
Nous avons vue comment fonctionnait un jeu avec le Framework JawsJS en affichant un Sprite à l’écran. Il est vraiment facile ensuite de le contrôler au clavier ou à la souris grâce aux nombreuses fonctions proposées par JawsJS. Dans le prochain tutoriel nous ajouterons des tirs et enfin quelques ennemies. Comme le jeu est développé avec une petite résolution nous nous occuperons aussi de « l’intégration mobile » pour que ce dernier puisse être joué sur Smartphone ou Tablette tactile ! Vous pouvez retrouver le code source et les ressources sur mon dépôt Github demonixis.blog-tutorials.