{"id":204,"date":"2012-05-06T17:54:28","date_gmt":"2012-05-06T12:24:28","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=204"},"modified":"2012-05-06T17:54:28","modified_gmt":"2012-05-06T12:24:28","slug":"a-simple-html5-game","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/a-simple-html5-game\/","title":{"rendered":"A Simple HTML5 Game"},"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\/2012-05-06\/blog_js_script.js\"><\/script><br \/>\n<script type=\"text\/javascript\">\/\/ <![CDATA[\n     startScript();\n\/\/ ]]><\/script><br \/>\nMy son is having summer vacation and he wanted to learn animation and create games. He had learnt Flash and ActionScript a couple of years back. So he started developing a game in Flash. However he ran into few issues and sought my help. Since I don&#8217;t know Flash, I could not help him much. But I suggested that if he develops his game in HTML5, I could help him. So while teaching him HTML5 and animation, I ended up creating a very simple game, which I want to share here.<br \/>\n<!--more--><br \/>\nIn this game, when you press the &#8216;Start&#8217; button, a square starts moving inside a bigger square and the goal is to prevent the smaller square hitting the outer square, by controlling its motion using arrow keys. You don&#8217;t need to keep the keys pressed, just press and release any arrow key to change direction. The square moves on its own and accelerates as the game progresses. Give it a try &#8211;<\/p>\n<p><canvas id=\"canvas1\" height=\"300\" width=\"400\" style=\"border-style:solid;border-color:#DDD\"><\/canvas><br \/>\n<input id=\"startBtn\" type=\"button\" value=\"Start\"><\/p>\n<div id=\"scoreDiv\" style=\"background-color:#AAA;\n\tfont-size:larger;border-color:#000;\n\tborder-style:outset;display:none;max-width:400px\"><\/div>\n<p>The animation loop in this game is created using window.setInterval() function, initially in the startGame() function and then later when the square needs to be accelerated, in accelerate() function. Before creating a new interval in the accelerate(), old loop is cancelled by calling window.clearInterval(). The square is drawn in animateFunc(), which is called by setInterval() method at fixed interval. See the code listing at the end of this post.<\/p>\n<p>Acceleration is controlled by three variables; xStep, yStep and interval. xStep and yStep determine how much the square should move along X and Y axis respectively. interval determines how frequently animateFunc() is called. The interval at which acceleration is changed is controlled by changeAccelerationInterval variable. The game can be made as simple or difficult as you want by tweaking values of these variables.<\/p>\n<p>Key down event (for all arrow keys) is handled by handleKeyDown() and up event is handled by handleKeyUp(). The score is calculated by dividing number of seconds played by two.<\/p>\n<p>Note that I haven&#8217;t used animation optimizations techniques I had discussed in my earlier posts in this game because there is not much to redraw on the Canvas and performance is quite good.<\/p>\n<p>Though the game is very simple, I had fun developing it.<\/p>\n<p>-Ram Kulkarni<\/p>\n<pre style='color:#000000;background:#f1f0f0;'><span style='color:#806030; '>&lt;<\/span>html xmlns<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>http:\/\/www.w3.org\/1999\/xhtml<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>><\/span>\n<span style='color:#806030; '>&lt;<\/span>head<span style='color:#806030; '>><\/span>\n<span style='color:#806030; '>&lt;<\/span>title<span style='color:#806030; '>><\/span>Simple Game<span style='color:#806030; '>&lt;<\/span><span style='color:#806030; '>\/<\/span>title<span style='color:#806030; '>><\/span>\n<span style='color:#806030; '>&lt;<\/span>script type<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>text\/javascript<\/span><span style='color:#800000; '>\"<\/span> src<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>jquery-1.7.1.js<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>><\/span><span style='color:#806030; '>&lt;<\/span><span style='color:#806030; '>\/<\/span>script<span style='color:#806030; '>><\/span>\n\n<span style='color:#806030; '>&lt;<\/span>script type<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>text\/javascript<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>><\/span>\n    <span style='color:#400000; font-weight:bold; '>var<\/span> currXPos <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>0<\/span><span style='color:#806030; '>,<\/span> currYPos <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>0<\/span><span style='color:#806030; '>;<\/span><span style='color:#806030; '>;<\/span>\n    <span style='color:#400000; font-weight:bold; '>var<\/span> width <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>400<\/span><span style='color:#806030; '>,<\/span> height <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>300<\/span><span style='color:#806030; '>;<\/span>\n    <span style='color:#400000; font-weight:bold; '>var<\/span> rectWidth <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>20<\/span><span style='color:#806030; '>,<\/span> rectHeight <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>20<\/span><span style='color:#806030; '>;<\/span>\n    <span style='color:#400000; font-weight:bold; '>var<\/span> xDir <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>1<\/span><span style='color:#806030; '>,<\/span> yDir <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>1<\/span><span style='color:#806030; '>,<\/span> xStep <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>2<\/span><span style='color:#806030; '>,<\/span> yStep <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>2<\/span><span style='color:#806030; '>,<\/span> interval <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>60<\/span><span style='color:#806030; '>;<\/span>\n    <span style='color:#400000; font-weight:bold; '>var<\/span> changeAccelerationInterval <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>4000<\/span><span style='color:#806030; '>;<\/span> <span style='color:#c34e00; '>\/\/4 seconds<\/span>\n    <span style='color:#400000; font-weight:bold; '>var<\/span> changeXDir <span style='color:#806030; '>=<\/span> <span style='color:#0f4d75; '>true<\/span><span style='color:#806030; '>,<\/span> changeYDir <span style='color:#806030; '>=<\/span> <span style='color:#0f4d75; '>true<\/span><span style='color:#806030; '>;<\/span>\n    <span style='color:#400000; font-weight:bold; '>var<\/span> stopAnimation <span style='color:#806030; '>=<\/span> <span style='color:#0f4d75; '>true<\/span><span style='color:#806030; '>;<\/span>\n    <span style='color:#400000; font-weight:bold; '>var<\/span> scoreStartTime<span style='color:#806030; '>,<\/span> acceStartTime <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>0<\/span><span style='color:#806030; '>;<\/span>\n\n    $<span style='color:#806030; '>(<\/span>document<span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span>ready<span style='color:#806030; '>(<\/span><span style='color:#400000; font-weight:bold; '>function<\/span><span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>{<\/span>\n        can1 <span style='color:#806030; '>=<\/span> $<span style='color:#806030; '>(<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>#canvas1<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>[<\/span><span style='color:#c00000; '>0<\/span><span style='color:#806030; '>]<\/span><span style='color:#806030; '>;<\/span>\n        ctx <span style='color:#806030; '>=<\/span> can1<span style='color:#806030; '>.<\/span>getContext<span style='color:#806030; '>(<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>2d<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n\n        $<span style='color:#806030; '>(<\/span>document<span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span>keydown<span style='color:#806030; '>(<\/span>handleKeyDown<span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        $<span style='color:#806030; '>(<\/span>document<span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span>keyup<span style='color:#806030; '>(<\/span>handleKeyUp<span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        $<span style='color:#806030; '>(<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>#startBtn<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span>click <span style='color:#806030; '>(<\/span>startGame<span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n    <span style='color:#806030; '>}<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n\n    <span style='color:#400000; font-weight:bold; '>function<\/span> startGame<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span>\n    <span style='color:#806030; '>{<\/span>\n        xDir <span style='color:#806030; '>=<\/span> yDir <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>1<\/span><span style='color:#806030; '>;<\/span>\n        xStep <span style='color:#806030; '>=<\/span> yStep <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>2<\/span><span style='color:#806030; '>;<\/span>\n        interval <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>60<\/span><span style='color:#806030; '>;<\/span>\n        changeXDir <span style='color:#806030; '>=<\/span> changeYDir <span style='color:#806030; '>=<\/span> <span style='color:#0f4d75; '>true<\/span><span style='color:#806030; '>;<\/span>\n        currXPos <span style='color:#806030; '>=<\/span> <span style='color:#806030; '>(<\/span>width <span style='color:#806030; '>\/<\/span> <span style='color:#c00000; '>2<\/span><span style='color:#806030; '>)<\/span> <span style='color:#806030; '>-<\/span> <span style='color:#806030; '>(<\/span>rectWidth <span style='color:#806030; '>\/<\/span> <span style='color:#c00000; '>2<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        currYPos <span style='color:#806030; '>=<\/span> <span style='color:#806030; '>(<\/span>height <span style='color:#806030; '>\/<\/span> <span style='color:#c00000; '>2<\/span><span style='color:#806030; '>)<\/span> <span style='color:#806030; '>-<\/span> <span style='color:#806030; '>(<\/span>rectHeight <span style='color:#806030; '>\/<\/span> <span style='color:#c00000; '>2<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n\n        stopAnimation <span style='color:#806030; '>=<\/span> <span style='color:#0f4d75; '>false<\/span><span style='color:#806030; '>;<\/span>\n        scoreStartTime <span style='color:#806030; '>=<\/span> acceStartTime <span style='color:#806030; '>=<\/span> <span style='color:#806030; '>(<\/span><span style='color:#400000; font-weight:bold; '>new<\/span> Date<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span><span style='color:#400000; font-weight:bold; '>getTime<\/span><span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        $<span style='color:#806030; '>(<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>#startBtn<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span>hide<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        $<span style='color:#806030; '>(<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>#scoreDiv<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span>hide<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        animateFunc<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        intervalId <span style='color:#806030; '>=<\/span> window<span style='color:#806030; '>.<\/span>setInterval<span style='color:#806030; '>(<\/span>animateFunc<span style='color:#806030; '>,<\/span> interval<span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n    <span style='color:#806030; '>}<\/span>\n\n    <span style='color:#400000; font-weight:bold; '>function<\/span> stopGame<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span>\n    <span style='color:#806030; '>{<\/span>\n        <span style='color:#400000; font-weight:bold; '>var<\/span> timePlayed <span style='color:#806030; '>=<\/span> <span style='color:#806030; '>(<\/span><span style='color:#400000; font-weight:bold; '>new<\/span> Date<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span><span style='color:#400000; font-weight:bold; '>getTime<\/span><span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span> <span style='color:#806030; '>-<\/span> scoreStartTime<span style='color:#806030; '>;<\/span>\n        <span style='color:#400000; font-weight:bold; '>var<\/span> score <span style='color:#806030; '>=<\/span> <span style='color:#400000; font-weight:bold; '>new<\/span> Number<span style='color:#806030; '>(<\/span>timePlayed <span style='color:#806030; '>\/<\/span> <span style='color:#806030; '>(<\/span><span style='color:#c00000; '>1000<\/span> <span style='color:#806030; '>*<\/span> <span style='color:#c00000; '>2<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span><span style='color:#400000; font-weight:bold; '>toFixed<\/span><span style='color:#806030; '>(<\/span><span style='color:#c00000; '>0<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        $<span style='color:#806030; '>(<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>#startBtn<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span>show<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        window<span style='color:#806030; '>.<\/span>clearInterval<span style='color:#806030; '>(<\/span>intervalId<span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        stopAnimation <span style='color:#806030; '>=<\/span> <span style='color:#0f4d75; '>true<\/span><span style='color:#806030; '>;<\/span>\n        $<span style='color:#806030; '>(<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>#scoreDiv<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span>html<span style='color:#806030; '>(<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>You scored <\/span><span style='color:#800000; '>\"<\/span> <span style='color:#806030; '>+<\/span> score <span style='color:#806030; '>+<\/span> <span style='color:#800000; '>\"<\/span><span style='color:#e60000; '> points<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span>show<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n    <span style='color:#806030; '>}<\/span>\n\n    <span style='color:#400000; font-weight:bold; '>function<\/span> accelerate<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span>\n    <span style='color:#806030; '>{<\/span>\n        <span style='color:#400000; font-weight:bold; '>if<\/span> <span style='color:#806030; '>(<\/span>interval <span style='color:#806030; '>><\/span> <span style='color:#c00000; '>3<\/span><span style='color:#806030; '>)<\/span>\n            interval <span style='color:#806030; '>-<\/span><span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>3<\/span><span style='color:#806030; '>;<\/span>\n\n        xStep<span style='color:#806030; '>++<\/span><span style='color:#806030; '>;<\/span> yStep<span style='color:#806030; '>++<\/span><span style='color:#806030; '>;<\/span>\n        window<span style='color:#806030; '>.<\/span>clearInterval<span style='color:#806030; '>(<\/span>intervalId<span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        acceStartTime <span style='color:#806030; '>=<\/span> <span style='color:#400000; font-weight:bold; '>new<\/span> Date<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span><span style='color:#400000; font-weight:bold; '>getTime<\/span><span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        intervalId <span style='color:#806030; '>=<\/span> window<span style='color:#806030; '>.<\/span>setInterval<span style='color:#806030; '>(<\/span>animateFunc<span style='color:#806030; '>,<\/span> interval<span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n    <span style='color:#806030; '>}<\/span>\n\n    <span style='color:#400000; font-weight:bold; '>function<\/span> isTimeToaccelerate<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span>\n    <span style='color:#806030; '>{<\/span>\n        <span style='color:#400000; font-weight:bold; '>if<\/span> <span style='color:#806030; '>(<\/span><span style='color:#806030; '>(<\/span><span style='color:#806030; '>(<\/span><span style='color:#400000; font-weight:bold; '>new<\/span> Date<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>.<\/span><span style='color:#400000; font-weight:bold; '>getTime<\/span><span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span> <span style='color:#806030; '>-<\/span> acceStartTime<span style='color:#806030; '>)<\/span> <span style='color:#806030; '>><\/span> changeAccelerationInterval<span style='color:#806030; '>)<\/span>\n            <span style='color:#400000; font-weight:bold; '>return<\/span> <span style='color:#0f4d75; '>true<\/span><span style='color:#806030; '>;<\/span>\n        <span style='color:#400000; font-weight:bold; '>return<\/span> <span style='color:#0f4d75; '>false<\/span><span style='color:#806030; '>;<\/span>\n    <span style='color:#806030; '>}<\/span>\n\n    <span style='color:#400000; font-weight:bold; '>function<\/span> handleKeyDown <span style='color:#806030; '>(<\/span>event<span style='color:#806030; '>)<\/span>\n    <span style='color:#806030; '>{<\/span>\n        <span style='color:#400000; font-weight:bold; '>if<\/span> <span style='color:#806030; '>(<\/span>stopAnimation <span style='color:#806030; '>||<\/span> <span style='color:#806030; '>(<\/span><span style='color:#806030; '>!<\/span>changeXDir <span style='color:#806030; '>&amp;&amp;<\/span> <span style='color:#806030; '>!<\/span>changeYDir<span style='color:#806030; '>)<\/span><span style='color:#806030; '>)<\/span>\n            <span style='color:#400000; font-weight:bold; '>return<\/span><span style='color:#806030; '>;<\/span>\n\n        <span style='color:#400000; font-weight:bold; '>if<\/span> <span style='color:#806030; '>(<\/span>event<span style='color:#806030; '>.<\/span>which <span style='color:#806030; '>&lt;<\/span> <span style='color:#c00000; '>37<\/span> <span style='color:#806030; '>||<\/span> event<span style='color:#806030; '>.<\/span>which <span style='color:#806030; '>><\/span> <span style='color:#c00000; '>40<\/span><span style='color:#806030; '>)<\/span>\n            <span style='color:#400000; font-weight:bold; '>return<\/span><span style='color:#806030; '>;<\/span>\n\n        <span style='color:#400000; font-weight:bold; '>if<\/span> <span style='color:#806030; '>(<\/span><span style='color:#806030; '>(<\/span>event<span style='color:#806030; '>.<\/span>which <span style='color:#806030; '>==<\/span> <span style='color:#c00000; '>38<\/span> <span style='color:#806030; '>||<\/span> event<span style='color:#806030; '>.<\/span>which <span style='color:#806030; '>==<\/span> <span style='color:#c00000; '>40<\/span><span style='color:#806030; '>)<\/span> <span style='color:#806030; '>&amp;&amp;<\/span> changeYDir<span style='color:#806030; '>)<\/span>\n        <span style='color:#806030; '>{<\/span>\n            <span style='color:#400000; font-weight:bold; '>if<\/span> <span style='color:#806030; '>(<\/span>event<span style='color:#806030; '>.<\/span>which <span style='color:#806030; '>==<\/span> <span style='color:#c00000; '>38<\/span><span style='color:#806030; '>)<\/span> <span style='color:#c34e00; '>\/\/up<\/span>\n                yDir <span style='color:#806030; '>=<\/span> <span style='color:#806030; '>-<\/span><span style='color:#c00000; '>1<\/span><span style='color:#806030; '>;<\/span>\n            <span style='color:#400000; font-weight:bold; '>else<\/span> <span style='color:#c34e00; '>\/\/down<\/span>\n                yDir <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>1<\/span><span style='color:#806030; '>;<\/span>\n            changeYDir <span style='color:#806030; '>=<\/span> <span style='color:#0f4d75; '>false<\/span><span style='color:#806030; '>;<\/span>\n            event<span style='color:#806030; '>.<\/span>preventDefault<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        <span style='color:#806030; '>}<\/span>\n        <span style='color:#400000; font-weight:bold; '>else<\/span> <span style='color:#400000; font-weight:bold; '>if<\/span> <span style='color:#806030; '>(<\/span><span style='color:#806030; '>(<\/span>event<span style='color:#806030; '>.<\/span>which <span style='color:#806030; '>==<\/span> <span style='color:#c00000; '>37<\/span> <span style='color:#806030; '>||<\/span> event<span style='color:#806030; '>.<\/span>which <span style='color:#806030; '>==<\/span> <span style='color:#c00000; '>39<\/span><span style='color:#806030; '>)<\/span> <span style='color:#806030; '>&amp;&amp;<\/span> changeXDir<span style='color:#806030; '>)<\/span>\n        <span style='color:#806030; '>{<\/span>\n            <span style='color:#400000; font-weight:bold; '>if<\/span> <span style='color:#806030; '>(<\/span>event<span style='color:#806030; '>.<\/span>which <span style='color:#806030; '>==<\/span> <span style='color:#c00000; '>37<\/span><span style='color:#806030; '>)<\/span> <span style='color:#c34e00; '>\/\/left<\/span>\n                xDir <span style='color:#806030; '>=<\/span> <span style='color:#806030; '>-<\/span><span style='color:#c00000; '>1<\/span><span style='color:#806030; '>;<\/span>\n            <span style='color:#400000; font-weight:bold; '>else<\/span> <span style='color:#c34e00; '>\/\/ right<\/span>\n                xDir <span style='color:#806030; '>=<\/span> <span style='color:#c00000; '>1<\/span><span style='color:#806030; '>;<\/span>\n            changeXDir <span style='color:#806030; '>=<\/span> <span style='color:#0f4d75; '>false<\/span><span style='color:#806030; '>;<\/span>\n            event<span style='color:#806030; '>.<\/span>preventDefault<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        <span style='color:#806030; '>}<\/span>\n    <span style='color:#806030; '>}<\/span>\n\n    <span style='color:#400000; font-weight:bold; '>function<\/span> handleKeyUp <span style='color:#806030; '>(<\/span>event<span style='color:#806030; '>)<\/span>\n    <span style='color:#806030; '>{<\/span>\n        <span style='color:#400000; font-weight:bold; '>switch<\/span> <span style='color:#806030; '>(<\/span>event<span style='color:#806030; '>.<\/span>which<span style='color:#806030; '>)<\/span>\n        <span style='color:#806030; '>{<\/span>\n            <span style='color:#400000; font-weight:bold; '>case<\/span> <span style='color:#c00000; '>38<\/span><span style='color:#806030; '>:<\/span> <span style='color:#c34e00; '>\/\/up<\/span>\n            <span style='color:#400000; font-weight:bold; '>case<\/span> <span style='color:#c00000; '>40<\/span><span style='color:#806030; '>:<\/span> <span style='color:#c34e00; '>\/\/down<\/span>\n                changeYDir <span style='color:#806030; '>=<\/span> <span style='color:#0f4d75; '>true<\/span><span style='color:#806030; '>;<\/span>\n                event<span style='color:#806030; '>.<\/span>preventDefault<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n                <span style='color:#400000; font-weight:bold; '>break<\/span><span style='color:#806030; '>;<\/span>\n            <span style='color:#400000; font-weight:bold; '>case<\/span> <span style='color:#c00000; '>37<\/span><span style='color:#806030; '>:<\/span> <span style='color:#c34e00; '>\/\/left<\/span>\n            <span style='color:#400000; font-weight:bold; '>case<\/span> <span style='color:#c00000; '>39<\/span><span style='color:#806030; '>:<\/span> <span style='color:#c34e00; '>\/\/right<\/span>\n                changeXDir <span style='color:#806030; '>=<\/span> <span style='color:#0f4d75; '>true<\/span><span style='color:#806030; '>;<\/span>\n                event<span style='color:#806030; '>.<\/span>preventDefault<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n                <span style='color:#400000; font-weight:bold; '>break<\/span><span style='color:#806030; '>;<\/span>\n        <span style='color:#806030; '>}<\/span>\n    <span style='color:#806030; '>}<\/span>\n\n    <span style='color:#400000; font-weight:bold; '>function<\/span> animateFunc<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span>\n    <span style='color:#806030; '>{<\/span>\n        ctx<span style='color:#806030; '>.<\/span>beginPath<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        ctx<span style='color:#806030; '>.<\/span>clearRect<span style='color:#806030; '>(<\/span><span style='color:#c00000; '>0<\/span><span style='color:#806030; '>,<\/span><span style='color:#c00000; '>0<\/span><span style='color:#806030; '>,<\/span>width<span style='color:#806030; '>,<\/span>height<span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        ctx<span style='color:#806030; '>.<\/span>rect<span style='color:#806030; '>(<\/span>currXPos<span style='color:#806030; '>,<\/span>currYPos<span style='color:#806030; '>,<\/span> rectWidth<span style='color:#806030; '>,<\/span>rectHeight<span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n        ctx<span style='color:#806030; '>.<\/span>stroke<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n\n        currXPos <span style='color:#806030; '>+=<\/span> xStep <span style='color:#806030; '>*<\/span> xDir<span style='color:#806030; '>;<\/span>\n        currYPos <span style='color:#806030; '>+=<\/span> yStep <span style='color:#806030; '>*<\/span> yDir<span style='color:#806030; '>;<\/span>\n\n        <span style='color:#400000; font-weight:bold; '>if<\/span> <span style='color:#806030; '>(<\/span>currXPos <span style='color:#806030; '>&lt;=<\/span> <span style='color:#c00000; '>0<\/span> <span style='color:#806030; '>||<\/span> currXPos <span style='color:#806030; '>>=<\/span> <span style='color:#806030; '>(<\/span>width <span style='color:#806030; '>-<\/span> rectWidth<span style='color:#806030; '>)<\/span> <span style='color:#806030; '>||<\/span>\n            currYPos <span style='color:#806030; '>&lt;=<\/span> <span style='color:#c00000; '>0<\/span> <span style='color:#806030; '>||<\/span> currYPos <span style='color:#806030; '>>=<\/span> <span style='color:#806030; '>(<\/span>height <span style='color:#806030; '>-<\/span> rectHeight<span style='color:#806030; '>)<\/span><span style='color:#806030; '>)<\/span>\n        <span style='color:#806030; '>{<\/span>\n            stopGame<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n            <span style='color:#400000; font-weight:bold; '>return<\/span><span style='color:#806030; '>;<\/span>\n        <span style='color:#806030; '>}<\/span>\n\n        <span style='color:#400000; font-weight:bold; '>if<\/span> <span style='color:#806030; '>(<\/span>isTimeToaccelerate<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>)<\/span>\n            accelerate<span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>;<\/span>\n    <span style='color:#806030; '>}<\/span>\n\n    <span style='color:#c34e00; '>\/\/ get random number between X and Y<\/span>\n    <span style='color:#400000; font-weight:bold; '>function<\/span> getRand<span style='color:#806030; '>(<\/span>x<span style='color:#806030; '>,<\/span> y<span style='color:#806030; '>)<\/span> <span style='color:#806030; '>{<\/span>\n        <span style='color:#400000; font-weight:bold; '>return<\/span> Math<span style='color:#806030; '>.<\/span><span style='color:#400000; font-weight:bold; '>floor<\/span><span style='color:#806030; '>(<\/span>Math<span style='color:#806030; '>.<\/span><span style='color:#400000; font-weight:bold; '>random<\/span><span style='color:#806030; '>(<\/span><span style='color:#806030; '>)<\/span><span style='color:#806030; '>*<\/span>y<span style='color:#806030; '>)<\/span><span style='color:#806030; '>+<\/span>x<span style='color:#806030; '>;<\/span>\n    <span style='color:#806030; '>}<\/span>\n<span style='color:#806030; '>&lt;<\/span><span style='color:#806030; '>\/<\/span>script<span style='color:#806030; '>><\/span>\n\n<span style='color:#806030; '>&lt;<\/span><span style='color:#806030; '>\/<\/span>head<span style='color:#806030; '>><\/span>\n\n<span style='color:#806030; '>&lt;<\/span>body <span style='color:#806030; '>><\/span>\n<span style='color:#806030; '>&lt;<\/span>div id<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>kineticDiv<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>><\/span><span style='color:#806030; '>&lt;<\/span><span style='color:#806030; '>\/<\/span>div<span style='color:#806030; '>><\/span>\n<span style='color:#806030; '>&lt;<\/span>canvas id<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>canvas1<\/span><span style='color:#800000; '>\"<\/span> height<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>300<\/span><span style='color:#800000; '>\"<\/span> width<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>400<\/span><span style='color:#800000; '>\"<\/span> style<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>border-style:solid;border-color:#DDD<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>><\/span><span style='color:#806030; '>&lt;<\/span><span style='color:#806030; '>\/<\/span>canvas<span style='color:#806030; '>><\/span><span style='color:#806030; '>&lt;<\/span>br<span style='color:#806030; '>><\/span>\n<span style='color:#806030; '>&lt;<\/span>input id<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>startBtn<\/span><span style='color:#800000; '>\"<\/span> type<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>button<\/span><span style='color:#800000; '>\"<\/span> value<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>Start<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>><\/span> <span style='color:#806030; '>&lt;<\/span>br<span style='color:#806030; '>><\/span>\n<span style='color:#806030; '>&lt;<\/span>div id<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>scoreDiv<\/span><span style='color:#800000; '>\"<\/span> style<span style='color:#806030; '>=<\/span><span style='color:#800000; '>\"<\/span><span style='color:#e60000; '>background-color:#AAA;<\/span><span style='color:#ffffff; background:#dd0000; font-weight:bold; font-style:italic; '> <\/span><span style='color:#e60000; '><\/span>\n<span style='color:#e60000; '>&#xa0;&#xa0;&#xa0;&#xa0;font-size:larger;border-color:#000<\/span><span style='color:#ffffff; background:#dd0000; font-weight:bold; font-style:italic; '>;<\/span><span style='color:#e60000; '><\/span>\n<span style='color:#e60000; '>&#xa0;&#xa0;&#xa0;&#xa0;border-style:outset;display:none;max-width:400px<\/span><span style='color:#800000; '>\"<\/span><span style='color:#806030; '>><\/span><span style='color:#806030; '>&lt;<\/span><span style='color:#806030; '>\/<\/span>div<span style='color:#806030; '>><\/span>\n<span style='color:#806030; '>&lt;<\/span><span style='color:#806030; '>\/<\/span>body<span style='color:#806030; '>><\/span>\n<span style='color:#806030; '>&lt;<\/span><span style='color:#806030; '>\/<\/span>html<span style='color:#806030; '>><\/span>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>My son is having summer vacation and he wanted to learn animation and create games. He had learnt Flash and ActionScript a couple of years back. So he started developing a game in Flash. However he ran into few issues and sought my help. Since I don&#8217;t know Flash, I could not help him much. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/ramkulkarni.com\/blog\/a-simple-html5-game\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;A Simple HTML5 Game&#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":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[19,10,1],"tags":[18,11],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-3i","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/204"}],"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=204"}],"version-history":[{"count":1,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/204\/revisions"}],"predecessor-version":[{"id":1968,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/204\/revisions\/1968"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=204"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}