{"id":754,"date":"2013-04-23T16:32:42","date_gmt":"2013-04-23T11:02:42","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=754"},"modified":"2013-04-23T16:32:42","modified_gmt":"2013-04-23T11:02:42","slug":"sprite-animation-revisited","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/sprite-animation-revisited\/","title":{"rendered":"Sprite Animation Revisited"},"content":{"rendered":"<p><script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/jquery-1.7.1.js\"><\/script><script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/2013-04-23\/kinetic-v4.4.3.min.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"http:\/\/ramkulkarni.com\/temp\/2013-04-23\/blog_js_script.js\"><\/script><script type=\"text\/javascript\">\/\/ <![CDATA[\nstartScript();\n\/\/ ]]><\/script><\/p>\n<p>Last year I had blogged about\u00a0<a title=\"Sprite Animation in HTML5 Canvas with KineticJS\" href=\"http:\/\/ramkulkarni.com\/blog\/sprite-animation-in-html5-canvas-with-kineticjs\/\" target=\"_blank\">animating sprite using Kinetic JS<\/a>.<br \/>\nCode in that post was part of a <a title=\"A Simple HTML5 Game\" href=\"http:\/\/ramkulkarni.com\/blog\/a-simple-html5-game\/\" target=\"_blank\">simple game<\/a> I had created. So the code specific for animating sprite was explained in snippets. A reader of that post contacted me with a request to provide a complete example. So I created a small demo of sprite animation only. If you are interested, you can download it from <a title=\"Demo - Sprite animation using Kinetic JS\" href=\"http:\/\/ramkulkarni.com\/temp\/2013-04-23\/SpriteDemo-PlanetExplosion.zip\" target=\"_blank\">here<\/a>. This demo animates images in the sprite sheet at a fixed location, it does not move the image. So I thought \u00a0it would be interesting to add motion to sprite images when they are animated.<\/p>\n<p>First, take a look at the demo. Click on the Walk button to make the person walk. You can stop any time. If the person hits right side wall, then she falls, which is also simulated using sprite animation. I know the &#8216;walk&#8217; does not look natural, but creating graphics is not my string point and this is the best I could manage.<\/p>\n<div id=\"walkingStage\"><\/div>\n<div>Walking Speed : <input id=\"speedTxt\" type=\"text\" size=\"2\" value=\"7\" \/> (Enter value from 1 to 10)<br \/>\n<input id=\"walkBtn\" type=\"button\" value=\"Walk\" \/><\/div>\n<p><!--more--><\/p>\n<p>The above example contains two instances of sprite animation. One for walking and\u00a0another to simulate fall. I used a single sprite sheet to contain images required for both these animations.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2013\/04\/walking_person_sprite_sheet.png\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"773\" data-permalink=\"http:\/\/ramkulkarni.com\/blog\/sprite-animation-revisited\/walking_person_sprite_sheet\/\" data-orig-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2013\/04\/walking_person_sprite_sheet.png?fit=602%2C107\" data-orig-size=\"602,107\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"walking_person_sprite_sheet\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2013\/04\/walking_person_sprite_sheet.png?fit=300%2C53\" data-large-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2013\/04\/walking_person_sprite_sheet.png?fit=525%2C93\" class=\"alignnone size-full wp-image-773\" alt=\"walking_person_sprite_sheet\" src=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2013\/04\/walking_person_sprite_sheet.png?resize=525%2C93\" width=\"525\" height=\"93\" srcset=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2013\/04\/walking_person_sprite_sheet.png?w=602 602w, https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2013\/04\/walking_person_sprite_sheet.png?resize=300%2C53 300w\" sizes=\"(max-width: 525px) 100vw, 525px\" data-recalc-dims=\"1\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>The first four images are used for walking action and the next four are used to simulate fall action. I create a single JavaScript object with two animation keys (walk and fall).<\/p>\n<p>Kinetic.Sprite object has a method <a href=\"http:\/\/kineticjs.com\/docs\/symbols\/Kinetic.Sprite.php#afterFrame\" target=\"_blank\">afterFrame<\/a>. You can specify a callback function to be invoked after certain number of frames are displayed. I thought I would use this function to increment X position of images, to move them along the X axis. However I found that this function is called only once. Looking at the source code of KineticJS confirmed this. In fact the callback function is removed from the object after invoking it once.<\/p>\n<p>I then ended up using setInterval function to increment the X position. However I had to make sure that interval is set equal to what KineticJS uses to change frames. Sprite object has an attribute called frameRate, which is the number of frames displayed per second. So the value of interval I set (in setInterval function) is 1000 \/ frameRate. This values is specified in milli seconds, hence use of 1000.<\/p>\n<p>You can download the complete demo code and images from <a href=\"http:\/\/ramkulkarni.com\/temp\/2013-04-23\/SpriteDemo-WalkingPerson.zip\" target=\"_blank\">here<\/a>. And here is the source code, if you just want to browse it.<\/p>\n<pre><span style=\"color: #004a43;\">&lt;!DOCTYPE html&gt;<\/span>\n\n<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">html<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\t<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">head<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\t\t<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">script type=\"text\/javascript\" src=\"kinetic-v4.4.3.min.js\"<\/span><span style=\"color: #a65700;\">&gt;<\/span><span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: #800000; font-weight: bold;\">script<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\n\t\t<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">script type=\"text\/JavaScript\"<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\n\t\t\t<span style=\"color: #800000; font-weight: bold;\">var<\/span> initX <span style=\"color: #808030;\">=<\/span> <span style=\"color: #008c00;\">5<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\tinitY <span style=\"color: #808030;\">=<\/span> <span style=\"color: #008c00;\">5<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t<span style=\"color: #696969;\">\/\/Width and height of Kinetic Stage<\/span>\n\t\t\t\tstageWidth <span style=\"color: #808030;\">=<\/span> <span style=\"color: #008c00;\">500<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\tstageHeight <span style=\"color: #808030;\">=<\/span> <span style=\"color: #008c00;\">115<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\tcurrX <span style=\"color: #808030;\">=<\/span> initX<span style=\"color: #808030;\">,<\/span>\n\t\t\t\tframeRate <span style=\"color: #808030;\">=<\/span> <span style=\"color: #008c00;\">5<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\taverageSpriteWidth <span style=\"color: #808030;\">=<\/span> <span style=\"color: #008c00;\">42<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\taverageFallSpriteWidth <span style=\"color: #808030;\">=<\/span> <span style=\"color: #008c00;\">100<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\twalking <span style=\"color: #808030;\">=<\/span> <span style=\"color: #0f4d75;\">false<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t<span style=\"color: #696969;\">\/\/Positions of images in sprite<\/span>\n\t\t\twalkingPersonAnimationInfo <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800080;\">{<\/span>\n\t\t\t    walk <span style=\"color: #800080;\">:<\/span><span style=\"color: #808030;\">[<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t        x<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">4<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        y<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">3<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        width<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">42<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        height<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">100<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t        x<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">66<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        y<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">3<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        width<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">42<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        height<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">100<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t        x<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">128<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        y<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">3<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        width<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">42<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        height<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">100<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t        x<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">197<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        y<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">3<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        width<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">42<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        height<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">100<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">}<\/span>\n\n\t\t\t    \t<span style=\"color: #808030;\">]<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t    fall <span style=\"color: #800080;\">:<\/span><span style=\"color: #808030;\">[<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t        x<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">258<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        y<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">3<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        width<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">42<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        height<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">100<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t    <span style=\"color: #800080;\">{<\/span>\n\t\t\t\t        x<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">314<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        y<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">3<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        width<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">68<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        height<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">100<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t        x<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">389<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        y<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">3<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        width<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">93<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        height<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">100<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t        x<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">500<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        y<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">3<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        width<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">99<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t        height<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">100<\/span>\n\t\t\t    \t<span style=\"color: #800080;\">}<\/span>\n\t\t\t    <span style=\"color: #808030;\">]<\/span>\n\t\t\t<span style=\"color: #800080;\">}<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t<span style=\"color: #800000; font-weight: bold;\">function<\/span> onBodyLoad<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span>\n\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t<span style=\"color: #696969;\">\/\/Create Kinetic Stage<\/span>\n\t\t\t\tstage <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000; font-weight: bold;\">new<\/span> Kinetic<span style=\"color: #808030;\">.<\/span>Stage<span style=\"color: #808030;\">(<\/span><span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\tcontainer<span style=\"color: #800080;\">:<\/span> <span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">walkingStage<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\twidth<span style=\"color: #800080;\">:<\/span>stageWidth<span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\theight<span style=\"color: #800080;\">:<\/span>stageHeight\n\t\t\t\t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\tlayer <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000; font-weight: bold;\">new<\/span> Kinetic<span style=\"color: #808030;\">.<\/span>Layer<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\t<span style=\"color: #696969;\">\/\/create a border<\/span>\n\t\t\t\t<span style=\"color: #800000; font-weight: bold;\">var<\/span> border <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000; font-weight: bold;\">new<\/span> Kinetic<span style=\"color: #808030;\">.<\/span>Rect<span style=\"color: #808030;\">(<\/span><span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\tx<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">0<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\ty<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">0<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\twidth<span style=\"color: #800080;\">:<\/span> stage<span style=\"color: #808030;\">.<\/span>getWidth<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">-<\/span><span style=\"color: #008c00;\">2<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\theight<span style=\"color: #800080;\">:<\/span> stage<span style=\"color: #808030;\">.<\/span>getHeight<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">-<\/span><span style=\"color: #008c00;\">2<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\tstroke<span style=\"color: #800080;\">:<\/span><span style=\"color: #0000e6;\">'black'<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\tstrokeWidth<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">1<\/span>\n\t\t\t\t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\tlayer<span style=\"color: #808030;\">.<\/span>add<span style=\"color: #808030;\">(<\/span>border<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\tloadStandingPersonImage<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tloadFallenPersonImage<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tloadSpriteImage<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\t<span style=\"color: #696969;\">\/\/Add layer to the stage<\/span>\n\t\t\t\tstage<span style=\"color: #808030;\">.<\/span>add<span style=\"color: #808030;\">(<\/span>layer<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t<span style=\"color: #800080;\">}<\/span>\n\n\t\t\t<span style=\"color: #800000; font-weight: bold;\">function<\/span> loadStandingPersonImage<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span>\n\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t<span style=\"color: #696969;\">\/\/Load Standing Person image<\/span>\n\t\t\t\tstandingImg <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000; font-weight: bold;\">new<\/span> <span style=\"color: #797997;\">Image<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tstandingImg<span style=\"color: #808030;\">.<\/span>onload <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000; font-weight: bold;\">function<\/span> <span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\tkjsStandingImg <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000; font-weight: bold;\">new<\/span> Kinetic<span style=\"color: #808030;\">.<\/span><span style=\"color: #797997;\">Image<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\t\tx<span style=\"color: #800080;\">:<\/span>initX<span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\t\ty<span style=\"color: #800080;\">:<\/span>initY<span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\t\timage<span style=\"color: #800080;\">:<\/span>standingImg\n\t\t\t\t\t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tlayer<span style=\"color: #808030;\">.<\/span>add<span style=\"color: #808030;\">(<\/span>kjsStandingImg<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tlayer<span style=\"color: #808030;\">.<\/span>draw<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t<span style=\"color: #800080;\">}<\/span>\n\t\t\t\tstandingImg<span style=\"color: #808030;\">.<\/span>src <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">standing_person.png<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t<span style=\"color: #800080;\">}<\/span>\n\n\t\t\t<span style=\"color: #800000; font-weight: bold;\">function<\/span> loadFallenPersonImage<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span>\n\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t<span style=\"color: #696969;\">\/\/Load Fallen Person image<\/span>\n\t\t\t\tfallenImg <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000; font-weight: bold;\">new<\/span> <span style=\"color: #797997;\">Image<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tfallenImg<span style=\"color: #808030;\">.<\/span>onload <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000; font-weight: bold;\">function<\/span> <span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\tkjsFallenImg <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000; font-weight: bold;\">new<\/span> Kinetic<span style=\"color: #808030;\">.<\/span><span style=\"color: #797997;\">Image<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\t\tx<span style=\"color: #800080;\">:<\/span>initX<span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\t\ty<span style=\"color: #800080;\">:<\/span>initY<span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\t\timage<span style=\"color: #800080;\">:<\/span>fallenImg\n\t\t\t\t\t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tkjsFallenImg<span style=\"color: #808030;\">.<\/span>hide<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tlayer<span style=\"color: #808030;\">.<\/span>add<span style=\"color: #808030;\">(<\/span>kjsFallenImg<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t<span style=\"color: #800080;\">}<\/span>\n\t\t\t\tfallenImg<span style=\"color: #808030;\">.<\/span>src <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">fallen_person.png<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t<span style=\"color: #800080;\">}<\/span>\n\n\t\t\t<span style=\"color: #800000; font-weight: bold;\">function<\/span> loadSpriteImage<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span>\n\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t<span style=\"color: #696969;\">\/\/Load sprite image<\/span>\n\t\t\t\tspriteImg <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000; font-weight: bold;\">new<\/span> <span style=\"color: #797997;\">Image<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tspriteImg<span style=\"color: #808030;\">.<\/span>onload<span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000; font-weight: bold;\">function<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span>\n\t\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\tkjsSprite <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000; font-weight: bold;\">new<\/span> Kinetic<span style=\"color: #808030;\">.<\/span>Sprite<span style=\"color: #808030;\">(<\/span><span style=\"color: #800080;\">{<\/span>\n\t   \t\t\t\t\tx<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">0<\/span><span style=\"color: #808030;\">,<\/span>y<span style=\"color: #800080;\">:<\/span><span style=\"color: #008c00;\">0<\/span><span style=\"color: #808030;\">,<\/span>\n\t    \t\t\t\timage<span style=\"color: #800080;\">:<\/span>spriteImg<span style=\"color: #808030;\">,<\/span>\n\t    \t\t\t\tanimation<span style=\"color: #800080;\">:<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">walk<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">,<\/span>\n\t    \t\t\t\tanimations<span style=\"color: #800080;\">:<\/span>walkingPersonAnimationInfo<span style=\"color: #808030;\">,<\/span>\n\t    \t\t\t\tframeRate<span style=\"color: #800080;\">:<\/span>frameRate\n\t\t\t\t\t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>hide<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tlayer<span style=\"color: #808030;\">.<\/span>add<span style=\"color: #808030;\">(<\/span>kjsSprite<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t<span style=\"color: #800080;\">}<\/span>\n\t\t\t\tspriteImg<span style=\"color: #808030;\">.<\/span>src <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">walking_person_sprite_sheet.png<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t<span style=\"color: #800080;\">}<\/span>\n\n\t\t\t<span style=\"color: #800000; font-weight: bold;\">function<\/span> onWalkBtnClick<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span>\n\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t<span style=\"color: #800000; font-weight: bold;\">var<\/span> btnElement <span style=\"color: #808030;\">=<\/span> document<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">walkBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\tmode <span style=\"color: #808030;\">=<\/span> btnElement<span style=\"color: #808030;\">.<\/span>getAttribute<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">value<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\t<span style=\"color: #800000; font-weight: bold;\">if<\/span> <span style=\"color: #808030;\">(<\/span>mode <span style=\"color: #808030;\">==<\/span> <span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">Walk<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span>\n\t\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\tmode <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">Stop<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tstartWalking<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t<span style=\"color: #800080;\">}<\/span>\n\t\t\t\t<span style=\"color: #800000; font-weight: bold;\">else<\/span>\n\t\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\tmode <span style=\"color: #808030;\">=<\/span> <span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">Walk<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tstopWalking<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t<span style=\"color: #800080;\">}<\/span>\n\n\t\t\t\tdocument<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">walkBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>setAttribute<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">value<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">,<\/span>mode<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t<span style=\"color: #800080;\">}<\/span>\n\n\t\t\t<span style=\"color: #696969;\">\/\/Starts sprite animation\t\t\t<\/span>\n\t\t\t<span style=\"color: #800000; font-weight: bold;\">function<\/span> startWalking<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span>\n\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t<span style=\"color: #800000; font-weight: bold;\">var<\/span> speedStr <span style=\"color: #808030;\">=<\/span> document<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">speedTxt<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>value<span style=\"color: #800080;\">;<\/span>\n\t\t\t\t<span style=\"color: #800000; font-weight: bold;\">var<\/span> speed <span style=\"color: #808030;\">=<\/span> <span style=\"color: #797997;\">Number<\/span><span style=\"color: #808030;\">(<\/span>speedStr<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t<span style=\"color: #800000; font-weight: bold;\">if<\/span> <span style=\"color: #808030;\">(<\/span><span style=\"color: #800000; font-weight: bold;\">isNaN<\/span><span style=\"color: #808030;\">(<\/span>speed<span style=\"color: #808030;\">)<\/span> <span style=\"color: #808030;\">||<\/span> speed <span style=\"color: #808030;\">&gt;<\/span> <span style=\"color: #008c00;\">10<\/span> <span style=\"color: #808030;\">||<\/span> speed <span style=\"color: #808030;\">&lt;<\/span> <span style=\"color: #008c00;\">1<\/span><span style=\"color: #808030;\">)<\/span>\n\t\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\tspeed <span style=\"color: #808030;\">=<\/span> <span style=\"color: #008c00;\">5<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tdocument<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">speedTxt<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>value <span style=\"color: #808030;\">=<\/span> speed<span style=\"color: #800080;\">;<\/span>\n\t\t\t\t<span style=\"color: #800080;\">}<\/span>\n\n\t\t\t\tframeRate <span style=\"color: #808030;\">=<\/span> speed<span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\tkjsFallenImg<span style=\"color: #808030;\">.<\/span>hide<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tkjsStandingImg<span style=\"color: #808030;\">.<\/span>hide<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>setAnimation<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">walk<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>setFrameRate<span style=\"color: #808030;\">(<\/span>frameRate<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\t<span style=\"color: #696969;\">\/\/Move sprite image to the location of standing person image<\/span>\n\t\t\t\tcurrX <span style=\"color: #808030;\">=<\/span> kjsStandingImg<span style=\"color: #808030;\">.<\/span>getX<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>setX<span style=\"color: #808030;\">(<\/span>currX<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>setY<span style=\"color: #808030;\">(<\/span>kjsStandingImg<span style=\"color: #808030;\">.<\/span>getY<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>show<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\t<span style=\"color: #800000; font-weight: bold;\">var<\/span> stageWidth <span style=\"color: #808030;\">=<\/span> stage<span style=\"color: #808030;\">.<\/span>getWidth<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t\tstopWalking <span style=\"color: #808030;\">=<\/span> <span style=\"color: #0f4d75;\">false<\/span><span style=\"color: #808030;\">,<\/span>\n\t\t\t\t \twalkInterval <span style=\"color: #808030;\">=<\/span> setInterval<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000; font-weight: bold;\">function<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">{<\/span>\n\t\t\t\t \t\t<span style=\"color: #800000; font-weight: bold;\">if<\/span> <span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">!<\/span>walking<span style=\"color: #808030;\">)<\/span>\n\t\t\t\t \t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t \t\t\tclearInterval<span style=\"color: #808030;\">(<\/span>walkInterval<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t \t\t\t<span style=\"color: #800000; font-weight: bold;\">return<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t \t\t<span style=\"color: #800080;\">}<\/span>\n\n\t\t\t\t\t\tcurrX <span style=\"color: #808030;\">+=<\/span> <span style=\"color: #008c00;\">10<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\t\t<span style=\"color: #800000; font-weight: bold;\">if<\/span> <span style=\"color: #808030;\">(<\/span>currX <span style=\"color: #808030;\">+<\/span> averageSpriteWidth <span style=\"color: #808030;\">&gt;<\/span> stageWidth<span style=\"color: #808030;\">)<\/span>\n\t\t\t\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #800000; font-weight: bold;\">if<\/span> <span style=\"color: #808030;\">(<\/span>currX <span style=\"color: #808030;\">&lt;<\/span> stageWidth <span style=\"color: #808030;\">&amp;&amp;<\/span> <span style=\"color: #808030;\">!<\/span>stopWalking<span style=\"color: #808030;\">)<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\t\t\t\tcurrX <span style=\"color: #808030;\">=<\/span> stageWidth <span style=\"color: #808030;\">-<\/span> averageSpriteWidth<span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\t\t\t\tstopWalking <span style=\"color: #808030;\">=<\/span> <span style=\"color: #0f4d75;\">true<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #800080;\">}<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #800000; font-weight: bold;\">else<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\t \t\t\tclearInterval<span style=\"color: #808030;\">(<\/span>walkInterval<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\t\t\t\tstartFalling<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\t\t\t\t<span style=\"color: #800000; font-weight: bold;\">return<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #800080;\">}<\/span>\n\t\t\t\t\t\t<span style=\"color: #800080;\">}<\/span>\n\n\t\t\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>setX<span style=\"color: #808030;\">(<\/span>currX<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">,<\/span> <span style=\"color: #008c00;\">1000<\/span> <span style=\"color: #808030;\">\/<\/span> frameRate<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n    \t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>start<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n    \t\t\twalking <span style=\"color: #808030;\">=<\/span> <span style=\"color: #0f4d75;\">true<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t<span style=\"color: #800080;\">}<\/span>\n\n\t\t\t<span style=\"color: #696969;\">\/\/Starting falling animation<\/span>\n\t\t\t<span style=\"color: #800000; font-weight: bold;\">function<\/span> startFalling<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span>\n\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\twalking <span style=\"color: #808030;\">=<\/span> <span style=\"color: #0f4d75;\">false<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>setAnimation<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">fall<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>setX<span style=\"color: #808030;\">(<\/span>stage<span style=\"color: #808030;\">.<\/span>getWidth<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">-<\/span>averageFallSpriteWidth<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>afterFrame<span style=\"color: #808030;\">(<\/span><span style=\"color: #008c00;\">3<\/span><span style=\"color: #808030;\">,<\/span><span style=\"color: #800000; font-weight: bold;\">function<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">{<\/span>\n\t\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>stop<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tkjsFallenImg<span style=\"color: #808030;\">.<\/span>setX<span style=\"color: #808030;\">(<\/span>stage<span style=\"color: #808030;\">.<\/span>getWidth<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">-<\/span>kjsFallenImg<span style=\"color: #808030;\">.<\/span>getWidth<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">-<\/span><span style=\"color: #008c00;\">4<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tkjsFallenImg<span style=\"color: #808030;\">.<\/span>setY<span style=\"color: #808030;\">(<\/span>stage<span style=\"color: #808030;\">.<\/span>getHeight<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">-<\/span>kjsFallenImg<span style=\"color: #808030;\">.<\/span>getHeight<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">-<\/span><span style=\"color: #008c00;\">4<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>hide<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tkjsFallenImg<span style=\"color: #808030;\">.<\/span>show<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tlayer<span style=\"color: #808030;\">.<\/span>draw<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t\tdocument<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">walkBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>setAttribute<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">value<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">,<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">Walk<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\t<span style=\"color: #800080;\">}<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\n\t\t\t<span style=\"color: #800080;\">}<\/span>\n\n\t\t\t<span style=\"color: #800000; font-weight: bold;\">function<\/span> stopWalking<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span>\n\t\t\t<span style=\"color: #800080;\">{<\/span>\n\t\t\t\twalking <span style=\"color: #808030;\">=<\/span> <span style=\"color: #0f4d75;\">false<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>stop<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tkjsSprite<span style=\"color: #808030;\">.<\/span>hide<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tkjsFallenImg<span style=\"color: #808030;\">.<\/span>hide<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tkjsStandingImg<span style=\"color: #808030;\">.<\/span>show<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tlayer<span style=\"color: #808030;\">.<\/span>draw<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t\tdocument<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">walkBtn<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>setAttribute<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">value<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">,<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">Walk<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n\t\t\t<span style=\"color: #800080;\">}<\/span>\n\n\t\t<span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: #800000; font-weight: bold;\">script<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\t<span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: #800000; font-weight: bold;\">head<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\n\t<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">body<\/span><span style=\"color: #074726;\">onload<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"onBodyLoad()\"<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\t\t<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">div<\/span><span style=\"color: #074726;\">id<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"walkingStage\"<\/span><span style=\"color: #a65700;\">&gt;<\/span><span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: #800000; font-weight: bold;\">div<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\t\t<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">br<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\t\t<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">div<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\t\t\tWalking Speed : <span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">input<\/span><span style=\"color: #074726;\">type<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"text\"<\/span><span style=\"color: #074726;\">id<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"speedTxt\"<\/span><span style=\"color: #074726;\">value<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"5\"<\/span><span style=\"color: #074726;\">size<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"2\"<\/span><span style=\"color: #a65700;\">\/&gt;<\/span> (Enter value from <span style=\"color: #008c00;\">1<\/span> to <span style=\"color: #008c00;\">10<\/span>)<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">br<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\t\t\t<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: #800000; font-weight: bold;\">input<\/span><span style=\"color: #074726;\">type<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"button\"<\/span><span style=\"color: #074726;\">id<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"walkBtn\"<\/span><span style=\"color: #074726;\">value<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"Walk\"<\/span><span style=\"color: #074726;\">onclick<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"onWalkBtnClick()\"<\/span><span style=\"color: #a65700;\">\/&gt;<\/span>\n\t\t<span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: #800000; font-weight: bold;\">div<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\n\t<span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: #800000; font-weight: bold;\">body<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n<span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: #800000; font-weight: bold;\">html<\/span><span style=\"color: #a65700;\">&gt;<\/span><\/pre>\n<p>-Ram Kulkarni<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last year I had blogged about\u00a0animating sprite using Kinetic JS. Code in that post was part of a simple game I had created. So the code specific for animating sprite was explained in snippets. A reader of that post contacted me with a request to provide a complete example. So I created a small demo &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/ramkulkarni.com\/blog\/sprite-animation-revisited\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Sprite Animation Revisited&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Sprite Animation Revisited http:\/\/wp.me\/p2g9O8-ca","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[10,20,1],"tags":[5,34,68],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-ca","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/754"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=754"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/754\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=754"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}