Share
Dans ce tutoriel, nous allons créer un clone du jeu classique, Pong, en HTML5, à l'aide de la bibliothèque EaselJS. Le jeu aura plusieurs écrans, effets sonores et un adversaire (très simple) de l'IA.
En utilisant des graphiques prédéfinis, nous allons programmer Pong jeu en HTML5 à l'aide de la bibliothèque EaselJS, qui fournit une interface de type Flash pour le canevas HTML5. Pour une introduction à EaselJS, voir cet article Activetuts +.
Le joueur pourra contrôler une raquette à l'aide de la souris et jouer contre l'adversaire du contrôleur de l'ordinateur pour obtenir des points..
Une interface simple avec un style néo-futuriste sera utilisée; cela implique plusieurs formes, boutons, bitmaps et plus.
Les graphiques nécessaires à 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 la dernière version d’EaselJS depuis son site officiel. Cependant, cela peut être incompatible avec le code ici, je vous suggère donc d'utiliser la version de la bibliothèque fournie avec le téléchargement source..
Préparons notre document HTML. Nous allons commencer par les bases, juste un aperçu de base:
Pong
Nous devons également ajouter un peu de CSS pour supprimer la mise en évidence par défaut appliquée lorsque vous appuyez sur un élément dans un navigateur mobile. Sans cela, l'expérience mobile diminuerait considérablement.
Pong
Le code suivant ajoute les bibliothèques javascript nécessaires au bon fonctionnement de notre application..
Pong /
Outre EaselJS, nous utiliserons également TweenJS (pour la gestion des transitions d’écran et la boucle de jeu) et SoundJS (pour les effets sonores)..
Main.js est le fichier que nous utiliserons pour contenir notre propre code JS.
Dans les lignes suivantes, nous appelons notre Principale() une fonction. C’est la fonction qui lancera notre application; ça va être créé plus tard dans le tutoriel, à l'intérieur Main.js.
Pong
Un canevas HTML5 est créé dans cette ligne; nous lui attribuons un identifiant afin que nous puissions le référencer plus tard et définir sa largeur et sa hauteur.
Pong
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) et préparez-vous à écrire le code. N'oubliez pas de sauvegarder le fichier sous Main.js dans votre dossier de projet.
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 la même manière que l’étape AS3.
/ * Définir Canvas * / var canvas; stade var;
Cette variable stocke l'image de fond du titre.
/ * Arrière-plan * / var bgImg = new Image (); var bg;
Ceci est la vue du titre, le premier écran interactif à apparaître dans notre jeu. Ces variables stockent ses composants.
/ * Vue du titre * / var mainImg = new Image (); var principal; var startBImg = new Image (); var startB; var creditsBImg = new Image (); var créditsB; var TitleView = new Container ();
Cette vue montrera le générique, l'année et le copyright du jeu, ces variables seront utilisées pour le stocker..
/ * Crédits * / var creditsViewImg = new Image (); crédits var;
Les variables suivantes stockent les graphiques individuels qui apparaissent dans la vue du jeu:
/ * Vue du jeu * / var playerImg = new Image (); var player; var ballImg = new Image (); balle de var; var cpuImg = new Image (); var cpu; var winImg = new Image (); var gagner; var perdImg = new Image (); var perdre;
Les valeurs de score seront traitées par les variables suivantes:
/ * Score * / var playerScore; var cpuScore;
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour comprendre à quoi ils servent:
var xSpeed = 5; // vitesse horizontale de la balle var ySpeed = 5; // Vitesse verticale de la balle var gfxLoaded = 0; // utilisé en tant que préchargeur, compte les éléments déjà chargés var tkr = new Object; // utilisé comme écouteur d'événement pour le ticker
Nous utiliserons des effets sonores pour améliorer le ressenti du jeu. Les sons de cet exemple ont été créés à l'aide de l'excellent outil gratuit as3sfxr et convertis au format MP3 à l'aide d'Audacity..
Les sons nécessaires peuvent tous être trouvés dans le téléchargement source. Si vous voulez créer le vôtre, vous en aurez besoin de quatre:
Accentsconagua
hit.mp3: joué lorsque la balle frappe une raquetteplayerScore.mp3: joué quand les scores des joueursennemiScore.mp3: joué quand l'ennemi marquewall.mp3: joué lorsque le ballon frappe la limite supérieure ou inférieurele 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 appellera les fonctions nécessaires pour commencer le jeu.
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. Ajouter ceci à Principale().
/ * Link Canvas * / canvas = document.getElementById ('Pong'); stage = new Stage (toile); Les événements de souris sont désactivés par défaut dans EaselJS pour améliorer les performances. Puisque nous avons besoin de ceux du jeu, nous ajoutons la ligne suivante. Ajouter ceci à Principale().
stage.mouseEventsEnabled = true;
Nous utiliserons SoundJS pour ajouter des sons à notre jeu. écrivez le code suivant pour importer les sons que nous allons utiliser. Ajouter ceci à Principale().
/ * Sound * / SoundJS.addBatch ([name: 'hit', src: 'hit.mp3', instances: 1, name: 'playerScore', src: 'playerScore.mp3', instances: 1, nom: 'ennemiScore', src: 'ennemiScore.mp3', instances: 1, nom: 'mur', src: 'wall.mp3', instances: 1]);
Ce code est utilisé pour précharger les graphiques, à l'aide d'une fonction que nous écrirons plus tard. Il définit les objets Image que nous avons créés précédemment pour qu'ils pointent vers les fichiers PNG source pertinents de notre dossier de documents..
Un nom est attribué à chacun pour que nous puissions détecter quelle image est chargée plus tard, et enfin la fonction qui gère les images chargées est appelée.
Ajouter ceci à Principale().
/ * Charge GFX * / bgImg.src = 'bg.png'; bgImg.name = 'bg'; bgImg.onload = loadGfx; mainImg.src = 'main.png'; mainImg.name = 'main'; mainImg.onload = loadGfx; startBImg.src = 'startB.png'; startBImg.name = 'startB'; startBImg.onload = loadGfx; creditsBImg.src = 'creditsB.png'; creditsBImg.name = 'creditsB'; creditsBImg.onload = loadGfx; creditsViewImg.src = 'credits.png'; creditsViewImg.name = 'credits'; creditsViewImg.onload = loadGfx; playerImg.src = 'paddle.png'; playerImg.name = 'player'; playerImg.onload = loadGfx; ballImg.src = 'ball.png'; ballImg.name = 'ball'; ballImg.onload = loadGfx; cpuImg.src = 'paddle.png'; cpuImg.name = 'cpu'; cpuImg.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 une émission centralisée de ticks ou de pulsations à un intervalle défini. Cela peut être utilisé pour déclencher la boucle de jeu.
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. Ajouter ceci à Principale().
/ * Ticker * / Ticker.setFPS (30); Ticker.addListener (scène);
Chaque fois qu'un graphique est chargé, cette fonction sera exécutée. Il assignera chaque image à un objet bitmap et vérifiera que tous les éléments sont chargés avant de continuer..
function loadGfx (e) if (e.target.name = 'bg') bg = nouveau Bitmap (bgImg); if (e.target.name = 'main') main = nouveau Bitmap (mainImg); if (e.target.name = 'startB') startB = new Bitmap (startBImg); if (e.target.name = 'creditsB') creditsB = nouveau Bitmap (creditsBImg); if (e.target. name = 'credits') credits = new Bitmap (creditsViewImg); if (e.target.name = 'player') player = nouveau Bitmap (playerImg); if (e.target.name = 'ball') ball = new Bitmap (ballImg); if (e.target.name = 'cpu') cpu = nouveau Bitmap (cpuImg); if (e.target.name = 'win') win = nouveau Bitmap ( winImg); if (e.target.name = 'perdre') perdre = nouveau Bitmap (perdreImg); gfxLoaded ++; if (gfxLoaded == 10) // n'oubliez pas de changer cela si vous ajoutez plus d'images addTitleView ();
Lorsque tous les graphiques sont chargés, la vue du titre est ajoutée à la scène à l'aide de la fonction suivante:
fonction addTitleView () startB.x = 240 - 31.5; startB.y = 160; startB.name = 'startB'; créditsB.x = 241 - 42; créditsB.y = 200; TitleView.addChild (main, startB, creditsB); stage.addChild (bg, TitleView); stage.update ();
Cette fonction ajoute les auditeurs nécessaires à la TitleView boutons (il fait partie de addTitleView ()):
startB.onPress = addGameView; creditsB.onPress = showCredits;
le Crédits l’écran s’affiche lorsque l’utilisateur clique sur le bouton des crédits; un écouteur de souris est ajouté à l'image complète pour l'enlever.
function showCredits () // Afficher les crédits crédits.x = 480; stage.addChild (crédits); stage.update (); Tween.get (crédits) .to (x: 0, 300); credits.onPress = hideCredits;
Quand le Crédits l'écran est cliqué, il sera interpolé et retiré de la scène.
// Hide Credits function hideCredits (e) Tween.get (crédits) .to (x: 480, 300) .call (rmvCredits); // Supprimer les crédits function rmvCredits () stage.removeChild (crédits);
Arrêtons-nous ici pour tester ce que nous avons fait jusqu'à présent. Cliquez ici pour une démonstration de jalon.
Gardez à l'esprit que certaines lignes ont été commentées car certaines fonctions n'ont pas encore été créées..
Rappelez-vous que le jalon est inclus dans les fichiers source. Si, pour une raison quelconque, votre fichier ne reproduit pas celui-ci, comparez votre source à la mienne pour voir ce qui pourrait en être la cause..
Les lignes suivantes suppriment le TitleView de la scène et ajoute le GameView articles à la scène. Un écouteur de souris est ajouté à l'arrière-plan, pour démarrer le jeu lorsque l'utilisateur clique dessus.
function addGameView () // Ecran Détruire le menu et les crédits stage.removeChild (TitleView); TitleView = null; crédits = null; // Ajouter la vue du jeu player.x = 2; player.y = 160 - 37,5; cpu.x = 480-25; cpu.y = 160 - 37,5; ball.x = 240-15; ball.y = 160 - 15; // Score playerScore = new Text ('0', 'Arial gras 20px', '# A3FF24'); playerScore.maxWidth = 1000; // correctif pour Chrome 17 playerScore.x = 211; playerScore.y = 20; cpuScore = nouveau texte ('0', 'Arial gras 20px', '# A3FF24'); cpuScore.maxWidth = 1000; // correctif pour Chrome 17 cpuScore.x = 262; cpuScore.y = 20; stage.addChild (playerScore, cpuScore, joueur, cpu, balle); stage.update (); // Démarrer le programme d'écoute bg.onPress = startGame; Le joueur se déplacera avec la position verticale de la souris:
function movePaddle (e) // Déplacement de la souris player.y = e.stageY;
Ce code est exécuté lorsque le joueur clique sur l'arrière-plan du jeu, il ajoute l'écouteur de souris qui déclenche la fonction à l'étape précédente et ajoute un ticker pour contrôler la boucle de jeu..
Faites attention à la façon dont le ticker est créé: c'est l'équivalent d'un événement Timer dans AS3.
fonction startGame (e) bg.onPress = null; stage.onMouseMove = movePaddle; Ticker.addListener (tkr, false); tkr.tick = update;
Lorsqu'un point est marqué (par le joueur ou l'ordinateur), les palettes et la balle reviendront à leurs positions d'origine et la partie sera mise en pause:
fonction reset () ball.x = 240 - 15; ball.y = 160 - 15; player.y = 160 - 37,5; cpu.y = 160 - 37,5; stage.onMouseMove = null; // cesse d'écouter la souris Ticker.removeListener (tkr); // met en pause le jeu bg.onPress = startGame;
Si le jeu n'est pas en pause, la balle sera déplacée de chaque image en utilisant les variables créées précédemment..
function update () // Mouvement de balle ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed;
Ce code contrôle le mouvement de l'ordinateur. la pagaie est déplacée de manière à suivre la balle tout en ayant une marge d'erreur.
si (cpu.y < ball.y) cpu.y = cpu.y + 2.5; else if(cpu.y > ball.y) cpu.y = cpu.y - 2,5;
Ici, nous vérifions si la balle est au bord supérieur ou inférieur de la toile; si c'est le cas, la vitesse verticale est inversée et un son est joué.
si ((ball.y) < 0) ySpeed = -ySpeed; SoundJS.play('wall');;//Up if((ball.y + (30)) > 320) ySpeed = -ySpeed; SoundJS.play ('wall');; // bas Maintenant les côtés gauche et droit. Ce code modifie également le score, appelle la fonction de réinitialisation et joue un son différent en fonction du côté du ballon touché.
/ * Score CPU * / if ((ball.x) < 0) xSpeed = -xSpeed; cpuScore.text = parseInt(cpuScore.text + 1); reset(); SoundJS.play('enemyScore'); /* Player Score */ if((ball.x + (30)) > 480) xSpeed = -xSpeed; playerScore.text = parseInt (playerScore.text + 1); réinitialiser(); SoundJS.play ('playerScore'); Le code suivant vérifie si la balle entre en collision avec une raquette, en comparant la position de la raquette aux coordonnées de la balle. Si les contours des deux intersections se croisent, il y a collision, alors nous inversons la vitesse x de la balle et jouons un son..
/ * Collision de l'unité centrale * / if (ball.x + 30> cpu.x && ball.x + 30 < cpu.x + 22 && ball.y >= cpu.y && ball.y < cpu.y + 75) xSpeed *= -1; SoundJS.play('hit'); /* Player collision */ if(ball.x <= player.x + 22 && ball.x > player.x && ball.y> = player.y && ball.y < player.y + 75) xSpeed *= -1; SoundJS.play('hit'); Vous pouvez modifier la condition de fin dans les lignes suivantes - elle est définie sur 10 points par défaut.
/ * Recherchez Win * / if (playerScore.text == '10') alert ('win'); / * Vérifier la fin du jeu * / if (cpuScore.text == '10') alert ('lost'); Cette fonction arrêtera le jeu et affichera une alerte dont le contenu dépend du résultat du jeu..
alerte de fonction (e) Ticker.removeListener (tkr); stage.onMouseMove = null; bg.onPress = null si (e == 'gagner') win.x = 140; win.y = -90; stage.addChild (victoire); Tween.get (win) .to (y: 115, 300); else perdre.x = 140; perdre.y = -90; stage.addChild (perdre); Tween.get (perdre) .to (y: 115, 300);
Enregistrez votre travail (si vous ne l'avez pas déjà fait) et ouvrez le fichier HTML dans le navigateur pour que votre jeu fonctionne!
Essayez de modifier les variables du jeu pour créer votre propre version du jeu.!
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
