{"id":3041,"date":"2014-04-12T18:39:46","date_gmt":"2014-04-13T01:39:46","guid":{"rendered":"http:\/\/www.nathalielawhead.com\/candybox\/?p=3041"},"modified":"2014-12-17T20:45:12","modified_gmt":"2014-12-18T03:45:12","slug":"tutorial-building-a-game-in-edge-animate-offender","status":"publish","type":"post","link":"https:\/\/www.nathalielawhead.com\/candybox\/tutorial-building-a-game-in-edge-animate-offender","title":{"rendered":"Tutorial: Building A Game In Edge Animate (Offender)"},"content":{"rendered":"

Introduction:<\/strong><\/p>\n

I’ve decided to build this first Tetrageddon Games<\/a> “mini-game” tutorial, Offender, in Adobe Edge Animate<\/a> because the program is still very new, and there isn’t much out there on it in terms of game development.<\/p>\n

I think this will make a great “getting started” resource for newcomers, as well as demonstrate the capabilities of Edge Animate.<\/p>\n

In this tutorial I hope to offer a solid example of building a game with the program.
\nThis is the first part of a series discussing HTML5 game development.<\/p>\n

* DOWNLOAD<\/strong> the source files here: Offender_HTML.zip<\/a><\/p>\n

* Play the finished game here: Offender HTML<\/a><\/p>\n

* Visit the website for it here: http:\/\/offender.alienmelon.com\/<\/a><\/p>\n

Note, Edge Animate is being used in some<\/em> game projects already. A few interesting links I’ve stumbled across while working with it are:<\/p>\n

* Space Invaders RPG. Building a Game in Adobe Edge Animate<\/a><\/p>\n

* Adobe’s Episode 10: Controllable characters in an interactive environment<\/a><\/p>\n

* Create animated game HUD with Adobe Edge Animate and Coherent UI (Part 1)<\/a><\/p>\n

In terms of HTML5 game development<\/strong>, there are many frameworks out there for making HTML5 games. A list slowly growing some of the most popular are<\/del> is:<\/p>\n

* Kiwi.js<\/a>
\nKiwi.js is a fun and friendly Open Source HTML5 Game Engine. Some people call it the WordPress of HTML5 game engines…<\/p>\n

* seen.js<\/a>
\nLibrary – Render 3D scenes into SVG or HTML5 Canvas.<\/p>\n

* Isomer<\/a>
\nAn isometric graphics library for HTML5 canvas. Isomer is available for free under the MIT License, but you can also pay for it. <\/p>\n

* KineticJS<\/a>
\nKineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.<\/p>\n

* createjs.com\/<\/a>
\nA suite of Javascript libraries & tools for building rich, interactive experiences with HTML5.<\/p>\n

* https:\/\/github.com\/photonstorm\/phaser<\/a>
\nPhaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.<\/p>\n

* http:\/\/html5quintus.com\/<\/a>
\nQuintus is an easy-to-learn, fun-to-use JavaScript HTML5 game engine for mobile, desktop and beyond!<\/p>\n

* https:\/\/github.com\/GoodBoyDigital\/pixi.js<\/a>
\nSuper fast HTML 5 2D rendering engine that uses webGL with canvas fallback<\/p>\n

* http:\/\/www.pandajs.net\/<\/a>
\nFree HTML5 game engine for mobile and desktop games<\/p>\n

* http:\/\/spelljs.com\/<\/a>
\nThe SpellJS framework enables you to develop games for the web and mobile platforms. It hides the additional effort associated with the development of cross-platform applications so that you can concentrate on creating games instead of building cross-platform infrastructure. The integrated development enviroment SpellEd assists with the creation of content.<\/p>\n

* http:\/\/www.babylonjs.com\/<\/a>
\nBabylon.js is a 3D engine based on webgl and javascript. It supports many features, and I’m drooling over it.<\/p>\n

* Blend4Web<\/a>
\nBlend4Web is a software framework for authoring and interactive rendering of three-dimensional graphics and audio in browsers, i.e. a three-dimensional engine. The platform is intended for creating visualizations, presentations, online-shops, games and other rich internet applications.
\nThe Blend4Web framework is integrated tightly with 3D modeling and animation tool Blender (hence the name). The content is rendered by the means of WebGL and other browser technologies, without the use of plugins.
\nTechnically Blend4Web is a library for web pages, a Blender addon and some tools for debugging and optimization.<\/p>\n

* Canvas Query<\/a>
\nCanvas for 2d gamedevelopers. Out of box canvas, keyboard, mouse, events.
\nhttp:\/\/canvasquery.com<\/a><\/p>\n

* Lightweight Java Game Library 3<\/a>
\nLWJGL is a Java library that enables cross-platform access to popular native APIs useful in the development of graphics (OpenGL), audio (OpenAL) and parallel computing (OpenCL) applications. This access is direct and high-performance, yet also wrapped in a type-safe and user-friendly layer, appropriate for the Java ecosystem.<\/p>\n

* Construct 2<\/a>
\nThis is the perfect<\/strong> tool for beginners or non-technical artists. Construct 2 is a powerful ground breaking HTML5 game creator designed specifically for 2D games. It allows anyone to build games \u2014 no coding required! It’s almost entirely drag-and-drop.<\/p>\n

* CopperLicht<\/a>
\nFree and fast WebGL JavaScript 3D Engine with World Editor. CopperLicht is an open source WebGL library and JavaScript 3D engine for creating games and 3D applications in the webbrowser. It uses the WebGL canvas supported by modern browsers and is able to render hardware accelerated 3d graphics without any plugins.<\/p>\n

* pixijs<\/a>
\nPixi.js is a devoted rendering engine. There are a host of other engines covering game, sound and physics etc. and they all work beautifully with Pixi.<\/p>\n

* cocos2d<\/a>
\nCross platform open source free 2D game engine for mobile gamedev, that is fast and stable, easy to learn and use.<\/p>\n

* PuzzleScript<\/a>
\nPuzzleScript is an open-source HTML5 puzzle game engine.<\/p>\n

Edge Animate Resources:<\/strong><\/p>\n

* Edge Animate Docs<\/a><\/p>\n

* Adobe Edge Animate JavaScript API<\/a><\/p>\n

* Edgehero.js<\/a><\/p>\n

*************<\/p>\n

Setting up the Game Stage:<\/strong><\/p>\n

\"\"<\/p>\n

When first working with Edge scope can be a surprise to beginners — presents an issue. A great article on the subject is this post (HERE<\/a>). To avoid problems, actions are typically added to document.compositionReady<\/code>.<\/p>\n

In this case “global<\/code>” variables, and sounds, are created in document.compositionReady<\/code>.<\/p>\n

Basic keyboard events are in document.keydown<\/code>, and document.keyup<\/code>, which reference document.compositionReady<\/code>‘s “global” variables.
\nThe actual game is in the stage’s trigger (see label “game<\/code>“).
\nThe game takes place on label “game<\/code>“. I thought it most convenient to manage scope by keeping the bulk of the game engine in that trigger.
\nVariables, states, arrays, etc… can set\/reset without conflicting with other areas.<\/p>\n

Animated\/transitions that will change as the game is played are grouped in symbols.
\nIt’s a good idea to plan this carefully, and use symbols (and their timeline) more than sending the “playhead” back and forth on the stage’s timeline (keep things manageable and grouped up). It will be easier to manage when you code.
\nControl symbols, and use the stage’s timeline for serious transitions (like changing from the main menu, to the highscores area).<\/p>\n

\"\"<\/p>\n

In this case we have 3 “screens”. The “play area”, the “game over” screen, and the “enter your name” screen (succeeding “game over”).
\nThe above image shows the play area. There are 4 important factors here.<\/p>\n

1) The “Nightmare” symbol. This is an “extra” that shows\/hides as you progress. While you are playing, the bunny is dreaming\/thinking of all the terrible things that will happen to him if he gets abducted. These show in the corner of the screen in little comic book like “star” panels. There are two versions of a nightmare, and a random one is selected, and randomly plays. <\/p>\n

2) The “current level” indicated by how many bunnies are left in bed. This is like a countdown before winning.
\nWhenever the player reaches a certain score, a bunny is pulled (abducted) out of its bed, until the player reaches the last bunny.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

Progress is indicated in this manner, so I grouped all the bunnies in a symbol (Beds), and the animated bunnies (level 2, and 3) are also symbols where the animation takes place. When the level is to progress, the game will simply play that transition…<\/p>\n

\"\"<\/p>\n

3) Your score. Each bunny you abduct with your ship adds a point. Each bunny that escapes off screen deducts a point.<\/p>\n

4) The play area. This is the field. Bunnies created via sym.createChildSymbol<\/code> are placed here (total of 10). The ship, the ships ray, and enemy ships are also added (created dynamically).<\/p>\n

The Game Over Screen
\n\"\"
\nIs a symbol, containing the buttons, and the player’s score. This shows when the player is killed by an enemy ship. “Surrender” will call up the “enter your name” screen. “Overachieve” is the try again option, and will re-start the game.<\/p>\n

Enter Your Name Screen
\n\"\"
\nThe player will enter their name here. Saving score, and name is done using the HTML5 localStorage<\/code> feature. More notes bellow.<\/p>\n

*************<\/p>\n

Sound:<\/strong><\/p>\n

There are a number of ways to add sound to your project. None<\/em> of them are 100% reliable, due to browser support. See: http:\/\/caniuse.com\/audio<\/a>
\nMy recommendation for Edge Animate is to either use Edge Commons’s Dirty Little Helpers: http:\/\/www.edgedocks.com\/edgecommons<\/a>
\nHere is the tutorial for setting it up: Sound playback with volume control in Animate with Edge Commons<\/a><\/p>\n

Or Buzz!
\nhttp:\/\/buzz.jaysalvat.com\/<\/a><\/p>\n

Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It degrades silently on non-modern browsers.<\/p><\/blockquote>\n

I will be using Buzz.<\/p>\n

Add the script via Library > Scripts + tab<\/em>, and navigate to where you have it.<\/p>\n

\"\"<\/p>\n

Then in document.compositionReady<\/code> (to add the compositionReady<\/code> event click on the + next to Stage). The following adds a sound. To play call Aud_GameTrack.play();<\/code><\/p>\n

Aud_GameTrack = new buzz.sound("audio\/mainmenu-loop", {formats: ["wav", "ogg", "mp3"],\r\n    preload: true,\r\n    autoplay: true,\r\n    loop: true\r\n});\r\n<\/code><\/pre>\n
Formats<\/code> = Various formats for browsers. Not all browsers support the same sound format, so you need to include the most common ones. See: http:\/\/buzz.jaysalvat.com\/documentation\/sound\/<\/a>
\nThe best combination is OGG<\/code> + MP3<\/code> formats (according to buzz).<\/p>\n
Also, mobile devices will not load\/play sound without user intervention (no autoplay). The sound must be triggered via user input (a button press, for example). iPhone and iPad only play one sound at a time, and you cannot change the volume dynamically.
\nSee Overcoming iOS HTML5 audio limitations<\/a> And Making HTML5 audio actually work on mobile<\/a>, for some notes on that.<\/p>\n
After you have created your sound (above), in document.compositionReady<\/code>, make sure you call:<\/p>\n
Aud_GameTrack.load();\r\n<\/code><\/pre>\n
Buzz is nice, and has a number of settings.
\nThe above (Aud_GameTrack.load<\/code>) is a loop, and the main “soundtrack” for the game.
\nI manually made it longer, so it appears to loop. You will notice a “loop gap”. It takes a bit more hacking around to get seamless audio looping (Flash does it well, but it’s trickier in javascript\/html). Here are some notes for those interested in getting that to work:
\nStackexchange – MP3 gapless looping help?<\/a>
\nHTML5 Audio Loops<\/a>
\nBut this is a simple game, so I’m keeping the sound aspect simple.<\/p>\n
All the sounds in the game are as follows:<\/p>\n
\/\/SOUND\r\n\r\n\/\/I manually made the sound longer so it appears to loop -- nevermind the gap\r\n\/\/it is a bit more hacking around to get seamless audio looping (Flash does it well)\r\n\/\/here are some notes for those interested in getting it to work\r\n\/\/http:\/\/sound.stackexchange.com\/questions\/8916\/mp3-gapless-looping-help\r\n\/\/http:\/\/forestmist.org\/blog\/html5-audio-loops\/\r\n\/\/the main soundrack of the game:\r\nAud_GameTrack = new buzz.sound("audio\/mainmenu-loop", {formats: ["wav", "ogg", "mp3"], preload: true, loop: true});\r\n\/\/plays at the end of the game:\r\nAud_GameTrack_2 = new buzz.sound("audio\/mainmenu-under-loop2", {formats: ["wav", "ogg", "mp3"], preload: true, loop: true});\r\nAud_ScoresTrack = new buzz.sound("audio\/scores-loop", {formats: ["wav", "ogg", "mp3"], preload: true, loop: true});\r\nAud_KeysTrack = new buzz.sound("audio\/Keys-loop", {formats: ["wav", "ogg", "mp3"], preload: true, loop: true});\r\n\/\/Menu sounds\r\nAud_MenuPreLoop = new buzz.sound("audio\/Mainmenu-preloop", {formats: ["wav", "ogg", "mp3"], preload: true});\r\nAud_MenuLoop = new buzz.sound("audio\/mainmenu-loop3", {formats: ["wav", "ogg", "mp3"], preload: true, loop: true});\r\n\r\n\/\/Intro\r\n\/\/Aud_LogoMoron = new buzz.sound("audio\/morons-blb", {formats: ["wav", "ogg", "mp3"]});\r\nAud_Intro = new buzz.sound("audio\/Intro", {formats: ["wav", "ogg", "mp3"], preload: true});\r\n\r\nAud_Nightmare = new buzz.sound("audio\/JAPAN-3", {formats: ["wav", "ogg", "mp3"]});\r\nAud_Explode = new buzz.sound("audio\/explode", {formats: ["wav", "ogg", "mp3"],preload: true});\r\nAud_End = new buzz.sound("audio\/End", {formats: ["wav", "ogg", "mp3"],preload: true});\r\nAud_Hit1_ = new buzz.sound("audio\/daaaam-1", {formats: ["wav", "ogg", "mp3"]});\r\nAud_Hit2_ = new buzz.sound("audio\/daaaam-2", {formats: ["wav", "ogg", "mp3"]});\r\nAud_Hit3_ = new buzz.sound("audio\/daaaam-3", {formats: ["wav", "ogg", "mp3"]});\r\n\r\nAud_BeamLoop = new buzz.sound("audio\/beam-loop", {formats: ["wav", "ogg", "mp3"],\r\n    loop: true\r\n});\r\n\r\nAud_Laser = new buzz.sound("audio\/LASER", {formats: ["wav", "ogg", "mp3"]});\r\n\r\n\/\/load them with Edge\r\nAud_GameTrack.load();\r\nAud_GameTrack_2.load();\r\nAud_ScoresTrack.load();\r\nAud_KeysTrack.load();\r\nAud_MenuPreLoop.load();\r\nAud_MenuLoop.load();\r\nAud_Intro.load();\r\nAud_Nightmare.load();\r\nAud_Explode.load();\r\nAud_End.load();\r\nAud_Hit1_.load();\r\nAud_Hit2_.load();\r\nAud_Hit3_.load();\r\n\r\n\/\/stop all currently playing "hits" for menu and anywhere else they trigger on button overs\r\nsym.stopHits = function(){\r\n    Aud_Hit1_.stop();\r\n    Aud_Hit2_.stop();\r\n    Aud_Hit3_.stop();\r\n}\r\n<\/code><\/pre>\n
The last one is a function that stops the “hits” for the menu. When you mouse over buttons a hit plays. To keep it from piling up, I stop all of them, before playing the button mouseover sound.<\/p>\n
*************<\/p>\n
Fonts:<\/strong><\/p>\n
The original Bitmap font was from: 04.jp<\/a><\/p>\n
But in this version I am using the Google Font, Press Start 2P<\/a>.
\n\"\"<\/p>\n
To get web fonts working in Edge Animate follow Adobe’s walkthrough: Web fonts and Edge, together at last.<\/a><\/p>\n
*************<\/p>\n
All The “Global” Variables Of document.compositionReady<\/code><\/strong><\/p>\n
Aside from sound, there are a slew of variables in document.compositionReady<\/code>. These are “global” variables that I will need to access throughout the game, in all the different places. Like document.keydown<\/code>, or button events. I put them here so that scope will not be an issue.<\/p>\n
The first, and most important is sym.SCENE<\/code>. I save the current “scene” that the game is on here. For example, if you are viewing the highscore area it is set to “scores”, on the main menu it’s “menu”, in the actual game it’s “game”. I do this for the keyboard. If you are playing the game, the keyboard for the “game” unlocks by checking against sym.SCENE<\/code> (if sym.SCEME==\"game\"<\/code>). If I where to have custom keyboard events for menu, the keyboard for “menu” would unlock. This gives me a platform to build on if I where to make this game keyboard only, or expand the keyboard functionality. More on that in the Keyboard Controls<\/em> section.<\/p>\n
The first set of “global” variables ranges from numbers like scores, time, enemyAmount<\/code>, to various sprite speeds, to the current level.
\nBooleans serve as flags, these are for the keyboard (down\/up).<\/p>\n
The “\/\/symbol references<\/code>” chunk saves symbol names (so they can be more easily referred to through code).<\/p>\n
The two arrays are where created symbols (enemies and bunnies) are pushed.<\/p>\n
The “\/\/X Y positions<\/code>” bit is where I save starting positions for created sprites, as well as where the centerX\/Y of the stage is.<\/p>\n
Finally there are “\/\/Timers - intervals<\/code>“. I saved the names of all setIntervals<\/code> here to manage the scope for them. They can be stopped better this way.<\/p>\n
\/\/"GLOBAL" VARIABLES\r\n\/\/what label? \r\n\/\/will check against this and if it is "game" then game functionality will unlock\r\n\/\/if it is menu then keyboard for menu will unlock, etc...\r\nsym.SCENE; \r\n\r\nsym.score = 100;    \r\nsym.time = 1;\r\nsym.enemyAmount = 1;\/\/current amount\r\nsym.enemyMax = 3;\/\/maximum amount of enemies alowed at once\r\nsym.timeElapsed = 1;\r\nsym.playerSpeed = 600;\/\/5\r\nsym.playerSpeed_left = 600;\/\/5\r\nsym.playerSpeed_right = 600;\/\/5\r\nsym.bunnySpeed = 5000;\/\/will be random + itself, this is the default minimum value\r\n\/\/sym.bunnyAbAmnt = amount of abducted bunnies, if it's above a certain number then enemies will start appearing\r\n\/\/this keeps the game from generating enemies right away -- gives the player time to adjust\r\nsym.bunnyAbAmnt = 0;\r\n\/\/goals (before leveling up)\r\nsym.lvl1_goal = 300;\r\nsym.lvl2_goal = 530;\r\n\/\/targeted time (how long you have been playing before you can go to next level)\r\nsym.lvl1_time = 300;\r\nsym.lvl2_time = 500;\r\n\/\/above but for winning\r\nsym.win_time = 700;\r\nsym.win_goal = 800;\r\n\r\nsym.bNum = 10;\/\/maximum number of bunnies on stage\r\n\r\n\/\/Booleans - flags\r\nsym.bool_left = false;\r\nsym.bool_right = false;\r\n\r\n\/\/.data to keep it .play() called once\r\n\/\/may only play once if it is true then the transition to next level may play\r\nsym.mc_b1_data = false;\r\nsym.mc_b2_data = false;\r\n\r\n\/\/symbol references\r\nsym.stage = sym.$("Stage");\r\nsym.mc_b1 = sym.getSymbol("Beds").getSymbol("IMG_Sprite_Bed02");\r\nsym.mc_b2 = sym.getSymbol("Beds").getSymbol("IMG_Sprite_Bed03");\r\nsym.mc_nightmare = sym.getSymbol("Nightmare");\r\nsym.mc_transition = sym.getSymbol("Transition_Blink");\r\nsym.mc_gameover = sym.getSymbol("Screen_End");\r\nsym.mc_score = sym.getSymbol("Screen_Score");\r\nsym.mc_ship;\r\nsym.mc_ray;\r\nsym.txt_score = sym.$("txt_score");\r\n\r\n\/\/Arrays\r\nsym.arr_bunnies = [];\r\nsym.arr_enemies = [];\r\n\r\n\/\/X Y positions\r\nsym.shipY = 70;\/\/25\r\nsym.enemyY = 88;\r\nsym.rayY = 66;\/\/66\r\nsym.bunnyY = 180;\r\n\/\/centering\r\nsym.centerX = sym.stage.width()\/2;\r\nsym.centerY = sym.stage.height()\/2;\r\n\/\/left\/right bounds\r\nsym.maxX = sym.stage.width();\r\nsym.minX = 10;\/\/minimum placement for ship\r\n\/\/player X (incremented\/decremented via keyboard input, initial value is center)\r\nsym.shipX = sym.centerX;\r\n\r\n\/\/Timers - intervals\r\nsym.timerInt;\r\nsym.timeElapsedInt;\r\nsym.nightmareInterval;\r\nsym.enemyInterval;\r\nsym.shipHitInterval;\r\n<\/code><\/pre>\n
*************<\/p>\n
Collision detection – The Bunnies And Enemies<\/strong><\/p>\n
Because Edge Animate was never meant for games (according to general sentiment) this is very limited.
\nThere are a number of discussions out there. For example both jquery – Detecting div collision<\/a>, and Please recommend a JQuery plugin that handles collision detection for draggable elements<\/a> are good summaries of how to tackle it, and this thread<\/a> on Adobe Community which has some good tips. Another great 2D Collision Detection tutorial is:
\nHTML5 Canvas Game: 2D Collision Detection<\/a><\/p>\n
The best solution out there is JQuery Collision (which I highly recommend)
\nSourceForge: JQuery Collision<\/a>
\nIt is also being used in Adobe’s Episode 10: Controllable characters in an interactive environment<\/a> tutorial (which is the most thorough breakdown of hit detection in Edge Animate that I could find).<\/p>\n
I’m using simple object intersection collision detection because this is a small project.<\/p>\n
But really, for more elaborate things consider JQuery Collision<\/a><\/p>\n
Download it here: http:\/\/sourceforge.net\/projects\/jquerycollision\/<\/a><\/p>\n
And add it via Library > Scripts + tab<\/em>. Navigate to where you have it.
\n\"\"<\/p>\n
Basic collision detection code for this project is as follows:<\/p>\n
function hitTest(a, b){\r\n    \/\/\r\n    aPos = {x:parseInt(a.css('left')), y:parseInt(a.css('top'))};\r\n    bPos = {x:parseInt(b.css('left')), y:parseInt(b.css('top'))};\r\n    \/\/\r\n    return aPos.x < bPos.x + b.width() && aPos.x + a.width() > bPos.x && aPos.y < bPos.y + b.height() && aPos.y + a.height() > bPos.y\r\n}\r\n\/\/Usage\r\nvar Rectangle = sym.$("Rectangle");\r\nvar Rectangle2 = sym.$("Rectangle2");\r\nconsole.log(hitTest(Rectangle, Rectangle2));\r\n<\/code><\/pre>\n
(Thanks Adobe forms for pointing me in the right direction here!)<\/p>\n
Collision detection will take place in two cases.<\/p>\n
1) When the player presses keyboard “space” and the ship’s beam should pick up bunnies.<\/em><\/p>\n
Bunnies are dynamically created with createChildSymbol<\/code>:<\/p>\n
function makeBunny() {\r\n    for (var i = 0; i<sym.bNum; i++) {\r\n        var mc_bunny = sym.createChildSymbol("Bunny", "Stage").getSymbolElement();\r\n        \/\/push to array for access later and start moving it\r\n        \/\/bunnyM also takes care of placeing them\r\n        \/\/note: bunnies must be stored in array\r\n        \/\/for colision detection, and better access\r\n        sym.arr_bunnies.push(mc_bunny);\r\n        bunnyM(mc_bunny);\/\/movement function\r\n    }\r\n}\r\n<\/code><\/pre>\n
After they are created bunnyM<\/code> is called and each is passed as a parameter.<\/p>\n
\/\/Bunnies!\r\nfunction bunnyM(clip) {\r\n    \/\/console.log(clip);\r\n    \/\/speed, and end variables\r\n    var bEnd = sym.stage.width()-clip.width();\r\n    var bSpeed = (Math.ceil(Math.random()*sym.bunnySpeed)+sym.bunnySpeed)-500;\r\n    \/\/place it randomly (x) on the stage\r\n    clip.css({"position":"absolute", "top":sym.bunnyY + "px", "left":(Math.ceil(Math.random()*sym.stage.width())-clip.width()) + "px"});\r\n    \/\/call first to cancel queue -- just incase this could become a problem\r\n    clip.stop();\r\n    \/\/\r\n    clip.animate( {left: bEnd}, bSpeed, "linear", function(){\r\n        sym.score -= 1;\/\/"escapee" penalty\r\n        bunnyM(clip);\r\n    }\r\n    );\r\n}\r\n<\/code><\/pre>\n
bunnyM<\/code> is responsible for moving them. They are positioned with css. clip.stop<\/code> is called to stop possible previous animation queue, and finally .animate<\/code> is called. When .animate<\/code> is done it calls bunnyM<\/code> again as the complete callback function. See: https:\/\/api.jquery.com\/animate\/<\/a> for more .animate<\/code> options.<\/p>\n
Reference to them is stored in an array. This is a good idea when you are dynamically creating symbols because it’s easier to reference them later. There are other ways of getting symbols (loop through stage), but I prefer this method.<\/p>\n
When SPACE is pressed there are two functions associated with it.<\/p>\n
\/\/creating function with sym.\r\n\/\/to change scope so keyboard events can access these\r\nsym.key_onKeyDown = function() {\r\n    sym.mc_ray.show();\r\n    Aud_BeamLoop.play();\r\n    \/\/hit detection\r\n    for (var i = 0; i<sym.arr_bunnies.length; ++i){\r\n          bunnyD(sym.arr_bunnies[i]);\r\n    }\r\n};\r\nsym.key_onKeyUp = function() {\r\n    Aud_BeamLoop.stop();\r\n    sym.mc_ray.hide();\r\n}\r\n<\/code><\/pre>\n
onKeyDown<\/code> shows the ray, plays the sound, and loops through the bunnies calling bunnyD<\/code> (the collision detection function), and passing each bunny as the function parameter.<\/p>\n
AND FINALLY bunnyD<\/code> is where the magic happens.<\/p>\n
function bunnyD(clip) {\r\n    if(hitTest(sym.mc_ray, clip)){\r\n        sym.score += 1;\r\n        sym.bunnyAbAmnt+=1;\r\n        clip.stop();\/\/stop current animation queue\r\n        clip.animate( {top: 0}, 200, "linear", function(){\r\n            bunnyM(clip);\r\n        }\r\n        );\r\n    }\r\n}\r\n<\/code><\/pre>\n
If the ray hits the clip (array element) increment the score, STOP the current animation (this is good practice because it prevents issues with the animation queue<\/a> because they are animated with .animate<\/code>, and that can get funky), and then .animate<\/code> them to the top of the screen (abduct them). When the bunny reaches the top of the screen the bunnyM<\/code> function is called again (start over).<\/p>\n
AND collision detection case #2 is…
\n2) When an enemy ship hit the player.<\/em><\/p>\n
This one is simpler.
\nThere are two intervals in the game that manage enemies. enemyInit();<\/code> and sym.timerInt = setInterval(timer, 100);<\/code><\/p>\n
Timer interval takes care of incrementing the time (how long player has played), and setting the score. It also increments enemies. If the score is past lvl1_goal<\/code>, and the player has played long enough more enemies show. Up to 4 enemies can be created at a time (sym.enemyMax<\/code>). If the max has been reached they reset back to 1, and start incrementing again. This simulates “waves of attacks”.<\/p>\n
This is how timer()<\/code> looks:<\/p>\n
\/\/game timer\r\n\/\/initiates enemies\r\nfunction timer(){\r\n    \/\/set score\r\n    sym.txt_score.html(sym.score);\r\n    \/\/increment time\r\n    sym.time+=1;\r\n    \/\/increment enemies, if the score is past lvl1_goal\r\n    if (sym.time>100 && sym.score>sym.lvl1_goal-100) {\r\n        sym.time = 1;\r\n        if (sym.enemyAmount<sym.enemyMax) {\r\n            sym.enemyAmount++;\r\n        }\r\n        \/\/no more than 4 enemies, reset it\r\n        if (sym.enemyAmount == sym.enemyMax) {\r\n            sym.enemyAmount = 1;\r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>\n
Then there is enemyInit()<\/code>. It initiates the enemies (calls to create the enemy). As you play, and as you progress, the game gets more difficult (more enemies get created).
\nenemyInit<\/code> is an interval that gets called at random intervals. Difficulty is set by shortening the interval. The game gets harder because enemyInit<\/code> is called more often.<\/p>\n
Here is how it looks:<\/p>\n
\/\/enemyInit calls to create the enemy\r\n\/\/as you play, and as you progress\r\n\/\/the game gets more difficutl -- more enemies\r\nfunction enemyInit()\r\n{\r\n    clearInterval(sym.enemyInterval);\r\n    \/\/was (Math.random()*20000)+10000;\r\n    var randNum = (Math.random()*9000)+10000;\r\n    \/\/\r\n    if(sym.score>=sym.lvl1_goal-100){\r\n        randNum = (Math.random()*8000)+9000;\r\n    }\r\n    if(sym.score>=sym.lvl2_goal-200){\r\n        randNum = (Math.random()*5000)+7000;\r\n    }\r\n    if(sym.score>=sym.win_goal-400){\r\n        randNum = (Math.random()*1000)+6000;\r\n    }\r\n    if(sym.score>=sym.win_goal-200){\r\n        randNum = (Math.random()*1000)+5000;\r\n    }\r\n    \/\/if sym.bunnyAbAmnt is above the goal\r\n    \/\/then you may start creating enemies\r\n    if(sym.bunnyAbAmnt>10){\r\n        makeEnemyFire();\r\n        attachEnemyShip();\r\n    };\r\n    \/\/\r\n    sym.enemyInterval = setInterval(enemyInit, randNum);\r\n}\r\n<\/code><\/pre>\n
Notice var randNum<\/code> is fairly high at the beginning.
\nIf the score is above the goal for level 1 shorten it, if the score is above the goal for level 2 shorten it, etc… When you are just about to win the game is hardest (if(sym.score>=sym.win_goal-200)<\/code>).
\nThe very last condition keep enemies from being created RIGHT AWAY. This will give the player time to adjust to the game. They must abduct at least 10 bunnies before enemies start appearing.
\nThe final line (sym.enemyInterval = setInterval(enemyInit, randNum);<\/code>) calls the interval after all that is set up…<\/p>\n
The enemies are created with makeEnemyFire();<\/code> and attachEnemyShip();<\/code>
\nmakeEnemyFire()<\/code> serves as a warning that an enemy is approaching. The fire does nothing (has no impact on the player). The Fire appears randomly somewhere under the ship. One shot is fired per enemy that approaches.<\/p>\n
This is how it looks<\/p>\n
function makeEnemyFire(){\r\n    Aud_Laser.play();\r\n    \/\/make as much enemy fire as there are enemies, so going by sym.enemyAmount\r\n    for (var i = 1; i<sym.enemyAmount+1; i++)\r\n    {\r\n        var mc_fire = sym.createChildSymbol("Fire", "Stage").getSymbolElement();\r\n        enemyFire(mc_fire); \r\n    }\r\n}\r\n<\/code><\/pre>\n
And enemyFire(...)<\/code> is then called, passing the created symbol as a parameter.<\/p>\n
function enemyFire(clip)\r\n{\r\n    var randSpeed = (Math.random()*20)+10;\r\n    \/\/enemy fire serves as a warning that an enemy is approaching\r\n    \/\/fire does nothing, it passes the ship,\r\n    \/\/and should appear randomly somewhere under the ship, and over the bunnies\r\n    clip.css({"position":"absolute", "top":Math.ceil(Math.random()*40)+90 + "px", "left":-clip.width() + "px"});\r\n    \/\/\r\n    clip.animate( {left: (sym.stage.width()+clip.width())}, 1000, "linear", function(){\r\n        clip.remove();\/\/get rid of it when it's passed\r\n    }\r\n    );\r\n}\r\n<\/code><\/pre>\n
enemyFire(...)<\/code> animates the fire. The ‘clip<\/code>‘ is removed once it has animated to the side of the screen.
\nI am removing the symbol using .remove()<\/code>. You can also use .deleteSymbol()<\/code>. I am not certain what the difference is so I am sticking to .remove();<\/code> see: http:\/\/api.jquery.com\/remove\/<\/a><\/p>\n
attachEnemyShip();<\/code> is what creates the enemy, and pushes it to the enemy array. Simply put, it looks like this<\/p>\n
function attachEnemyShip()\r\n{\r\n    for (var i = 0; i<sym.enemyAmount; i++)\r\n    {\r\n        var mc_enemy = sym.createChildSymbol("Enemy_Ship", "Stage").getSymbolElement();\r\n        sym.arr_enemies.push(mc_enemy);\r\n        enemyShip(mc_enemy);\r\n    }\r\n}\r\n<\/code><\/pre>\n
enemyShip(...)<\/code> positions, and moves the enemy. Enemies move at a random speed. Here’s the function<\/p>\n
function enemyShip(clip)\r\n{\r\n    \/\/position ship - somewhere off screen, at same Y\r\n    var enemyStartX = (Math.random()*-500)-200;\r\n    clip.css({"position":"absolute", "top":sym.enemyY + "px", "left":enemyStartX + "px"});\r\n    \/\/random speed\r\n    var randNum = (Math.random()*10000)+5000;\r\n    \/\/move it\r\n    clip.animate({\r\n        left: (sym.stage.width()+clip.width())\r\n        }, {\r\n            duration: randNum, \r\n            queue: false,\r\n            easing: "linear", \r\n            complete: function(){\r\n                clip.remove();\r\n            }\r\n    });\r\n    \/\/start moving it up\/down -- call the starting movement\r\n    \/\/at random -- either the top most or bottom most\r\n    if(randNum>randNum\/2){\r\n        enemyShip_move2(clip);\r\n    }else{\r\n        enemyShip_move4(clip);\r\n    }\r\n}\r\n<\/code><\/pre>\n
I’m doing something different here for enemy movement. Enemies move in an “8 step” up\/down pattern (separated into respective functions).
\nI use .animate<\/code> to call the next function when a certain movement is done. This simulates the ship flying up\/down exactly how I want them (it’s very specific). They fly up, and stay just above the player giving the player a window to dodge UNDER them, OR move down and stay under the player giving the player a short window to dodge OVER them. Each enemy should randomly start on the lower level, or upper level. <\/p>\n
Here are all 8 of the movement functions:<\/p>\n
\/\/enemy ship comes in 8 steps using .anmiate to call the next when a movement is done\r\n\/\/this simulates the ship flying up\/down exactly how I want it\r\n\/\/I'm certain there are better ways of doing this, if so let me know!\r\n\/\/\r\n\/\/the starting function is called at random -- in enemyShip(clip);\r\n\/\/so when there are multiple enemies there is a random flying pattern to doge\r\nvar enemyBounceSpeed = 500; \/\/the speed of up\/down movement -- should last 0.3 seconds\r\nfunction enemyShip_move1(clip){\r\n    clip.animate({\r\n        top: 83\r\n        }, { \r\n            duration: enemyBounceSpeed, \r\n            queue: false, \r\n            easing: "easeInCubic", \r\n            complete: function(){\r\n                enemyShip_move2(clip);\r\n            }\r\n    });\r\n}\r\nfunction enemyShip_move2(clip){\r\n    clip.animate({\r\n        top: 120\r\n        }, { \r\n            duration: enemyBounceSpeed, \r\n            queue: false, \r\n            easing: "easeOutCubic", \r\n            complete: function(){\r\n                enemyShip_move3(clip);\r\n            }\r\n    });\r\n}\r\nfunction enemyShip_move3(clip){\r\n    clip.animate({\r\n        top: 60\r\n        }, { \r\n            duration: enemyBounceSpeed, \r\n            queue: false, \r\n            easing: "easeInCubic", \r\n            complete: function(){\r\n                enemyShip_move4(clip);\r\n            }\r\n    });\r\n}\r\nfunction enemyShip_move4(clip){\r\n    clip.animate({\r\n        top: 25\r\n        }, { \r\n            duration: enemyBounceSpeed, \r\n            queue: false, \r\n            easing: "easeOutCubic", \r\n            complete: function(){\r\n                enemyShip_move1(clip);\r\n            }\r\n    });\r\n}\r\n<\/code><\/pre>\n
notice in the ending condition in enemyShip(...)<\/code><\/p>\n
    \/\/start moving it up\/down -- call the starting movement\r\n    \/\/at random -- either the top most or bottom most\r\n    if(randNum>randNum\/2){\r\n        enemyShip_move2(clip);\r\n    }else{\r\n        enemyShip_move4(clip);\r\n    }\r\n<\/code><\/pre>\n
This is what calls the random top most or bottom most starting function. I did this because, when there are multiple enemies created, they will sometimes fly in zig-zag (like scissors) and the player has to time his movement carefully to dodge between them. It makes for a fun challenge. The player must pay attention.
\nI’m certain there are many<\/strong> better ways of doing this (managing enemy movement), but this seemed the best\/simplest to me.<\/p>\n
AND FINALLY enemy collision detection takes place as a setInterval<\/code>. sym.shipHitInterval = setInterval(enemyHit , 100);<\/code>
\nshipHitInterval<\/code> calls enemyHit<\/code> and this is what checks for ship vs. enemy colision. enemyHit<\/code> looks like this<\/p>\n
\r\n\/\/DEATH\r\n\/\/was the player hit by an enemy ship?\r\nfunction enemyHit(){\r\n    \/\/\r\n    for(var i = 0; i<sym.arr_enemies.length; ++i){\r\n    \/\/\r\n        if(hitTest(sym.mc_ship, sym.arr_enemies[i])){\r\n            \/\/create and place an explosion on the ship coords\r\n            var mc_explode = sym.createChildSymbol("Explode", "Stage").getSymbolElement();\r\n            mc_explode.css({"position":"absolute", "top":sym.mc_ship.position().top + "px", "left":sym.mc_ship.position().left+ "px"});\r\n            \/\/\r\n            Aud_Explode.play();\r\n            sym.arr_enemies[i].stop();\r\n            sym.arr_enemies[i].remove();\r\n            \/\/you lose\r\n            sym.SCENE = "lose";\r\n            stopG();\r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>\n
Because all enemies are stored in an array I loop through the contents of this array, and run the hitTest(...)<\/code> on player and enemies.
\nIf a collision takes place the “death” explosion is placed where the player ship is, the explosion sound plays, and the current enemy is stopped and removed. You lose, and the game is stopped. (stopG()<\/code> kills the game).<\/p>\n
This is a simple game, so the above method will work, but it is inefficient in that every 100 milliseconds the game must loop through all enemies created<\/em> vs. player<\/em> to check if a collision took place. For something larger performance would suffer… but it’s ok for this because it’s little.<\/p>\n
*************<\/p>\n
Keyboard Controls, The Player Ship, and The Beam<\/strong><\/p>\n
The player ship, and the player beam are probably the simplest symbols here.
\nThere are two functions that manage their creation, and removal.<\/p>\n
\r\n\/\/Player\r\n\/\/create and place ship and beam\r\nfunction createSprites() {\r\n    sym.mc_ship = sym.createChildSymbol("Ship", "Stage").getSymbolElement();\r\n    sym.mc_ship.css({"position":"absolute", "top":sym.shipY + "px", "left":sym.shipX + "px"});\r\n        \/\/\r\n    sym.mc_ray = sym.createChildSymbol("Ray", "Stage").getSymbolElement();\r\n    sym.mc_ray.css({"position":"absolute", "top":sym.rayY + "px", "left":sym.shipX + "px"});\r\n    sym.mc_ray.hide();\r\n}\r\n\r\nfunction removeSprites(){\r\n    sym.mc_ship.stop();\r\n    sym.mc_ray.stop();\r\n    sym.mc_ship.remove();\r\n    sym.mc_ray.remove();\r\n}\r\n<\/code><\/pre>\n
The first creates it, the second removes it. Like I said, I am removing the symbols using .remove()<\/code>. You can also use .deleteSymbol()<\/code>. See: http:\/\/api.jquery.com\/remove\/<\/a> for more information on .remove.<\/p>\n
After this, it becomes a matter of moving the ship left\/right, and triggering the beam when you press SPACE.
\nWe’ve already covered the SPACE keyboard event in the above collision detection section:<\/p>\n
\/\/creating function with sym.\r\n\/\/to change scope so keyboard events can access these\r\nsym.key_onKeyDown = function() {\r\n    sym.mc_ray.show();\r\n    Aud_BeamLoop.play();\r\n    \/\/hit detection\r\n    for (var i = 0; i<sym.arr_bunnies.length; ++i){\r\n          bunnyD(sym.arr_bunnies[i]);\r\n    }\r\n};\r\nsym.key_onKeyUp = function() {\r\n    Aud_BeamLoop.stop();\r\n    sym.mc_ray.hide();\r\n}\r\n<\/code><\/pre>\n
The rest is taken care of in document.keydown<\/code>, and document.keyup<\/code>.<\/p>\n
Taking a look at document.keydown<\/code>, you will see<\/p>\n
\/\/GAME KEYBOARD\r\n\/\/add others according to behavior for desired "SCENE"\r\n\/\/example: if it is main menu then enable main menu keyboard functionality\r\n\/\/if it is game then enable game keyboard functionality\r\n\r\n\/\/GAME\r\nif(sym.SCENE == "game"){\r\n    \/\/32 is SPACE\r\n    if (e.which == 32) {\r\n        \/\/call the function on the stage's "game trigger"\r\n        sym.getComposition().getStage().key_onKeyDown();\r\n    }\r\n    \/\/37 is LEFT\r\n    if (e.which == 37){\r\n        \/\/keeps it from "crawling" if key is pressed while ship is close to left of screen\r\n        sym.playerSpeed_left = (sym.mc_ship.position().left);\r\n        sym.bool_left = true;\r\n    }\r\n    \/\/39 is RIGHT\r\n    if (e.which == 39){\r\n        \/\/keeps it from "crawling" if key is pressed while ship is close to right of screen\r\n        sym.playerSpeed_right = (sym.stage.width()-(sym.mc_ship.position().left));\r\n        sym.bool_right = true;\r\n    }\r\n    \/\/player movement\r\n    \/\/is an interval - target left\/right location are the sides of the screen\r\n    \/\/if the keyboard key is released .anmiate is stopped\/canceled (see keyup)\r\n    \/\/there are a number of ways to animate with css\/js http:\/\/www.dehats.com\/drupal\/node\/120\r\n    \/\/has some good examples. I've chosen .animate here, and because the target are the edges\r\n    \/\/of the screen it will continue to move there untill you release the key\r\n    \/\/it will also not go off the screen...\r\n    if(sym.bool_left){\r\n        sym.mc_ship.animate( {left: sym.minX}, {duration: sym.playerSpeed_left, easing: "linear"} );\r\n        sym.mc_ray.animate( {left: sym.minX}, {duration: sym.playerSpeed_left, easing: "linear"} );\r\n    }\r\n    if(sym.bool_right){\r\n        sym.mc_ship.animate( {left: sym.maxX}, {duration: sym.playerSpeed_right, easing: "linear"} );\r\n        sym.mc_ray.animate( {left: sym.maxX}, {duration: sym.playerSpeed_right, easing: "linear"} );\r\n    }\r\n}\r\n<\/code><\/pre>\n
The two variables that are set:
\nsym.playerSpeed_left = (sym.mc_ship.position().left);
\nsym.playerSpeed_right = (sym.stage.width()-(sym.mc_ship.position().left));<\/code>
\nWill make the ship keep a steady speed (duration) even when close to the sides of the screen. The ship moves using .animate<\/code> (see the last two if<\/code> conditions). If I don’t do this, then, when the ship is closest to its target left\/right, it will crawl there. This is not good for a game, so I make sure to always update the speed according to ship position.<\/p>\n
The last two conditions are what take care of moving (if the key is pressed — sym.bool_left<\/code> and sym.bool_right<\/code>). The .animate<\/code> target is always the sides of the screen. This way I don’t have to write a collision detection to stop the ship, it will just never go further than that.
\nBoth the ship and the ray are moved to the same location.<\/p>\n
Stopping the ship and ray takes place in document.keyup<\/code>. This is how it looks<\/p>\n
\/\/GAME\r\nif(sym.SCENE == "game"){\r\n    \/\/32 is SPACE\r\n    if (e.which == 32) {\r\n        sym.getComposition().getStage().key_onKeyUp();\r\n    }\r\n    \/\/37 is LEFT\r\n    if (e.which == 37){\r\n        sym.bool_left = false;\r\n    }\r\n    \/\/39 is RIGHT\r\n    if (e.which == 39){\r\n        sym.bool_right = false;\r\n    }\r\n    \/\/stop movement and cancel anything queue -- prevents animation queue buildup\r\n    if(!sym.bool_left && !sym.bool_right){\r\n        sym.mc_ship.animate( {left: sym.mc_ship.position().left}, {duration: sym.playerSpeed, easing: "linear"} );\r\n        sym.mc_ship.finish();\r\n        sym.mc_ray.finish();\r\n        \/\/force placement of ray back to ship's x...\r\n        sym.mc_ray.css({"position":"absolute", "top":sym.rayY + "px", "left":sym.mc_ship.position().left + "px"});\r\n    }\r\n}\r\n<\/code><\/pre>\n
Condition 3 and 4 (if (e.which == 37)<\/code> and if (e.which == 39)<\/code>) set the booleans for if<\/code> left\/right is down to false<\/code>.
\nThe last bit “stops” the ship if these are false. It is stopped by setting the target .animate<\/code> to the ships current\/last position. I do this to avoid issues with the animation queue (which can present issues when working with jquery .animate<\/code> see: StackOverflow – Can somebody explain jQuery queue to me?<\/a> for explanation) .finish<\/code> is called to clear the queue and jump to the end value (which would be: sym.mc_ship.animate( {left: sym.mc_ship.position().left}, {duration: sym.playerSpeed, easing: \"linear\"} );<\/code> ).
\nThe very last bit places the ray right under the ship.<\/p>\n
I’m certain there are many better ways of doing this, but this is how I chose to do it.<\/p>\n
*************<\/p>\n
HIGHSCORES – LEADERBOARDS<\/strong><\/p>\n
I won’t implement an elaborate version here. For those interested here are some good resources for making your own:<\/p>\n
Using Playtomic API: http:\/\/gmc.yoyogames.com\/index.php?showtopic=538699<\/a>
\nAdd online highscores to your HTML5 games: http:\/\/gmc.yoyogames.com\/index.php?showtopic=525654<\/a><\/p>\n
For simplicity’s sake, I will be using localStorage<\/code>:
\nLocal Storage And How To Use It On Websites<\/a>
\nSaving data with localStorage<\/a><\/p>\n
Highscores, and player name, will be stored locally. This will also give people a prototype of using localStorage<\/code> with Edge Animate.<\/p>\n
What I came up with is to use bootstrapCallback<\/code> in the html file, do a check if the user’s browser supports localStorage<\/code>, and create a setScore<\/code> and getScore<\/code> function assigned to stage ( AdobeEdge.getComposition(compId).getStage()<\/code> ).
\nHere (underneath < ! -- Adobe Edge Runtime End -- ><\/code> ):<\/p>\n
<script type="text\/javascript">\r\n    \/\/handle localStorage "highscores" here...\r\n    var comp;\r\n    \/\/callback\r\n    AdobeEdge.bootstrapCallback(function(compId) {\r\n        comp = AdobeEdge.getComposition(compId).getStage();\r\n        \/\/check if local storage is supported (browser)\r\n        if(typeof(Storage)!=="undefined"){\r\n            console.log("localStorage is supported.");\r\n            \/\/if it's supported create this functions on\/to stage\r\n            \/\/usage: sym.getComposition().getStage().setScore("50");\r\n            \/\/SCORE:\r\n            comp.setScore = function(plyr_score){\r\n                localStorage.setItem("score", plyr_score);\r\n                console.log("setScore called. plyr_score: " + plyr_score);\r\n            }\r\n            comp.getScore = function(){\r\n                return localStorage.getItem("score");\r\n                console.log("getScore called.");\r\n            }\r\n            \/\/NAME:\r\n            comp.setName = function(plyr_name){\r\n                localStorage.setItem("name", plyr_name);\r\n                console.log("setName called. plyr_name: " + plyr_name);\r\n            }\r\n            comp.getName = function(){\r\n                return localStorage.getItem("name");\r\n                console.log("getName called.");\r\n            }\r\n        }else{\r\n            \/\/ browser is too old -- or no web storage support\r\n            window.alert("Your browser does not support web storage. Score will not be saved.");\r\n        }\r\n    });\r\n<\/script>\r\n<\/code><\/pre>\n
Simple! Read up on web storage here: http:\/\/dev.w3.org\/html5\/webstorage\/<\/a>
\nHere: http:\/\/www.w3schools.com\/html\/html5_webstorage.asp<\/a>
\nAnd: Using localStorage<\/a>
\nAnd, again, here: http:\/\/hacks.mozilla.org\/2009\/06\/localstorage\/<\/a><\/p>\n
In this instance I save only the most recent name<\/em> and score<\/em> (just one), but you could easily built on it and save more.<\/p>\n
For an example of how this works in the game refer to the “name submission window” (Symbol: Screen_Score<\/code>):<\/p>\n
\"\"<\/p>\n
The text field is called “txt_name<\/code>“.<\/p>\n
The code that sets it up is as follows<\/p>\n
\/\/ prepare input field\r\nvar namefield = sym.$("txt_name")\r\nnamefield.html("Name, plz: ");\r\ninputName = $('<input \/>').attr({'type':'text', 'value':'x', 'id':'plyr_name'});\/\/id must be unique\r\ninputName.appendTo(namefield);\r\n<\/code><\/pre>\n
Basically this creates and appends an input text field, with id “plyr_name<\/code>“, to txt_name<\/code>.<\/p>\n
The end result will look like this<\/p>\n
\"\"<\/p>\n
The button (Btn_OK<\/code>) is where all the action happens.
\nIt has a click event, which looks like<\/p>\n
\/\/get the value and send to localStorage!\r\nvar _score = sym.getComposition().getStage().score;\r\nvar _name = plyr_name.value;\r\n\/\/\r\nsym.getComposition().getStage().setScore(_score);\r\nsym.getComposition().getStage().setName(_name);\r\n\/\/go to the "scores" scene\r\nsym.getComposition().getStage().gotoScores();\r\n<\/code><\/pre>\n
The first two variables get the values to send to localStorage<\/code>. _score<\/code> gets the player’s score from stage, and _name<\/code> gets what the user just input into the text field (the assigned id ‘plyr_name<\/code>‘).
\nAfter that we call the two javascript functions created earlier in our AdobeEdge.bootstrapCallback<\/code>.
\nBecause we assigned them to ‘comp<\/code>‘ (the stage) we can easily call them. We send the variables _score<\/code>, and _name<\/code> to their respective javascript functions. Done! Now the player name and score is saved!
\nThe last one calls a function which just sends the timeline to go to the score screen.<\/p>\n
\/\/done submitting scores, and playing, go to the scores scene\r\n\/\/leaves the game -- called in Screen_Score\r\nsym.gotoScores = function(){\r\n    sym.SCENE = "scores";\r\n    sym.stop("scores");\r\n}\r\n<\/code><\/pre>\n
The very same thing happens a final time when the player wins.<\/p>\n
\"\"<\/p>\n
Showing the scores is just as simple. There is a label, and trigger (with code) on the main timeline<\/p>\n
\"\"<\/p>\n
It will look like this, live<\/p>\n
\"\"<\/p>\n
The code for it is as follows<\/p>\n
sym.SCENE = "scores";\r\nsym.stop();\r\n\r\n\/\/sound\r\nAud_ScoresTrack.play();\r\n\r\n\/\/get and set record holder (player + score + funny little comment)\r\nvar scr_plyrName = sym.getComposition().getStage().getName();\r\nvar scr_plyrScore = sym.getComposition().getStage().getScore();\r\n\r\n\/\/the funny comment\r\nvar arr_scoreMsg = ["Such an excellent role model!", "It was a magnificent harvest!", "The harvest was great!", "It was a sight to see!", "Such excellence will not go unnoticed!"];\r\nvar rand_scoreNum = Math.ceil(Math.random()*arr_scoreMsg.length)-1;\r\nvar rand_msg = arr_scoreMsg[rand_scoreNum];\r\n\/\/if it returns null then set it to one\r\nif(arr_scoreMsg[rand_scoreNum] == undefined){\r\n    rand_msg = arr_scoreMsg[0];\r\n}\r\n\/\/create the message\r\nvar msg_score = "The latest record holder is, " + scr_plyrName + ", who abducted, " + scr_plyrScore + " rabbits. " + rand_msg;\r\n\/\/if player hasn't played yet, and there is nothing to show in getName or getScore...\r\nif(scr_plyrScore == undefined){\r\n    msg_score = "Nothing here, move along."\r\n}\r\n\/\/set the message\r\nsym.$("txt_highscore").html(msg_score);\r\n<\/code><\/pre>\n
The variables scr_plyrName<\/code> and scr_plyrScore<\/code> make a call to our two AdobeEdge.bootstrapCallback<\/code> javascript functions that return the saved name, and score.<\/p>\n
The bit bellow that creates a random “funny comment” — chosen at random from an array and set as variable rand_msg<\/code>.<\/p>\n
Bellow that the message is created, stringing scr_plyrName<\/code>, scr_plyrScore<\/code>, and rand_msg<\/code> together. The variable msg_score<\/code> is set to that.
\nThen the text field is set to msg_score<\/code>: sym.$(\"txt_highscore\").html(msg_score);<\/code><\/p>\n
Simple!<\/p>\n
*************<\/p>\n
TIMERS<\/strong><\/p>\n
There are 5 “timers” in the game. These are setIntervals<\/code>, and run at varying intervals.
\nAs I’ve already described, in document.compositionReady<\/code>:<\/p>\n
\/\/Timers - intervals\r\nsym.timerInt;\r\nsym.timeElapsedInt;\r\nsym.nightmareInterval;\r\nsym.enemyInterval;\r\nsym.shipHitInterval;\r\n<\/code><\/pre>\n
These are set in resumeG()<\/code> in the “game” trigger:<\/p>\n
    enemyInit();\r\n    nightmareInit();  \r\n    sym.timerInt = setInterval(timer, 100);\r\n    sym.timeElapsedInt = setInterval(elapsed, 100);\r\n    sym.shipHitInterval = setInterval(enemyHit , 100);\r\n<\/code><\/pre>\n
We already covered timer()<\/code>, enemyHit()<\/code>, and enemyInit()<\/code> above in the Collision Detection<\/em> section, but here is a rundown of what they all are.<\/p>\n
enemyInit();<\/code> — Initiates the enemies, and sets the difficulty (the closer to winning you are the more enemies are created).<\/p>\n
nightmareInit();<\/code> — Plays (hides\/shows) the bunny’s nightmare. While you are playing a little comic book like star panel shows on the side depicting what the bunny is dreaming (all those dreadful things that will happen to him!).
\nIt looks like this:<\/p>\n
\/\/Bunny nightmare pannel\r\n\/\/bad dreams ocasionally show up acompanied with a sound\r\nfunction nightmareInit() {\r\n    clearInterval(sym.nightmareInterval);\r\n    var randNum = (Math.random()*10000)+10000;\r\n    sym.mc_nightmare.play();\r\n    Aud_Nightmare.play();\r\n    \/\/start again\r\n    sym.nightmareInterval = setInterval(nightmareInit, randNum);\r\n}\r\n<\/code><\/pre>\n
It shows at random by clearing the last interval, and calling itself again at a random interval.<\/p>\n
timer();<\/code> — sym.timerInt = setInterval(timer, 100);<\/code> — This updates the score textbox with the current score, and increments the time between enemy increments. If time hits 100 then the enemyAmount<\/code> is incremented. There cannot be more than a certain amount of enemies (enemyMax<\/code>), so the enemies, and counter are regularly reset when it reaches the maximum amount of enemies. This simulates “waves of attacks”.
\nAgain, timer();<\/code> looks like this:<\/p>\n
\/\/game timer\r\n\/\/initiates enemies\r\nfunction timer(){\r\n    \/\/set score\r\n    sym.txt_score.html(sym.score);\r\n    \/\/increment time\r\n    sym.time+=1;\r\n    \/\/increment enemies, if the score is past lvl1_goal\r\n    if (sym.time>100 && sym.score>sym.lvl1_goal-100) {\r\n        sym.time = 1;\r\n        if (sym.enemyAmount<sym.enemyMax) {\r\n            sym.enemyAmount++;\r\n        }\r\n        \/\/no more than 4 enemies, reset it\r\n        if (sym.enemyAmount == sym.enemyMax) {\r\n            sym.enemyAmount = 1;\r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>\n
elapsed();<\/code> — sym.timeElapsedInt = setInterval(elapsed, 100);<\/code> — This is the leveling system. It is also what triggers the “win”.
\nIf your timeElapsed<\/code> is above the win_time<\/code> (to keep people from winning too fast), and the score is above the win_goal<\/code>, the game is beat! It stops the game, clears everything, and plays the win animation.
\nHere is how it looks:<\/p>\n
\/\/leveling system\r\nfunction elapsed() {\r\n    sym.timeElapsed += 1;\r\n    \/\/win\r\n    if (sym.timeElapsed>sym.win_time && sym.score>sym.win_goal) {\r\n        console.log("You win.");\r\n        sym.SCENE = "win";\r\n        \/\/play();\r\n        stopG();\r\n        sym.$("Screen_End").hide();\/\/hide gameover\r\n        sym.play();\r\n    }\r\n    \/\/.data to keep it .play() called once\r\n    if ((sym.timeElapsed>sym.lvl2_time && sym.score>sym.lvl2_goal) && sym.mc_b2_data != false) {\r\n        randHit();\r\n        sym.mc_transition.play("transition");\/\/blink\r\n        sym.mc_b2.play();\r\n        sym.mc_b2_data = false;\r\n    }\r\n    if ((sym.timeElapsed>sym.lvl1_time && sym.score>sym.lvl1_goal) && sym.mc_b1_data != false) {\r\n        randHit();\r\n        sym.mc_transition.play("transition");\/\/blink\r\n        sym.mc_b1.play();\r\n        sym.mc_b1_data = false;\r\n    }\r\n}\r\n<\/code><\/pre>\n
The other two conditions are what set “next level”. If you met your goal then the screen blinks, and the bunny gets pulled out of its bed. A random hit sound (randHit();<\/code>) also plays with this event. Next level.<\/p>\n
enemyHit();<\/code> — sym.shipHitInterval = setInterval(enemyHit , 100);<\/code> — has already been covered in the Collision Detection<\/em> section above. This is what continuously checks if the ship has been hit by an enemy.<\/p>\n
*************<\/p>\n
Starting & Stopping The Game<\/strong><\/p>\n
Starting and stopping the game takes place in two functions (on the “game<\/code>” timeline trigger). Starting is responsible for setting or re-setting the game, and starting it up again.
\nIt looks like this:<\/p>\n
\/\/resumeG functions both as init() and resuming\r\n\/\/if the player loses, the game is cleared in stopG(),\r\n\/\/and this would be called to start a fresh one\r\n\/\/so this is setting all values to their default state\r\n\/\/as well as creating all new sprites\r\nfunction resumeG() {\r\n    sym.SCENE = "game"; \/\/set to game so game keyboard input will work\r\n    sym.score = 1;    \r\n    sym.mc_b1.stop(0);\r\n    sym.mc_b2.stop(0);\r\n    sym.mc_b1_data = true;\r\n    sym.mc_b2_data = true;\r\n    sym.bunnyAbAmnt = 0;\r\n    \/\/clear\/reset arrays\r\n    \/\/there are a number of ways to do this, for example: \r\n    \/\/http:\/\/stackoverflow.com\/questions\/1232040\/how-to-empty-an-array-in-javascript\r\n    \/\/but keeping it simple...\r\n    sym.arr_bunnies = [];\r\n    sym.arr_enemies = [];\r\n    \/\/start the music\r\n    Aud_GameTrack.play().fadeIn();\r\n    sym.$("Screen_End").hide();\/\/hide mc_gameover\r\n    sym.$("Screen_Score").hide();\/\/hide the "your name here" screen\r\n    createSprites();\r\n    makeBunny();\r\n    enemyInit();\r\n    nightmareInit();  \r\n    sym.timerInt = setInterval(timer, 100);\r\n    sym.timeElapsedInt = setInterval(elapsed, 100);\r\n    sym.shipHitInterval = setInterval(enemyHit , 100);\r\n    \/\/\r\n    \/\/removeEnemyShip();\r\n    \/\/reset vars\r\n    sym.time = 1;\r\n    sym.enemyAmount = 1;\r\n    sym.timeElapsed = 1;\r\n    \/\/set these values AFTER sprites have been created\r\n    sym.maxX = sym.stage.width()-sym.mc_ship.width();\r\n    sym.minX = 0;\r\n}\r\n\r\n\/\/Start game\r\nresumeG();\r\n<\/code><\/pre>\n
sym.SCENE<\/code> is set to “game<\/code>” again. Reset score, and all necessary symbols (like putting the bunnies back in their bed).
\nThe arrays are also cleared out (reset).
\nThe game soundtrack is started again, and the two screens (Screen_End<\/code>, and Screen_Score<\/code>) are both hidden. Incase they where open.
\nAfter arrays are cleared, sprites are created again.
\nAll intervals\/”timers” (as just described above) are also started.
\nThen reset the last variables (time<\/code>, enemyAmount<\/code>, and timeElapsed<\/code>).
\nThe last two maxX<\/code>, and minX<\/code> set the desired bounds for ship movement.<\/p>\n
stopG()<\/code> does the opposite. It serves as the “game over” function. It works with Screen_End<\/code>:<\/p>\n
\"\"<\/p>\n
This is how the function looks:<\/p>\n
\/\/stops the game\r\n\/\/this clears the current game\r\n\/\/to start it again call resumeG();\r\nfunction stopG() {\r\n    SoundMixer_stopAll();\r\n    \/\/set player score message for if this is gameover\r\n    sym.mc_gameover.$("txt_plyr_score").html("You score "+sym.score+"!");\r\n    \/\/\r\n    randHit();\r\n    Aud_Explode.play();\r\n    \/\/show gameover\r\n    sym.$("Screen_End").show();\r\n    \/\/\r\n    removeEnemyShip();\r\n    removeSprites();\r\n    removeBunny();\r\n    clearInterval(sym.timerInt);\r\n    clearInterval(sym.nightmareInterval);\r\n    clearInterval(sym.enemyInterval);\r\n    clearInterval(sym.timeElapsedInt);\r\n    clearInterval(sym.shipHitInterval);\r\n}\r\n<\/code><\/pre>\n
The first 8 lines manage the game over event, as well as show the game over screen (Screen_End<\/code>). In cases where I don’t want a game over, I call this same function, but just hide Screen_End<\/code> (sym.$(\"Screen_End\").hide()<\/code>). You’ll have noticed this in elapsed();<\/code>, above.
\nThe final section removes all created sprites, and clears all intervals.<\/p>\n
The remove functions look like this:<\/p>\n
function removeEnemyShip()\r\n{\r\n    \/\/remove all enemies\r\n    for (var i = 0; i<sym.arr_enemies.length; ++i){\r\n    \/\/You can remove in two ways .remove() or .deleteSymbol()\r\n    \/\/I am not certain what the difference is so I am using .remove()\r\n    \/\/see: http:\/\/api.jquery.com\/remove\/\r\n    \/\/always .stop(); if you are removing a symbol with .animate()\r\n        sym.arr_enemies[i].stop();\r\n        sym.arr_enemies[i].remove();\r\n        \/\/sym.getSymbol(sym.arr_enemies[i]).deleteSymbol();\r\n    }\r\n}\r\n\r\nfunction removeSprites(){\r\n    sym.mc_ship.stop();\r\n    sym.mc_ray.stop();\r\n    sym.mc_ship.remove();\r\n    sym.mc_ray.remove();\r\n}\r\n\r\nfunction removeBunny() {\r\n    \/\/delete bunnies\r\n    \/\/You can remove in two ways .remove() or .deleteSymbol()\r\n    \/\/I am not certain what the difference is so I am using .remove()\r\n    \/\/see: http:\/\/api.jquery.com\/remove\/\r\n    \/\/always .stop(); to cancel the .animate();\r\n    for (var i = 0; i<sym.arr_bunnies.length; ++i){\r\n        sym.arr_bunnies[i].stop();\r\n        sym.arr_bunnies[i].remove();\r\n        \/\/sym.getSymbol(sym.arr_bunnies[i]).deleteSymbol();\r\n    }\r\n}\r\n<\/code><\/pre>\n
*************<\/p>\n
Going The Extra Mile For Mobile<\/strong><\/p>\n
It would be simple, from this point on, to do a mobile check. If the player is on a mobile device, then enable touchscreen controls.
\nThere are a number of ways to do mobile check. The simplest, and not always most reliable is: if(\/Android|webOS|iPhone|iPad|iPod|BlackBerry\/i.test(navigator.userAgent)){returns true or false};<\/code>
\nThe best would be:
\nDetect Mobile Browsers | Open source mobile phone detection<\/a>
\nJS Mobile Redirection<\/a> (Javascript mobile redirection library)
\nOr refer to this thread: http:\/\/stackoverflow.com\/questions\/11381673\/javascript-solution-to-detect-mobile-browser<\/a><\/p>\n
I’m not going to do this here. I’m going to be lazy because it’s Saturday! In the menu I run the simple check, and display a little window.alert<\/code> telling them that the game is not yet compatible with touchscreen.<\/p>\n
sym.isMobile = \/Android|webOS|iPhone|iPad|iPod|BlackBerry\/i.test(navigator.userAgent);\r\n\/\/\r\nif (sym.isMobile) { \r\n    \/\/sym.stop();\r\n    window.alert("Sorry mobile, but this game is not yet compatible for touchscreen devices.");\r\n}else{\r\n    \/\/you may pass\r\n}\r\n<\/code><\/pre>\n
I have it as an App in the App Store<\/a>. Incase you’re wondering. :)<\/p>\n
*************<\/p>\n
ALL THE CODE:<\/strong><\/p>\n
That’s it! And, in conclusion, the entire game engine, as comfortably tucked away in Trigger @ 22000 ms<\/code> is as follows:<\/p>\n
\"\"<\/p>\n
sym.stop();\r\n\r\n\/* Score usage:\r\nsym.getComposition().getStage().setScore("50");\r\nconsole.log("SCORE: "+comp.getScore()); \r\n*\/\r\n\r\n\/\/Collision Detection\r\n\/\/simple object intersection hit test because this is a small project\r\n\/\/consider using JQuery Collision http:\/\/sourceforge.net\/projects\/jquerycollision\/\r\n\/\/for more elaborate things -- thanks to Adobe forums for pointing me in the right direction\r\nfunction hitTest(a, b){\r\n    \/\/\r\n    aPos = {x:parseInt(a.css('left')), y:parseInt(a.css('top'))};\r\n    bPos = {x:parseInt(b.css('left')), y:parseInt(b.css('top'))};\r\n    \/\/\r\n    return aPos.x < bPos.x + b.width() && aPos.x + a.width() > bPos.x && aPos.y < bPos.y + b.height() && aPos.y + a.height() > bPos.y\r\n}\r\n\r\n\/\/Player\r\n\/\/create and place ship and beam\r\nfunction createSprites() {\r\n    sym.mc_ship = sym.createChildSymbol("Ship", "Stage").getSymbolElement();\r\n    sym.mc_ship.css({"position":"absolute", "top":sym.shipY + "px", "left":sym.shipX + "px"});\r\n        \/\/\r\n    sym.mc_ray = sym.createChildSymbol("Ray", "Stage").getSymbolElement();\r\n    sym.mc_ray.css({"position":"absolute", "top":sym.rayY + "px", "left":sym.shipX + "px"});\r\n    sym.mc_ray.hide();\r\n}\r\n\r\nfunction removeSprites(){\r\n    sym.mc_ship.stop();\r\n    sym.mc_ray.stop();\r\n    sym.mc_ship.remove();\r\n    sym.mc_ray.remove();\r\n}\r\n\r\n\/\/Sound\r\n\/\/random "hits" for when bunnies get abducted or player dies\r\nvar randHitArr = [Aud_Hit1_, Aud_Hit2_, Aud_Hit3_];\r\nfunction randHit() {\r\n    var randHit = randHitArr[Math.floor(Math.random()*randHitArr.length)];\r\n    if(randHit == undefined){\r\n        randHit = randHitArr[0];\r\n    }\r\n    randHit.play();\r\n}\r\n\r\n\/\/Bunnies!\r\nfunction bunnyM(clip) {\r\n    \/\/console.log(clip);\r\n    \/\/speed, and end variables\r\n    var bEnd = sym.stage.width()-clip.width();\r\n    var bSpeed = (Math.ceil(Math.random()*sym.bunnySpeed)+sym.bunnySpeed)-500;\r\n    \/\/place it randomly (x) on the stage\r\n    clip.css({"position":"absolute", "top":sym.bunnyY + "px", "left":(Math.ceil(Math.random()*sym.stage.width())-clip.width()) + "px"});\r\n    \/\/call first to cancel queue -- just incase this could become a problem\r\n    clip.stop();\r\n    \/\/\r\n    clip.animate( {left: bEnd}, bSpeed, "linear", function(){\r\n        sym.score -= 1;\/\/"escapee" penalty\r\n        bunnyM(clip);\r\n    }\r\n    );\r\n}\r\n\r\nfunction makeBunny() {\r\n    for (var i = 0; i<sym.bNum; i++) {\r\n        var mc_bunny = sym.createChildSymbol("Bunny", "Stage").getSymbolElement();\r\n        \/\/push to array for access later and start moving it\r\n        \/\/bunnyM also takes care of placeing them\r\n        \/\/note: bunnies must be stored in array\r\n        \/\/for colision detection, and better access\r\n        sym.arr_bunnies.push(mc_bunny);\r\n        bunnyM(mc_bunny);\r\n    }\r\n}\r\n\r\nfunction removeBunny() {\r\n    \/\/delete bunnies\r\n    \/\/You can remove in two ways .remove() or .deleteSymbol()\r\n    \/\/I am not certain what the difference is so I am using .remove()\r\n    \/\/see: http:\/\/api.jquery.com\/remove\/\r\n    \/\/always .stop(); to cancel the .animate();\r\n    for (var i = 0; i<sym.arr_bunnies.length; ++i){\r\n        sym.arr_bunnies[i].stop();\r\n        sym.arr_bunnies[i].remove();\r\n        \/\/sym.getSymbol(sym.arr_bunnies[i]).deleteSymbol();\r\n    }\r\n}\r\n\r\nfunction bunnyD(clip) {\r\n    if(hitTest(sym.mc_ray, clip)){\r\n        sym.score += 1;\r\n        sym.bunnyAbAmnt+=1;\r\n        clip.stop();\/\/stop current animation queue\r\n        clip.animate( {top: 0}, 200, "linear", function(){\r\n            bunnyM(clip);\r\n        }\r\n        );\r\n    }\r\n}\r\n\r\n\/\/creating function with sym.\r\n\/\/to change scope so keyboard events can access these\r\nsym.key_onKeyDown = function() {\r\n    sym.mc_ray.show();\r\n    Aud_BeamLoop.play();\r\n    \/\/hit detection\r\n    for (var i = 0; i<sym.arr_bunnies.length; ++i){\r\n          bunnyD(sym.arr_bunnies[i]);\r\n    }\r\n};\r\nsym.key_onKeyUp = function() {\r\n    Aud_BeamLoop.stop();\r\n    sym.mc_ray.hide();\r\n}\r\n\r\n\/\/Enemy Ship\r\n\/\/And Enemy Laser\r\n\r\nfunction enemyFire(clip)\r\n{\r\n    var randSpeed = (Math.random()*20)+10;\r\n    \/\/enemy fire serves as a warning that an enemy is approaching\r\n    \/\/fire does nothing, it passes the ship,\r\n    \/\/and should appear randomly somewhere under the ship, and over the bunnies\r\n    clip.css({"position":"absolute", "top":Math.ceil(Math.random()*40)+90 + "px", "left":-clip.width() + "px"});\r\n    \/\/\r\n    clip.animate( {left: (sym.stage.width()+clip.width())}, 1000, "linear", function(){\r\n        clip.remove();\/\/get rid of it when it's passed\r\n    }\r\n    );\r\n}\r\n\r\n\r\nfunction makeEnemyFire(){\r\n    Aud_Laser.play();\r\n    \/\/make as much enemy fire as there are enemies, so going by sym.enemyAmount\r\n    for (var i = 1; i<sym.enemyAmount+1; i++)\r\n    {\r\n        var mc_fire = sym.createChildSymbol("Fire", "Stage").getSymbolElement();\r\n        enemyFire(mc_fire); \r\n    }\r\n}\r\n\r\n\/\/enemy ship comes in 8 steps using .anmiate to call the next when a movement is done\r\n\/\/this simulates the ship flying up\/down exactly how I want it\r\n\/\/I'm certain there are better ways of doing this, if so let me know!\r\n\/\/\r\n\/\/the starting function is called at random -- in enemyShip(clip);\r\n\/\/so when there are multiple enemies there is a random flying pattern to doge\r\nvar enemyBounceSpeed = 500; \/\/the speed of up\/down movement -- should last 0.3 seconds\r\nfunction enemyShip_move1(clip){\r\n    clip.animate({\r\n        top: 83\r\n        }, { \r\n            duration: enemyBounceSpeed, \r\n            queue: false, \r\n            easing: "easeInCubic", \r\n            complete: function(){\r\n                enemyShip_move2(clip);\r\n            }\r\n    });\r\n}\r\nfunction enemyShip_move2(clip){\r\n    clip.animate({\r\n        top: 120\r\n        }, { \r\n            duration: enemyBounceSpeed, \r\n            queue: false, \r\n            easing: "easeOutCubic", \r\n            complete: function(){\r\n                enemyShip_move3(clip);\r\n            }\r\n    });\r\n}\r\nfunction enemyShip_move3(clip){\r\n    clip.animate({\r\n        top: 60\r\n        }, { \r\n            duration: enemyBounceSpeed, \r\n            queue: false, \r\n            easing: "easeInCubic", \r\n            complete: function(){\r\n                enemyShip_move4(clip);\r\n            }\r\n    });\r\n}\r\nfunction enemyShip_move4(clip){\r\n    clip.animate({\r\n        top: 25\r\n        }, { \r\n            duration: enemyBounceSpeed, \r\n            queue: false, \r\n            easing: "easeOutCubic", \r\n            complete: function(){\r\n                enemyShip_move1(clip);\r\n            }\r\n    });\r\n}\r\n\r\nfunction enemyShip(clip)\r\n{\r\n    \/\/position ship - somewhere off screen, at same Y\r\n    var enemyStartX = (Math.random()*-500)-200;\r\n    clip.css({"position":"absolute", "top":sym.enemyY + "px", "left":enemyStartX + "px"});\r\n    \/\/random speed\r\n    var randNum = (Math.random()*10000)+5000;\r\n    \/\/move it\r\n    clip.animate({\r\n        left: (sym.stage.width()+clip.width())\r\n        }, {\r\n            duration: randNum, \r\n            queue: false,\r\n            easing: "linear", \r\n            complete: function(){\r\n                clip.remove();\r\n            }\r\n    });\r\n    \/\/start moving it up\/down -- call the starting movement\r\n    \/\/at random -- either the top most or bottom most\r\n    if(randNum>randNum\/2){\r\n        enemyShip_move2(clip);\r\n    }else{\r\n        enemyShip_move4(clip);\r\n    }\r\n}\r\n\r\n\/\/DEATH\r\n\/\/was the player hit by an enemy ship?\r\nfunction enemyHit(){\r\n    \/\/\r\n    for(var i = 0; i<sym.arr_enemies.length; ++i){\r\n    \/\/\r\n        if(hitTest(sym.mc_ship, sym.arr_enemies[i])){\r\n            \/\/create and place an explosion on the ship coords\r\n            var mc_explode = sym.createChildSymbol("Explode", "Stage").getSymbolElement();\r\n            mc_explode.css({"position":"absolute", "top":sym.mc_ship.position().top + "px", "left":sym.mc_ship.position().left+ "px"});\r\n            \/\/\r\n            Aud_Explode.play();\r\n            sym.arr_enemies[i].stop();\r\n            sym.arr_enemies[i].remove();\r\n            \/\/you lose\r\n            sym.SCENE = "lose";\r\n            stopG();\r\n        }\r\n    }\r\n}\r\n\r\n\r\nfunction attachEnemyShip()\r\n{\r\n    for (var i = 0; i<sym.enemyAmount; i++)\r\n    {\r\n        var mc_enemy = sym.createChildSymbol("Enemy_Ship", "Stage").getSymbolElement();\r\n        sym.arr_enemies.push(mc_enemy);\r\n        enemyShip(mc_enemy);\r\n    }\r\n}\r\n\r\n\r\nfunction removeEnemyShip()\r\n{\r\n    \/\/remove all enemies\r\n    for (var i = 0; i<sym.arr_enemies.length; ++i){\r\n    \/\/You can remove in two ways .remove() or .deleteSymbol()\r\n    \/\/I am not certain what the difference is so I am using .remove()\r\n    \/\/see: http:\/\/api.jquery.com\/remove\/\r\n    \/\/always .stop(); if you are removing a symbol with .animate()\r\n        sym.arr_enemies[i].stop();\r\n        sym.arr_enemies[i].remove();\r\n        \/\/sym.getSymbol(sym.arr_enemies[i]).deleteSymbol();\r\n    }\r\n}\r\n\r\n\/\/enemyInit calls to create the enemy\r\n\/\/as you play, and as you progress\r\n\/\/the game gets more difficutl -- more enemies\r\nfunction enemyInit()\r\n{\r\n    clearInterval(sym.enemyInterval);\r\n    \/\/was (Math.random()*20000)+10000;\r\n    var randNum = (Math.random()*9000)+10000;\r\n    \/\/\r\n    if(sym.score>=sym.lvl1_goal-100){\r\n        randNum = (Math.random()*8000)+9000;\r\n    }\r\n    if(sym.score>=sym.lvl2_goal-200){\r\n        randNum = (Math.random()*5000)+7000;\r\n    }\r\n    if(sym.score>=sym.win_goal-400){\r\n        randNum = (Math.random()*1000)+6000;\r\n    }\r\n    if(sym.score>=sym.win_goal-200){\r\n        randNum = (Math.random()*1000)+5000;\r\n    }\r\n    \/\/if sym.bunnyAbAmnt is above the goal\r\n    \/\/then you may start creating enemies\r\n    if(sym.bunnyAbAmnt>10){\r\n        makeEnemyFire();\r\n        attachEnemyShip();\r\n    };\r\n    \/\/\r\n    sym.enemyInterval = setInterval(enemyInit, randNum);\r\n}\r\n\r\n\/\/Bunny nightmare pannel\r\n\/\/bad dreams ocasionally show up acompanied with a sound\r\nfunction nightmareInit() {\r\n    clearInterval(sym.nightmareInterval);\r\n    var randNum = (Math.random()*10000)+10000;\r\n    sym.mc_nightmare.play();\r\n    Aud_Nightmare.play();\r\n    \/\/start again\r\n    sym.nightmareInterval = setInterval(nightmareInit, randNum);\r\n}\r\n\r\n\/\/game timer\r\n\/\/initiates enemies\r\nfunction timer(){\r\n    \/\/set score\r\n    sym.txt_score.html(sym.score);\r\n    \/\/increment time\r\n    sym.time+=1;\r\n    \/\/increment enemies, if the score is past lvl1_goal\r\n    if (sym.time>100 && sym.score>sym.lvl1_goal-100) {\r\n        sym.time = 1;\r\n        if (sym.enemyAmount<sym.enemyMax) {\r\n            sym.enemyAmount++;\r\n        }\r\n        \/\/no more than 4 enemies, reset it\r\n        if (sym.enemyAmount == sym.enemyMax) {\r\n            sym.enemyAmount = 1;\r\n        }\r\n    }\r\n}\r\n\r\n\/\/leveling system\r\nfunction elapsed() {\r\n    sym.timeElapsed += 1;\r\n    \/\/win\r\n    if (sym.timeElapsed>sym.win_time && sym.score>sym.win_goal) {\r\n        console.log("You win.");\r\n        sym.SCENE = "win";\r\n        \/\/play();\r\n        stopG();\r\n        sym.$("Screen_End").hide();\/\/hide gameover\r\n        sym.play();\r\n    }\r\n    \/\/.data to keep it .play() called once\r\n    if ((sym.timeElapsed>sym.lvl2_time && sym.score>sym.lvl2_goal) && sym.mc_b2_data != false) {\r\n        randHit();\r\n        sym.mc_transition.play("transition");\/\/blink\r\n        sym.mc_b2.play();\r\n        sym.mc_b2_data = false;\r\n    }\r\n    if ((sym.timeElapsed>sym.lvl1_time && sym.score>sym.lvl1_goal) && sym.mc_b1_data != false) {\r\n        randHit();\r\n        sym.mc_transition.play("transition");\/\/blink\r\n        sym.mc_b1.play();\r\n        sym.mc_b1_data = false;\r\n    }\r\n}\r\n\r\n\/\/stop all sounds :)\r\n\/\/better yet would be to use a groupd\r\n\/\/and buzz.all() to do this: http:\/\/buzz.jaysalvat.com\/documentation\/group\/\r\nfunction SoundMixer_stopAll(){\r\n    Aud_GameTrack.stop();\r\n    Aud_Hit1_.stop();\r\n    Aud_Hit2_.stop();\r\n    Aud_Hit3_.stop();\r\n    Aud_BeamLoop.stop();\r\n    Aud_Laser.stop();\r\n    Aud_Nightmare.stop();\r\n}\r\n\r\n\/\/"submit" your score window\r\n\/\/hide the current gameover window\r\n\/\/and open the submission one\r\n\/\/to call from screen: sym.getComposition().getStage().scorecall();\r\nsym.scorecall = function() {\r\n    sym.$("Screen_End").hide();\/\/hide mc_gameover\r\n    sym.$("Screen_Score").show();\r\n}\r\n\/\/same as above but the "overachieve" option\r\n\/\/to call from screen: sym.getComposition().getStage().overachieve();\r\nsym.overachieve = function(){\r\n    resumeG();\r\n}\r\n\/\/done submitting scores, and playing, go to the scores scene\r\n\/\/leaves the game -- called in Screen_Score\r\nsym.gotoScores = function(){\r\n    sym.SCENE = "scores";\r\n    sym.stop("scores");\r\n}\r\n\r\n\/\/stops the game\r\n\/\/this clears the current game\r\n\/\/to start it again call resumeG();\r\nfunction stopG() {\r\n    SoundMixer_stopAll();\r\n    \/\/set player score message for if this is gameover\r\n    sym.mc_gameover.$("txt_plyr_score").html("You score "+sym.score+"!");\r\n    \/\/\r\n    randHit();\r\n    Aud_Explode.play();\r\n    \/\/show gameover\r\n    sym.$("Screen_End").show();\r\n    \/\/\r\n    removeEnemyShip();\r\n    removeSprites();\r\n    removeBunny();\r\n    clearInterval(sym.timerInt);\r\n    clearInterval(sym.nightmareInterval);\r\n    clearInterval(sym.enemyInterval);\r\n    clearInterval(sym.timeElapsedInt);\r\n    clearInterval(sym.shipHitInterval);\r\n}\r\n\r\n\/\/resumeG functions both as init() and resuming\r\n\/\/if the player loses, the game is cleared in stopG(),\r\n\/\/and this would be called to start a fresh one\r\n\/\/so this is setting all values to their default state\r\n\/\/as well as creating all new sprites\r\nfunction resumeG() {\r\n    sym.SCENE = "game"; \/\/set to game so game keyboard input will work\r\n    sym.score = 1;    \r\n    sym.mc_b1.stop(0);\r\n    sym.mc_b2.stop(0);\r\n    sym.mc_b1_data = true;\r\n    sym.mc_b2_data = true;\r\n    sym.bunnyAbAmnt = 0;\r\n    \/\/clear\/reset arrays\r\n    \/\/there are a number of ways to do this, for example: \r\n    \/\/http:\/\/stackoverflow.com\/questions\/1232040\/how-to-empty-an-array-in-javascript\r\n    \/\/but keeping it simple...\r\n    sym.arr_bunnies = [];\r\n    sym.arr_enemies = [];\r\n    \/\/start the music\r\n    Aud_GameTrack.play().fadeIn();\r\n    sym.$("Screen_End").hide();\/\/hide mc_gameover\r\n    sym.$("Screen_Score").hide();\/\/hide the "your name here" screen\r\n    createSprites();\r\n    makeBunny();\r\n    enemyInit();\r\n    nightmareInit();  \r\n    sym.timerInt = setInterval(timer, 100);\r\n    sym.timeElapsedInt = setInterval(elapsed, 100);\r\n    sym.shipHitInterval = setInterval(enemyHit , 100);\r\n    \/\/\r\n    \/\/removeEnemyShip();\r\n    \/\/reset vars\r\n    sym.time = 1;\r\n    sym.enemyAmount = 1;\r\n    sym.timeElapsed = 1;\r\n    \/\/set these values AFTER sprites have been created\r\n    sym.maxX = sym.stage.width()-sym.mc_ship.width();\r\n    sym.minX = 0;\r\n}\r\n\r\n\/\/Start game\r\nresumeG();\r\n<\/code><\/pre>\n
document.compositionReady<\/code>
\n\"\"<\/p>\n
\/\/"GLOBAL" VARIABLES\r\n\/\/what label? \r\n\/\/will check against this and if it is "game" then game functionality will unlock\r\n\/\/if it is menu then keyboard for menu will unlock, etc...\r\nsym.SCENE; \r\n\r\nsym.score = 100;    \r\nsym.time = 1;\r\nsym.enemyAmount = 1;\/\/current amount\r\nsym.enemyMax = 3;\/\/maximum amount of enemies alowed at once\r\nsym.timeElapsed = 1;\r\nsym.playerSpeed = 600;\/\/5\r\nsym.playerSpeed_left = 600;\/\/5\r\nsym.playerSpeed_right = 600;\/\/5\r\nsym.bunnySpeed = 5000;\/\/will be random + itself, this is the default minimum value\r\n\/\/sym.bunnyAbAmnt = amount of abducted bunnies, if it's above a certain number then enemies will start appearing\r\n\/\/this keeps the game from generating enemies right away -- gives the player time to adjust\r\nsym.bunnyAbAmnt = 0;\r\n\/\/goals (before leveling up)\r\nsym.lvl1_goal = 300;\r\nsym.lvl2_goal = 530;\r\n\/\/targeted time (how long you have been playing before you can go to next level)\r\nsym.lvl1_time = 300;\r\nsym.lvl2_time = 500;\r\n\/\/above but for winning\r\nsym.win_time = 700;\r\nsym.win_goal = 800;\r\n\r\nsym.bNum = 10;\/\/maximum number of bunnies on stage\r\n\r\n\/\/Booleans - flags\r\nsym.bool_left = false;\r\nsym.bool_right = false;\r\n\r\n\/\/.data to keep it .play() called once\r\n\/\/may only play once if it is true then the transition to next level may play\r\nsym.mc_b1_data = false;\r\nsym.mc_b2_data = false;\r\n\r\n\/\/symbol refferences\r\nsym.stage = sym.$("Stage");\r\nsym.mc_b1 = sym.getSymbol("Beds").getSymbol("IMG_Sprite_Bed02");\r\nsym.mc_b2 = sym.getSymbol("Beds").getSymbol("IMG_Sprite_Bed03");\r\nsym.mc_nightmare = sym.getSymbol("Nightmare");\r\nsym.mc_transition = sym.getSymbol("Transition_Blink");\r\nsym.mc_gameover = sym.getSymbol("Screen_End");\r\nsym.mc_score = sym.getSymbol("Screen_Score");\r\nsym.mc_ship;\r\nsym.mc_ray;\r\nsym.txt_score = sym.$("txt_score");\r\n\r\n\/\/Arrays\r\nsym.arr_bunnies = [];\r\nsym.arr_enemies = [];\r\n\r\n\/\/X Y positions\r\nsym.shipY = 70;\/\/25\r\nsym.enemyY = 88;\r\nsym.rayY = 66;\/\/66\r\nsym.bunnyY = 180;\r\n\/\/centering\r\nsym.centerX = sym.stage.width()\/2;\r\nsym.centerY = sym.stage.height()\/2;\r\n\/\/left\/right bounds\r\nsym.maxX = sym.stage.width();\r\nsym.minX = 10;\/\/minimum placement for ship\r\n\/\/player X (incremented\/decremented via keyboard input, initial value is center)\r\nsym.shipX = sym.centerX;\r\n\r\n\/\/Timers - intervals\r\nsym.timerInt;\r\nsym.timeElapsedInt;\r\nsym.nightmareInterval;\r\nsym.enemyInterval;\r\nsym.shipHitInterval;\r\n\r\n\/\/SOUND\r\n\r\n\/\/I manually made the sound longer so it appears to loop -- nevermind the gap\r\n\/\/it is a bit more hacking around to get seamless audio looping (Flash does it well)\r\n\/\/here are some notes for those interested in getting it to work\r\n\/\/http:\/\/sound.stackexchange.com\/questions\/8916\/mp3-gapless-looping-help\r\n\/\/http:\/\/forestmist.org\/blog\/html5-audio-loops\/\r\n\/\/the main soundrack of the game:\r\nAud_GameTrack = new buzz.sound("audio\/mainmenu-loop", {formats: ["wav", "ogg", "mp3"], preload: true, loop: true});\r\n\/\/plays at the end of the game:\r\nAud_GameTrack_2 = new buzz.sound("audio\/mainmenu-under-loop2", {formats: ["wav", "ogg", "mp3"], preload: true, loop: true});\r\nAud_ScoresTrack = new buzz.sound("audio\/scores-loop", {formats: ["wav", "ogg", "mp3"], preload: true, loop: true});\r\nAud_KeysTrack = new buzz.sound("audio\/Keys-loop", {formats: ["wav", "ogg", "mp3"], preload: true, loop: true});\r\n\/\/Menu sounds\r\nAud_MenuPreLoop = new buzz.sound("audio\/Mainmenu-preloop", {formats: ["wav", "ogg", "mp3"], preload: true});\r\nAud_MenuLoop = new buzz.sound("audio\/mainmenu-loop3", {formats: ["wav", "ogg", "mp3"], preload: true, loop: true});\r\n\r\n\/\/Intro\r\n\/\/Aud_LogoMoron = new buzz.sound("audio\/morons-blb", {formats: ["wav", "ogg", "mp3"]});\r\nAud_Intro = new buzz.sound("audio\/Intro", {formats: ["wav", "ogg", "mp3"], preload: true});\r\n\r\nAud_Nightmare = new buzz.sound("audio\/JAPAN-3", {formats: ["wav", "ogg", "mp3"]});\r\nAud_Explode = new buzz.sound("audio\/explode", {formats: ["wav", "ogg", "mp3"],preload: true});\r\nAud_End = new buzz.sound("audio\/End", {formats: ["wav", "ogg", "mp3"],preload: true});\r\nAud_Hit1_ = new buzz.sound("audio\/daaaam-1", {formats: ["wav", "ogg", "mp3"]});\r\nAud_Hit2_ = new buzz.sound("audio\/daaaam-2", {formats: ["wav", "ogg", "mp3"]});\r\nAud_Hit3_ = new buzz.sound("audio\/daaaam-3", {formats: ["wav", "ogg", "mp3"]});\r\n\r\nAud_BeamLoop = new buzz.sound("audio\/beam-loop", {formats: ["wav", "ogg", "mp3"],\r\n    loop: true\r\n});\r\n\r\nAud_Laser = new buzz.sound("audio\/LASER", {formats: ["wav", "ogg", "mp3"]});\r\n\r\n\/\/load them with Edge\r\nAud_GameTrack.load();\r\nAud_GameTrack_2.load();\r\nAud_ScoresTrack.load();\r\nAud_KeysTrack.load();\r\nAud_MenuPreLoop.load();\r\nAud_MenuLoop.load();\r\nAud_Intro.load();\r\nAud_Nightmare.load();\r\nAud_Explode.load();\r\nAud_End.load();\r\nAud_Hit1_.load();\r\nAud_Hit2_.load();\r\nAud_Hit3_.load();\r\n\r\n\/\/stop all currently playing "hits" for menu and anywhere else they trigger on button overs\r\nsym.stopHits = function(){\r\n    Aud_Hit1_.stop();\r\n    Aud_Hit2_.stop();\r\n    Aud_Hit3_.stop();\r\n}\r\n<\/code><\/pre>\n
document.keydown<\/code>
\n\"\"<\/p>\n
\/\/GAME KEYBOARD\r\n\/\/add others acording to behavior for desired "SCENE"\r\n\/\/example: if it is main menu then enable main menu keyboard functionality\r\n\/\/if it is game then enable game keyboard functionality\r\n\r\n\/\/GAME\r\nif(sym.SCENE == "game"){\r\n    \/\/32 is SPACE\r\n    if (e.which == 32) {\r\n        \/\/call the function on the stage's "game trigger"\r\n        sym.getComposition().getStage().key_onKeyDown();\r\n        \/\/sym.mc_ray.show();\r\n        \/\/Aud_BeamLoop.play();\r\n    }\r\n    \/\/37 is LEFT\r\n    if (e.which == 37){\r\n        \/\/keeps it from "crawling" if key is pressed while ship is close to left of screen\r\n        sym.playerSpeed_left = (sym.mc_ship.position().left);\r\n        sym.bool_left = true;\r\n    }\r\n    \/\/39 is RIGHT\r\n    if (e.which == 39){\r\n        \/\/keeps it from "crawling" if key is pressed while ship is close to right of screen\r\n        sym.playerSpeed_right = (sym.stage.width()-(sym.mc_ship.position().left));\r\n        sym.bool_right = true;\r\n    }\r\n    \/\/player movement\r\n    \/\/is an interval - target left\/right location are the sides of the screen\r\n    \/\/if the keyboard key is released .anmiate is stopped\/canceled (see keyup)\r\n    \/\/there are a number of ways to animate with css\/js http:\/\/www.dehats.com\/drupal\/node\/120\r\n    \/\/has some good examples. I've chosen .animate here, and because the target are the edges\r\n    \/\/of the screen it will continue to move there untill you release the key\r\n    \/\/it will also not go off the screen...\r\n    if(sym.bool_left){\r\n        sym.mc_ship.animate( {left: sym.minX}, {duration: sym.playerSpeed_left, easing: "linear"} );\r\n        sym.mc_ray.animate( {left: sym.minX}, {duration: sym.playerSpeed_left, easing: "linear"} );\r\n    }\r\n    if(sym.bool_right){\r\n        sym.mc_ship.animate( {left: sym.maxX}, {duration: sym.playerSpeed_right, easing: "linear"} );\r\n        sym.mc_ray.animate( {left: sym.maxX}, {duration: sym.playerSpeed_right, easing: "linear"} );\r\n    }\r\n}\r\n\r\n\/\/DEBUG\r\nif(e.which==27){\r\n\/\/\r\n}\r\n<\/code><\/pre>\n
document.keyup
\n\"\"<\/p>\n
\/\/GAME KEYBOARD\r\n\/\/add others acording to behavior for desired "SCENE"\r\n\/\/example: if it is main menu then enable main menu keyboard functionality\r\n\/\/if it is game then enable game keyboard functionality\r\n\r\n\/\/GAME\r\nif(sym.SCENE == "game"){\r\n    \/\/32 is SPACE\r\n    if (e.which == 32) {\r\n        \/\/sym.mc_ray.hide();\r\n        \/\/Aud_BeamLoop.stop();\r\n        sym.getComposition().getStage().key_onKeyUp();\r\n    }\r\n    \/\/37 is LEFT\r\n    if (e.which == 37){\r\n        sym.bool_left = false;\r\n    }\r\n    \/\/39 is RIGHT\r\n    if (e.which == 39){\r\n        sym.bool_right = false;\r\n    }\r\n    \/\/stop movement and cancel anything queue -- prevents animation queue buildup\r\n    if(!sym.bool_left && !sym.bool_right){\r\n        sym.mc_ship.animate( {left: sym.mc_ship.position().left}, {duration: sym.playerSpeed, easing: "linear"} );\r\n        sym.mc_ship.finish();\r\n        sym.mc_ray.finish();\r\n        \/\/force placement of ray back to ship's x...\r\n        sym.mc_ray.css({"position":"absolute", "top":sym.rayY + "px", "left":sym.mc_ship.position().left + "px"});\r\n    }\r\n}\r\n<\/code><\/pre>\n
*************<\/p>\n
CONCLUSION<\/strong><\/p>\n
I hope this will be helpful to some, or that it will have provided some useful insight for creating a game in Edge Animate. In the next tutorial I’m going to cover creating HTML5 content in Flash<\/a>.<\/p>\n
Download all sourcefiles here, and take a look:
\nhttp:\/\/nathalielawhead.com\/sourcefiles\/Offender_HTML5_Tutorial\/<\/a><\/p>\n
You can play the end result here:
\nhttp:\/\/offender.alienmelon.com\/thegame\/<\/a><\/p>\n
Visit the NEXT tutorial: Building A Game With Flash HTML5 Canvas & CreateJS (Haxatron 2000)<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction: I’ve decided to build this first Tetrageddon Games “mini-game” tutorial, Offender, in Adobe Edge Animate because the program is still very new, and there isn’t much out there on it in terms of game development. I think this will make a great “getting started” resource for newcomers, as well as demonstrate the capabilities of Edge Animate. In this tutorial I hope to offer a solid example of building a game with the program. This is the first part of a series discussing HTML5 game development. * DOWNLOAD the source files here: Offender_HTML.zip * Play the finished game here: Offender...<\/p>\n","protected":false},"author":1,"featured_media":4522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[30,12],"tags":[],"class_list":["post-3041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games","category-resources"],"_links":{"self":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/3041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/comments?post=3041"}],"version-history":[{"count":56,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/3041\/revisions"}],"predecessor-version":[{"id":3271,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/3041\/revisions\/3271"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media\/4522"}],"wp:attachment":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media?parent=3041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/categories?post=3041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/tags?post=3041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}