Share
L'année dernière, je vous ai montré comment créer un jeu de tir avec Flash et AS3. Avec la popularité croissante de HTML5 (et ses capacités), voyons comment faire de même avec HTML5, JavaScript et EaselJS..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Cliquez pour jouer à la démo.
En utilisant des sprites prédéfinis, nous coderons un jeu divertissant Tireur de l'espace jeu en HTML5 avec la librairie EaselJS.
Le joueur sera capable de contrôler un vaisseau spatial et de tirer plusieurs ennemis tout en voyageant dans l'espace.
Une interface simple et futuriste sera utilisée, elle implique des bitmaps et plus. J'ai utilisé une excellente bibliothèque de sprites dans la démonstration de ce tutoriel, ils font partie du logiciel gratuit Sinistar Clone Graphics.
Les ressources d’interface requises pour ce tutoriel sont disponibles dans le téléchargement ci-joint..
La bibliothèque EaselJS sera utilisée pour construire notre jeu, assurez-vous de lire le Commencer tutoriel si vous êtes nouveau dans cette bibliothèque.
Vous pouvez télécharger EaselJS depuis son site officiel.
Préparons notre document HTML, c'est une structure HTML simple pour commencer à écrire notre application. Enregistrer ceci sous Shooter.html.
Tireur
Ajoutons aussi un peu de CSS, cette ligne supprimera la surbrillance par défaut lorsque vous appuyez sur un élément à l'aide d'un navigateur mobile; sans cela, l'expérience mobile diminuerait considérablement.
Tireur
Le code suivant ajoute les bibliothèques JavaScript nécessaires pour que notre application fonctionne..
Tireur
Main.js est le fichier que nous allons utiliser pour stocker toutes nos propres fonctions pour le jeu. Créez-le maintenant et enregistrez-le dans le même dossier que Shooter.html. Vous devrez également télécharger les bibliothèques EaselJS répertoriées..
Dans les lignes suivantes, nous appelons notre fonction principale; c'est la fonction qui va démarrer notre application, elle sera créée plus tard dans notre code JavaScript.
Tireur
Le canevas est ajouté dans cette ligne. Nous assignons un identifiant pour le référencer plus tard et aussi pour définir sa largeur et sa hauteur..
Tireur
Commençons notre création de jeu!
Ouvrez votre éditeur JavaScript préféré (tout éditeur de texte fonctionnera, mais vous n'aurez pas la coloration syntaxique en surbrillance) et préparez-vous à écrire votre superbe jeu. Ouvrez le Main.js fichier que vous avez créé précédemment.
Nous allons commencer par définir toutes les variables graphiques et logiques.
Les variables suivantes représentent l'élément de canevas HTML et l'étape qui sera liée à celui-ci. (Le étape variable se comportera de manière similaire à la scène dans un projet Flash AS3.)
/ * Définir Canvas * / var canvas; stade var;
Les variables suivantes stockent les images d'arrière-plan. Deux images en mosaïque sont utilisées pour créer un arrière-plan défilant à l'infini.
/ * Arrière-plan * / var bgImg = new Image (); var bg; var bg2Img = new Image (); var bg2;
C'est le vaisseau qui sera utilisé comme personnage ou héros.
/ * Ship * / var sImg = new Image (); navire var;
Plusieurs ennemis seront sur la scène; ils l'utiliseront comme graphique source.
/ * Enemy * / var eImg = new Image ();
Un boss sera présent dans le jeu, plus gros et avec plus de santé que les autres ennemis. Ces variables sont utilisées pour l'instancier.
/ * Boss * / var bImg = new Image (); patron de var;
L'icône "vie". Trois vies sont données au début et vous en perdez une lorsque vous êtes frappé par un ennemi.
/ * Lives * / var lImg = new Image ();
C'est ton arme: tire des balles sur les ennemis pour les tuer. Cette variable stocke l'image source.
/ * Bullets * / var bltImg = new Image ();
Deux alertes sont utilisées dans le jeu, une pour savoir quand vous gagnez et une pour quand vous perdez. Nous verrons plus tard comment déterminer une victoire ou une défaite dans ce tutoriel..
/ * Alerte * / var winImg = new Image (); var perdImg = new Image (); var gagner; var perdre;
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus à leur sujet. Certains de leurs noms sont explicites et n'ont donc aucun commentaire.
var vies = new Container (); // stocke les vies gfx var bullets = new Container (); // stocke les balles gfx var ennemis = new Container (); // stocke les ennemis gfx var bossHealth = 20; score var; var gfxLoaded = 0; // utilisé en tant que préchargeur, compte les éléments déjà chargés var centerX = 160; var centerY = 240; var tkr = new Object (); // utilisé comme écouteur de ticker var timerSource; // référence une méthode setInterval
Nous utiliserons des effets sonores pour améliorer le ressenti du jeu. Vous pouvez trouver les sons utilisés dans cet exemple sur Soungle.com en utilisant les mots-clés. espace, explosion et laser.
le Principale() La fonction sera la première à s'exécuter lors du chargement de la page Web, car elle est mentionnée dans le en charge attribut du document HTML (voir l'étape 7).
Il appelle les fonctions nécessaires pour démarrer le jeu. Nous allons créer ces fonctions dans les prochaines étapes - tout de l’étape 19 à l’étape 23 devrait entrer dans cette fonction.
fonction Main () // code…
Ce code obtient l'ID de canevas HTML et le lie à la classe EaselJS Stage. Cela fera que la variable stage se comportera comme la classe stage dans AS3.
Accentsconagua
/ * Link Canvas * / canvas = document.getElementById ('Tireur'); stage = new Stage (toile); Les événements de souris sont désactivés par défaut dans EaselJS pour améliorer les performances; comme nous avons besoin de ceux du jeu, nous ajoutons la ligne suivante.
stage.mouseEventsEnabled = true;
Nous utiliserons SoundJS pour ajouter des sons à notre jeu. SoundJS addBatch La méthode utilise un tableau de trois paramètres pour chaque appel:
prénom: Le nom de l'instance que vous voulez donner au son - ceci sera utilisé pour jouer le son plus tard.src: L'URL du fichier son.les instances: Le nombre d'instances pouvant être lues en même temps./ * Son * / SoundJS.addBatch ([nom: 'boss', src: 'boss.mp3', instances: 1, nom: 'exploité', src: 'explo.mp3', instances: 10, nom: 'shot', src: 'shot.mp3', instances: 10]);
Ce code est utilisé pour précharger les graphiques à l'aide d'une fonction que nous écrirons plus tard. Il pointe chaque objet Image que nous avons créé précédemment vers le fichier source PNG dans notre dossier de documents. Un nom est attribué pour détecter quelle image est chargée et, enfin, la fonction qui gère les images chargées est appelée.
/ * Charge GFX * / bgImg.src = 'bg.png'; bgImg.name = 'bg'; bgImg.onload = loadGfx; bg2Img.src = 'bg2.png'; bg2Img.name = 'bg2'; bg2Img.onload = loadGfx; sImg.src = 'ship.png'; sImg.name = 'ship'; sImg.onload = loadGfx; eImg.src = 'ennemi1.png'; eImg.name = 'ennemi'; eImg.onload = loadGfx; bImg.src = 'boss.png'; bImg.name = 'boss'; bImg.onload = loadGfx; lImg.src = 'live.png'; lImg.name = 'live'; lImg.onload = loadGfx; bltImg.src = 'bullet.png'; bltImg.name = 'bullet'; bltImg.onload = loadGfx; winImg.src = 'win.png'; winImg.name = 'win'; winImg.onload = loadGfx; lostImg.src = 'lost.png'; lostImg.name = 'lost'; lostImg.onload = loadGfx;
La classe Ticker fournit un "tick" centralisé, diffusé à un intervalle défini. Nous pouvons utiliser ses cocher() fonction pour exécuter certains codes à une fréquence régulière.
Le code suivant définit la cadence d'images sur 30 et définit l'étape en tant qu'auditeur des ticks..
La classe TweenJS écoutera cette coche pour exécuter les animations.
/ * Ticker * / Ticker.setFPS (30); Ticker.addListener (scène);
Chaque fois qu'un graphique est chargé, cette fonction sera exécutée. Il affectera chaque image à un objet bitmap et vérifiera que tous les éléments sont chargés avant de procéder à l'appel. addGameView.
function loadGfx (e) if (e.target.name = 'bg') bg = nouveau bitmap (bgImg); if (e.target.name = 'bg2') bg2 = nouveau bitmap (bg2Img); if (e.target.name = 'ship') ship = new Bitmap (sImg); gfxLoaded ++; if (gfxLoaded == 9) addGameView ();
Lorsque tous les graphiques sont chargés, le addGameView la fonction est appelée. Cette fonction ajoutera le vaisseau, le compteur de vies, le score et les arrière-plans à la scène..
fonction addGameView () ship.x = centerX - 18.5; ship.y = 480 + 34; / * Ajouter des vies * / pour (var i = 0; i < 3; i++) var l = new Bitmap(lImg); l.x = 248 + (25 * i); l.y = 463; lives.addChild(l); stage.update(); /* Score Text */ score = new Text('0', 'bold 14px Courier New', '#FFFFFF'); score.maxWidth = 1000; //fix for Chrome 17 score.x = 2; score.y = 476; /* Second Background */ bg2.y = -480; /* Add gfx to stage and Tween Ship */ stage.addChild(bg, bg2, ship, enemies, bullets, lives, score); Tween.get(ship).to(y:425, 1000).call(startGame); Le vaisseau du joueur sera contrôlé par la souris, et nous utilisons cette fonction pour gérer cela:
fonction moveShip (e) ship.x = e.stageX - 18.5;
e.stageX fait référence à la coordonnée x de la souris, et cette fonction est appelée à chaque déplacement de la souris.
Notre navire sera capable de tirer des balles pour se détruire et se protéger de ses ennemis. Cette fonction s'exécutera chaque fois que l'utilisateur cliquera sur la scène et placera une balle devant le vaisseau qui sera ensuite déplacée par le mettre à jour() une fonction. Il joue également un son de tir.
fonction shoot () var b = new Bitmap (bltImg); b.x = ship.x + 13; b.y = ship.y - 20; bullets.addChild (b); stage.update (); SoundJS.play ('shot'); Ce ne serait pas un tireur sans quelque chose à tirer. Voici un setInterval () est utilisé pour créer un ennemi toutes les 1000 millisecondes (vous pouvez modifier cette valeur à l’étape suivante) qui est ensuite déplacé par le mettre à jour() une fonction.
fonction addEnemy () var e = new Bitmap (eImg); e.x = Math.floor (Math.random () * (320 - 50)) e.y = -50 ennemis.addChild (e); stage.update ();
Ces lignes ajouteront les auditeurs nécessaires à la scène et à la minuterie; cela inclut les événements de souris, les événements chronométrés (via setInterval) et les événements Ticker qui mettront à jour le jeu chaque image.
fonction startGame () stage.onMouseMove = moveShip; bg.onPress = shoot; bg2.onPress = shoot; Ticker.addListener (tkr, false); tkr.tick = update; timerSource = setInterval ('addEnemy ()', 1000); L'arrière-plan est déplacé chaque image pour simuler un voyage dans l'espace; lorsque l'image-objet d'arrière-plan inférieure atteint la limite d'étape, elle est déplacée vers le haut, créant une boucle infinie.
function update () / * Déplacer l'arrière-plan * / bg.y + = 5; bg2.y + = 5; si (bg.y> = 480) bg.y = -480; sinon si (bg2.y> = 480) bg2.y = -480;
Les lignes de code suivantes vérifient s’il ya des puces dans l’étape; si c'est le cas, les balles sont déplacées vers le haut.
/ * Déplacer les puces * / pour (var i = 0; i < bullets.children.length; i++) bullets.children[i].y -= 10;
Ajoutons quelques lignes pour détecter la position de la balle et utilisons-la pour détruire une balle lorsqu'elle n'est plus visible..
/ * Déplacer les puces * / pour (var i = 0; i < bullets.children.length; i++) bullets.children[i].y -= 10; /* Remove Offstage Bullets */ if(bullets.children[i].y < - 20) bullets.removeChildAt(i);
Nous allons ajouter un grand méchant boss au jeu. Lorsque l'utilisateur atteint un certain score, le patron apparaîtra:
/ * Afficher le boss * / if (parseInt (score.text)> = 500 && boss == null) boss = new Bitmap (bImg); SoundJS.play ('boss'); boss.x = centerX - 90; boss.y = -183; stage.addChild (patron); Tween.get (boss) .to (y: 40, 2000) // interpelle le boss sur l'aire de jeu Les ennemis, comme les balles, sont également déplacés de chaque image. Ce code trouve tous les ennemis dans la scène en utilisant le ennemis conteneur, et les déplace chaque 5px vers le bas.
/ * Move Enemies * / pour (var j = 0; j < enemies.children.length; j++) enemies.children[j].y += 5;
Nous vérifions également les positions des ennemis pour les détruire lorsqu'ils ne sont plus visibles..
/ * Move Enemies * / pour (var j = 0; j < enemies.children.length; j++) enemies.children[j].y += 5; /* Remove Offstage Enemies */ if(enemies.children[j].y > 480 + 50) ennemis.removeChildAt (j);
Les balles dans le conteneur sont testées pour la collision avec les ennemis; lorsque cela se produit, les deux sont retirés de la scène, un son est joué et la partition est mise à jour.
pour (var k = 0; k < bullets.children.length; k++) /* Bullet - Enemy Collision */ if(bullets.children[k].x >= ennemis.children [j] .x && bullets.children [k] .x + 11 < enemies.children[j].x + 49 && bullets.children[k].y < enemies.children[j].y + 40) bullets.removeChildAt(k); enemies.removeChildAt(j); stage.update(); SoundJS.play('explo'); score.text = parseFloat(score.text + 50); Le code suivant gère les collisions de boss, il utilise la même méthode que celle utilisée dans la boucle de collision balle-ennemi. Ici nous utilisons le bossHealth variable pour déterminer quand le boss est vaincu.
/ * Bullet - Collision de boss * / if (boss! = Null && bullets.children [k] .x> = boss.x && bullets.children [k] .x + 11 < boss.x + 183 && bullets.children[k].y < boss.y + 162) bullets.removeChildAt(k); bossHealth--; stage.update(); SoundJS.play('explo'); score.text = parseInt(score.text + 50); Ici, nous vérifions si un ennemi entre en collision avec le navire du joueur; si c'est le cas, un son est joué, une vie est supprimée et le navire est animé.
/ * Navire - collision ennemie * / if (ennemis.hitTest (ship.x, ship.y) || ennemis.hitTest (ship.x + 37, ship.y)) ennemis.removeChildAt (j); vies.removeChildAt (lives.length); ship.y = 480 + 34; Tween.get (navire) .to (y: 425, 500) SoundJS.play ('explo'); Le joueur gagne lorsque le boss perd toute sa santé et perd si toutes leurs vies sont perdues. Les lignes suivantes détectent ces situations et appellent une fonction d’alerte en utilisant le paramètre correct..
/ * Vérifier le gain * / if (boss! = Null && bossHealth <= 0) alert('win'); /* Check for lose */ if(lives.children.length <= 0) alert('lose'); L'alerte affiche les informations du joueur sur le statut de la partie. il est montré quand un événement de jeu est atteint. Il supprime les écouteurs du jeu et affiche le message approprié.
function alert (e) / * Supprimer les écouteurs * / stage.onMouseMove = null; bg.onPress = null; bg2.onPress = null; Ticker.removeListener (tkr); tkr = null; timerSource = null; / * Afficher le message correct * / if (e == 'win') win = new Bitmap (winImg); win.x = centerX - 64; win.y = centerY - 23; stage.addChild (victoire); stage.removeChild (ennemis, patron); else lost = new Bitmap (lostImg); perdre.x = centreX - 64; perdre.y = centreY - 23; stage.addChild (perdre); stage.removeChild (ennemis, bateau); bg.onPress = function () window.location.reload ();; bg2.onPress = function () window.location.reload ();; stage.update ();
Enregistrez votre travail (si vous ne l'avez pas déjà fait) et ouvrez le fichier HTML dans le navigateur pour que votre jeu HTML5 fonctionne!
Vous avez appris à créer un jeu Space Shooter avec toutes ses fonctionnalités de base. Essayez de l’étendre en utilisant ce que vous connaissez déjà. Un bon début serait de faire en sorte que les ennemis ou le patron ripostent au joueur.
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
