Share
Le web bouge vite - si vite que notre tutoriel original EaselJS est déjà dépassé! Dans ce didacticiel, vous apprendrez à utiliser la nouvelle suite CreateJS en créant un simple clone Pong..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Cliquez pour jouer
Ce tutoriel est basé sur le programme Créer un jeu Pong de HTML5 avec EaselJS de Carlos Yanez, qui s’est à son tour basé sur son guide Premiers pas avec EaselJS. Les graphiques et les effets sonores sont tous extraits de l'ancien tutoriel..
Accentsconagua
index.html Ce sera notre principale index.html fichier:
Pong
Comme vous pouvez le constater, il est assez court et consiste principalement à charger les bibliothèques CreateJS.
Depuis la sortie de CreateJS (qui regroupe essentiellement toutes les bibliothèques EaselJS distinctes), nous n’avons plus besoin de télécharger les fichiers JS et de les héberger sur notre site Web; les fichiers sont maintenant placés dans un CDN (Content Delivery Network) qui nous permet de charger ces fichiers à distance le plus rapidement possible.
Passons en revue le code:
Cette ligne supprime la surbrillance mobile qui peut apparaître lorsque vous essayez de jouer au jeu sur mobile. (La surbrillance mobile provoque la mise en surbrillance de l’objet de la toile et par conséquent, ignore les mouvements de vos doigts.)
Ensuite, nous allons charger les librairies CreateJS:>
Ce code charge les fichiers JS à partir du CDN CreateJS et nous permet fondamentalement d’utiliser toutes les fonctions CreateJS dans notre code.
Ensuite, nous allons charger le plugin SoundJS Flash, qui fournit une prise en charge sonore pour les navigateurs qui ne prennent pas en charge HTML5 Audio. Ceci est fait en utilisant un SWF (un objet Flash) pour charger les sons.
Dans ce cas, nous n'utiliserons pas le CDN; au lieu de cela, nous téléchargerons la bibliothèque SoundJS à partir de http://createjs.com/#!/SoundJS/download et placerons le soundjs.flashplugin-0.2.0.min.js et FlashAudioPlugin.swf fichiers dans un dossier local nommé les atouts.
Dernier des fichiers JS, nous allons charger le Main.js fichier qui contiendra tout le code de notre jeu:
Enfin, plaçons un objet Canvas sur notre scène.
Maintenant nous pouvons commencer à travailler sur le code du jeu..
Notre code de jeu sera dans un fichier nommé Main.js, alors créez et enregistrez maintenant.
Tout d’abord, définissons des variables pour tous les objets graphiques du jeu:
toile var; // sera lié au canevas dans notre page index.html page var stage; // est l'équivalent de stage en AS3; nous y ajouterons "enfants" // Graphics // [Background] var bg; // Le graphique d'arrière-plan // [Vue titre] var main; // Le fond principal var startB; // Le bouton Démarrer du menu principal var creditsB; // Le bouton de crédits dans le menu principal // [Credits] var crédits; // L'écran des crédits // [Vue du jeu] var player; // Le graphique du joueur paddle var ball; // Le graphique de la balle var cpu; // La palette du CPU var win; // Le popup gagnant var perd; // Le popup perdant
J'ai ajouté un commentaire pour chaque variable afin que vous sachiez ce que nous allons charger dans cette variable
Ensuite, les scores:
// [Score] var playerScore; // Le score du joueur principal var cpuScore; // Le score du processeur var cpuSpeed = 6; // La vitesse de la palette du processeur; plus il est rapide, plus le jeu est difficile
Nous aurons besoin de variables pour la vitesse de la balle:
// Variables var xSpeed = 5; var ySpeed = 5;
Vous pouvez changer ces valeurs en ce que vous voulez, si vous voulez rendre le jeu plus facile ou plus difficile..
Si vous êtes un développeur Flash, vous savez que Flash onEnterFrame est très utile lors de la création de jeux, car il y a des choses qui doivent se passer dans chaque cadre. (Si vous ne connaissez pas cette idée, consultez cet article sur la boucle de jeu.)
Nous avons un équivalent pour onEnterFrame dans CreateJS, et c’est le téléscripteur objet, qui peut exécuter du code chaque fraction de seconde. Créons la variable qui y mènera:
var tkr = nouvel objet;
Ensuite, nous avons le préchargeur, qui utilisera les nouvelles méthodes PreloadJS.
// preloader var preloader; var manifeste; var totalLoaded = 0;
précharge - contiendra l'objet PreloadJS.manifeste - tiendra la liste des fichiers que nous devons charger.totalLoaded - cette variable contiendra le nombre de fichiers déjà chargés.Dernier point mais non le moindre dans notre liste de variables, nous avons TitleView, qui tiendra plusieurs graphiques dans afin de les afficher ensemble (comme un flash DisplayObjectContainer).
var TitleView = new Container ();
Passons à la fonction principale…
Cette fonction est la première fonction exécutée après tous les fichiers JS du index.html sont chargés. Mais ce qui appelle cette fonction?
Eh bien, rappelez-vous cette ligne du index.html fichier?
Cet extrait de code indique qu’une fois que le HTML (et les bibliothèques JS) sont chargés, le Principale la fonction devrait fonctionner.
Passons en revue:
function Main () / * Lien Canvas * / canvas = document.getElementById ('PongStage'); stage = new Stage (toile); stage.mouseEventsEnabled = true; / * Définissez le plug-in Flash pour les navigateurs qui ne prennent pas en charge SoundJS * / SoundJS.FlashPlugin.BASE_PATH = "assets /"; if (! SoundJS.checkPlugin (true)) alert ("Erreur!"); revenir; manifest = [src: "bg.png", id: "bg", src: "main.png", id: "main", src: "startB.png", id: "startB" , src: "creditsB.png", id: "creditsB", src: "credits.png", id: "credits", src: "paddle.png", id: "cpu", src: "paddle.png", id: "joueur", src: "ball.png", id: "balle", src: "win.png", id: "gagner", src : "perdez.png", id: "perdez", src: "playerScore.mp3 | playerScore.ogg", id: "playerScore", src: "ennemiScore.mp3 | ennemisScore.ogg", id: " ennemis ennemis ", src:" hit.mp3 | hit.ogg ", id:" hit ", src:" wall.mp3 | wall.ogg ", id:" mur "]; preloader = new PreloadJS (); preloader.installPlugin (SoundJS); preloader.onProgress = handleProgress; preloader.onComplete = handleComplete; preloader.onFileLoad = handleFileLoad; preloader.loadManifest (manifeste); / * Ticker * / Ticker.setFPS (30); Ticker.addListener (scène); Décomposons chaque partie:
canvas = document.getElementById ('PongStage'); stage = new Stage (toile); stage.mouseEventsEnabled = true; Ici nous relions le PongStage Objet de toile du index.html fichier à la variable de canevas, puis créez un objet Stage à partir de ce canevas. (La scène nous permettra de placer des objets dessus.)
mouseEventsEnabled nous permet d'utiliser les événements de souris pour pouvoir détecter les mouvements et les clics de la souris.
/ * Définissez le plug-in Flash pour les navigateurs qui ne prennent pas en charge SoundJS * / SoundJS.FlashPlugin.BASE_PATH = "assets /"; if (! SoundJS.checkPlugin (true)) alert ("Erreur!"); revenir; Ici, nous configurons l'emplacement du plug-in Flash pour les navigateurs dans lesquels HTML5 Audio n'est pas pris en charge.
manifeste = [src: "bg.png", id: "bg", src: "main.png", id: "main", src: "startB.png", id: "startB" , src: "creditsB.png", id: "creditsB", src: "credits.png", id: "credits", src: "paddle.png", id: "cpu", src: "paddle.png", id: "joueur", src: "ball.png", id: "ball", src: "win.png", id: "gagner", src: "perdez.png", id: "perdez", src: "playerScore.mp3 | playerScore.ogg", id: "playerScore", src: "ennemiScore.mp3 | ennemi.ogg", id: "ennemie" ", src:" hit.mp3 | hit.ogg ", id:" hit ", src:" wall.mp3 | wall.ogg ", id:" mur "];
Dans la variable manifeste, nous plaçons un tableau de fichiers que nous voulons charger (et fournissons un identifiant unique pour chacun). Chaque son a deux formats - MP3 et OGG - car différents navigateurs sont (in) compatibles avec différents formats.
preloader = new PreloadJS (); preloader.installPlugin (SoundJS); preloader.onProgress = handleProgress; preloader.onComplete = handleComplete; preloader.onFileLoad = handleFileLoad; preloader.loadManifest (manifeste);
Ici, nous configurons l'objet Preloader à l'aide de PreloadJS PreloadJS est un nouvel ajout aux bibliothèques CreateJS et très utile..
Nous créons un nouvel objet PreloadJS et le plaçons dans le précharge variable, puis attribuez une méthode à chaque événement (onProgress, onComplete, onFileLoad). Enfin nous utilisons le précharge pour charger le manifeste que nous avons créé précédemment.
Ticker.setFPS (30); Ticker.addListener (scène);
Ici, nous ajoutons l’objet Ticker à la scène et fixons la cadence de prise de vue à 30 FPS; nous l'utilisons plus tard dans le jeu pour la enterFrame fonctionnalité.
function handleProgress (event) // utilise event.loaded pour obtenir le pourcentage du chargement function handleComplete (event) // déclenché lorsque tout le chargement est terminé function handleFileLoad (event) // déclenché à la fin du chargement d'un fichier individuel switch (event.type) case PreloadJS.IMAGE: // image chargée var img = new Image (); img.src = event.src; img.onload = handleLoadComplete; window [event.id] = new Bitmap (img); Pause; case PreloadJS.SOUND: // le son est chargé handleLoadComplete (); Pause;
Passons en revue les fonctions:
handleProgress - Dans cette fonction, vous pourrez suivre le pourcentage d'avancement du chargement en utilisant ce paramètre: event.loaded. Vous pouvez l'utiliser pour créer par exemple une barre de progression.handleComplete - Cette fonction est appelée une fois que tous les fichiers ont été chargés (au cas où vous voudriez y placer quelque chose).handleFileLoad - Puisque nous chargeons deux types de fichiers - les images et les sons - nous avons cette fonction qui les traitera séparément. S'il s'agit d'une image, nous créons une image bitmap et la plaçons dans une variable (dont le nom est identique à l'ID de l'image chargée), puis nous appelons le handleLoadComplete fonction (que nous écrirons ensuite); si c'est un son, nous appelons simplement le handleLoadComplete immédiatement.Parlons maintenant du handleLoadComplete fonction que je viens de mentionner:
function handleLoadComplete (event) totalLoaded ++; if (manifest.length == totalLoaded) addTitleView ();
C'est une fonction assez simple. on augmente le totalLoaded variable (qui contient le nombre d’actifs chargés jusqu’à présent), puis nous vérifions si le nombre d’articles de notre manifeste est identique au nombre d’actifs chargés et, le cas échéant, passez à l’écran du menu principal..
fonction addTitleView () //console.log("Add Title View "); 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 (); // Bouton d'auditeurs startB.onPress = tweenTitleView; creditsB.onPress = showCredits; Rien de spécial ici. Nous plaçons les images du fond, du bouton Démarrer et du bouton Crédits sur la scène et nous lions onPress des gestionnaires d’événements aux boutons Démarrer et Crédits.
Voici les fonctions qui affichent et suppriment l’écran des crédits et le tweenTitleView qui commence le jeu:
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; // 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); // Fonction Tween Title View tweenTitleView () // Démarrer le jeu Tween.get (TitleView) .to (y: -320, 300) .call (addGameView);
Nous avons atteint la partie principale de ce tutoriel qui est le code du jeu lui-même.
Tout d’abord, nous devons ajouter tous les actifs nécessaires à la scène, donc nous le faisons dans le addGameView une fonction:
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.x = 211; playerScore.y = 20; cpuScore = nouveau texte ('0', 'Arial gras 20px', '# A3FF24'); cpuScore.x = 262; cpuScore.y = 20; stage.addChild (playerScore, cpuScore, joueur, cpu, balle); stage.update (); // Démarrer le programme d'écoute bg.onPress = startGame; Encore une fois, une fonction assez simple qui place les objets à l’écran et ajoute un mouseEvent à l’arrière-plan, de sorte que lorsque l’utilisateur clique dessus, le jeu démarre (nous appellerons le démarrer jeu une fonction).
Passons en revue le démarrer jeu une fonction:
fonction startGame (e) bg.onPress = null; stage.onMouseMove = movePaddle; Ticker.addListener (tkr, false); tkr.tick = update;
Ici, comme vous pouvez le voir, en plus d’ajouter un onMouseMove événement qui va déplacer notre pagaie. Nous ajoutons le cocher événement, qui appellera le mettre à jour fonction dans chaque cadre.
Passons en revue le movePaddle et réinitialiser les fonctions:
function movePaddle (e) // Déplacement de la souris player.y = e.stageY; / * Reset * / function reset () ball.x = 240 - 15; ball.y = 160 - 15; player.y = 160 - 37,5; cpu.y = 160 - 37,5; stage.onMouseMove = null; Ticker.removeListener (tkr); bg.onPress = startGame;
Dans movePaddle, nous plaçons essentiellement la palette de l'utilisateur à la coordonnée y de la souris.
Dans réinitialiser, nous faisons quelque chose de similaire à addGameView, sauf qu'ici nous n'ajoutons aucun élément graphique car ils sont déjà à l'écran.
En utilisant le alerte fonction nous allons afficher le popup gagnant et perdant:
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);
Maintenant, pour la dernière partie de notre tutoriel, nous allons travailler sur le mettre à jour fonction (qui se produit dans chaque image du jeu - similaire à Flash onEnterFrame):
function update () // Mouvement de balle ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed; // Mouvement Cpu si (cpu.y < ball.y) cpu.y = cpu.y + 4; else if(cpu.y > ball.y) cpu.y = cpu.y - 4; // Collision de mur si ((ball.y) < 0) ySpeed = -ySpeed; SoundJS.play('wall'); ;//Up if((ball.y + (30)) > 320) ySpeed = -ySpeed; SoundJS.play ('wall');; // down / * Score du processeur * / 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'); / * Cpu collision * / 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'); /* Stop Paddle from going out of canvas */ if(player.y >= 249) player.y = 249; / * Recherchez Win * / if (playerScore.text == '10') alert ('win'); / * Vérifier la fin du jeu * / if (cpuScore.text == '10') alert ('lost'); Ça fait peur, n'est-ce pas? Ne vous inquiétez pas, nous allons examiner chaque partie et en discuter.
// Mouvement de balle ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed;
Dans chaque image, la balle se déplace en fonction de ses valeurs de vitesse x et y
// Mouvement du processeur si ((cpu.y + 32) < (ball.y-14)) cpu.y = cpu.y + cpuSpeed; else if((cpu.y+32) > (ball.y + 14)) cpu.y = cpu.y - cpuSpeed;
Nous avons ici l'IA de base de l'ordinateur, dans laquelle la palette de l'ordinateur suit simplement la balle sans aucune logique particulière. Nous comparons simplement l’emplacement du centre de la raquette (c’est pourquoi nous ajoutons 32 pixels à la valeur cpu Y) à l’emplacement de la balle, avec un petit décalage, et déplaçons la raquette de haut en bas si nécessaire..
si ((ball.y) < 0) //top ySpeed = -ySpeed; SoundJS.play('wall'); ; if((ball.y + (30)) > 320) // yspeed bottom = -ySpeed; SoundJS.play ('mur'); ; Si la balle frappe la bordure supérieure ou inférieure de l'écran, la balle change de direction et nous jouons le son du mur frappé.
/ * 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'); La connexion au score est simple: si le ballon passe les limites gauche ou droite, il augmente respectivement le score du joueur ou de la CPU, joue un son et réinitialise la position des objets à l'aide de la touche réinitialiser fonction dont nous avons discuté plus tôt.
/ * Collision de processeur * / 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'); Ici, nous traitons des collisions de la balle avec les palettes; chaque fois que la balle frappe une des palettes, la balle change de direction et un son est joué
si (player.y> = 249) player.y = 249;
Si la pagaie du joueur sort des limites, nous la remettons dans les limites..
/ * Recherchez Win * / if (playerScore.text == '10') alert ('win'); / * Vérifier la fin du jeu * / if (cpuScore.text == '10') alert ('lost'); Dans cet extrait, nous vérifions si le score d'un joueur a atteint 10 points et, le cas échéant, nous affichons le menu contextuel gagnant ou perdant (en fonction de son statut de gagnant)..
Ça y est, vous avez créé un jeu entier de pong avec CreateJS. Merci d'avoir pris le temps de lire ce tutoriel.
