, lære createjs ved at bygge en html5 pong spil,,,,, 14,,,,,,,,, 45,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, nettet bevæger sig hurtigt - så hurtigt, at vores oprindelige easeljs tutorielle allerede er forældet.i denne forelæsning, vil du lære at bruge de nye createjs suite ved at skabe en enkel pong klon.,,, endelige resultat forpremiere, lad os tage et kig på det endelige resultat, vi arbejder hen imod:,,, klik til at spille denne lektion er baseret på carlos yañez er at skabe en pong "html5 med easeljs, som igen bygger på hans begyndt med easeljs guide.den grafiske og lydeffekter, er taget fra den tidligere tutor.,, trin 1: skabe,.,, vil dette være vores vigtigste,., *, <!DOCTYPE html> <html> \t<head> \t\t<title>Pong</title> \t\t \t\t<style>/* Removes Mobile Highlight */*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> \t\t<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script> \t\t<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script> \t\t<script src="http://code.createjs.com/soundjs-0.2.0.min.js"></script> \t\t<script src="http://code.createjs.com/preloadjs-0.1.0.min.js"></script> \t\t<script src="http://code.createjs.com/movieclip-0.4.1.min.js"></script> \t\t<script src="assets/soundjs.flashplugin-0.2.0.min.js"></script> \t\t<script src="Main.js"></script> \t\t \t</head> \t<body onload="Main();"> \t\t<canvas id="PongStage" width="480" height="320"></canvas> \t</body> </html>,As you can see, it’s pretty short and consists mainly of loading the CreateJS libraries.,Since the release of CreateJS (which basically bundles all the separate EaselJS libraries) we no longer have to download the JS files and host them on our website; the files are now placed in a CDN (Content Delivery Network) which allows us to load these files remotely as quickly as possible.,Let’s review the code:, <style>/* Removes Mobile Highlight */*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>,This line removes the mobile highlight which may appear when you trying at spille spillet på mobile.(The mobile highlight causes the canvas object to get highlighted and thus ignore your finger movements.),Next up, we have the loading of the CreateJS libraries:> ,, <script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script> \t\t<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script> \t\t<script src="http://code.createjs.com/soundjs-0.2.0.min.js"></script> \t\t<script src="http://code.createjs.com/preloadjs-0.1.0.min.js"></script> \t\t<script src="http://code.createjs.com/movieclip-0.4.1.min.js"></script>,This code loads the JS files from the CreateJS CDN and it basically allows us to use any of the CreateJS functions in our code,Next, we will load the Soundjs usb - stik af, hvilket giver en god støtte for browsere, der ikke støtte html5 lyd.dette gøres ved hjælp af en omvendt (en flash genstand) til at indlæse lyder. < manuskript src = "aktiver /soundjs. flashplugin-0.2.0. min.js" > < /manuskript > i dette tilfælde vil vi ikke bruge cdn, men vi vil downloade soundjs bibliotek fra http: //////////////createjs. kom /#!/SoundJS/download and place the ,soundjs.flashplugin-0.2.0.min.js, and ,FlashAudioPlugin.swf, files in a local folder named ,assets,.,Last among the JS files, we’ll load the ,Main.js, file which will contain all the code to our game:, <script src="Main.js"></script>,Finally, let’s place a Canvas object on our stage., <body onload="Main();"> \t\t<canvas id="PongStage" width="480" height="320"></canvas> \t</body>,Now we can start working on the game code., , Step 2: The Variables,Our game code will be inside a file named ,Main.js,, so create and save this now.,First of all, let’s define variables for all the graphic objects in the game:, var canvas; //Will be linked to the canvas in our index.html side var fase; //svarer til fase i as3; vi vil tilføje "børn" den //grafik //[baggrunden] var bg; //baggrund grafisk //[titel] var på vigtigste; //den vigtigste baggrund var startb; //begyndelsen knap i hovedmenu var creditsb; //kreditterne knap i hovedmenu //[kreditter] var kreditter; //kreditterne skærm //[kamp mening] var spiller; //spilleren padle grafisk var bolden; //bolden grafisk var cpu; //cpu 'en padle var vinde; //den vindende pop - up - var miste; //den tabende pop - up - jeg har tilføjet en bemærkning for hver variabel, så vil du vide, hvad vi vil læsse i denne variabel, næste gang, de scorer: //[score] var playerscore; //den vigtigste aktør score var cpuscore; //cpu' en score var cpuspeed = 6; //hastigheden af cpu 'en åre, hurtigere, det er sværere at spillet er, vil vi, har brug for variabler, for den hurtighed, bolden: //variabler var xspeed = 5, var yspeed = 5, kan du ændre disse værdier for, hvad du vil, hvis du vil gerne gøre spillet lettere eller sværere. hvis du er en flash entreprenør, det ved du flash, onenterframe, er meget nyttige, når at lege, som der er ting, som skal ske i enhver given ramme.(hvis de ikke er fortrolig med denne idé, tjek denne artikel på spil, loop.), har vi en tilsvarende for, onenterframe, i createjs, og det er det, hjerte, genstand, som kan løbe kode hver en brøkdel af et sekund.lad os skabe en variabel, der er link til det:, var tkr = nye ting, så har vi preloader, som vil bruge de nye preloadjs metoder. //preloader var preloader; var åbenbar, var totalloaded = 0, preloader, - vil indeholde de preloadjs objekt.,, åbenbart, - vil holde listen over sager, vi er nødt til at lade.,, totalloaded, - denne variabel vil holde antallet af filer i browseren. sidst, men ikke mindst på vores liste over variabler, vi har, titleview,, der har flere grafik inden for at vise dem sammen (som et lyn. displayobjectcontainer,), var titleview = nye container(); lad os gå videre til de vigtigste funktion...,, trin 3: main() funktion, denne funktion er den første funktion, der løber efter alle erfiler fra,., er ladt.men hvad kalder denne funktion?- husker denne linje fra,., fil?, < organ onload = "main();" > denne kode snippet hedder det, at når de html (og er biblioteker) lastes, vigtigste funktion bør løbe. lad os gennemgå det:, funktion main() {* forbindelse lærred * /lærred = dokument. getelementbyid ('pongstage '); trin = ny fase (canvas); stage.mouseeventsenabled = sandt; /* der flash - stik af for - browsere, der ikke støtte soundjs * /soundjs.flashplugin.base_path = "aktiver /"; hvis (!soundjs. checkplugin (korrekt)) (varsling ("fejl!"); return; } \tmanifest = [ \t\t\t\t{src:"bg.png", id:"bg"}, \t\t\t\t{src:"main.png", id:"main"}, \t\t\t\t{src:"startB.png", id:"startB"}, \t\t\t\t{src:"creditsB.png", id:"creditsB"}, \t\t\t\t{src:"credits.png", id:"credits"}, \t\t\t\t{src:"paddle.png", id:"cpu"}, \t\t\t\t{src:"paddle.png", id:"player"}, \t\t\t\t{src:"ball.png", id:"ball"}, \t\t\t\t{src:"win.png", id:"win"}, \t\t\t\t{src:"lose.png", id:"lose"}, \t\t\t\t{src:"playerScore.mp3
lære createjs ved at bygge en html5 pong spil
Next Page:workshop: flux