//The html setup is as follows.
        <html>
            <head>
                <title>Title</title>
                <script type="text/javascript" src="tbgs_min.js"></script>
                <script type="text/javascript" src="ControllerPad.js"></script>
                <link rel="stylesheet" href="ControllerPad.css" />
                <!-- you can get the above files from releases  -->
            </head>
            <body>
                <div id="container" style="position:absolute;width:640px;top:0px;margin:0px">
                    <div id="root" style="position:relative;width:640px;height:320px;top:0px;left:0px;"> </div>
                    <div id="controller" > </div>
                </div>
            </body>
            <script type="text/javascript">
                    //...code....
            </script>
        </html>
		
		
	//The code.

	(function() {
		

		var map = [  
[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,1,1,1],
[1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,8,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,13,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,0,0,0,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,1,1,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,8,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,8,0,0,0,0,0,0,0,0,8,8,8,0,0,0,0,8,8,8,8,8,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,8,8,8,8,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,8,8,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,0,1,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,8,8,8,8,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,1,1,1,1,0,0,0,8,8,8,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,0,0,0,8,8,8,8,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,7,0,0,1],
[1,0,0,1,0,0,0,8,8,8,8,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,8,8,8,0,0,0,8,8,8,8,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,8,8,8,8,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,8,8,8,1,1,0,8,8,8,8,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,0,13,0,0,8,8,8,8,0,0,0,0,1,1,0,0,0,13,0,0,0,13,0,0,0,0,13,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,13,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,13,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,13,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
  ];
		var map2 = [  
[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,1,1,1,1],
[1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,32,32,32,32,32,32,32,32,32,32,0,0,0,0,0,0,0,0,32,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,8,0,32,32,32,32,32,0,0,0,0,0,0,0,32,32,32,32,32,32,32,32,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,0,8,8,8,8,32,32,32,32,32,32,32,0,0,32,32,32,32,32,32,32,32,32,32,32,32,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,32,0,32,32,32,0,0,32,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,8,8,1,1,1,1,0,0,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,32,32,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,32,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,1,0,0,8,32,32,32,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,8,8,32,0,0,0,0,0,0,0,0,0,0,0,32,32,0,0,0,0,0,0,0,0,32,0,0,0,0,32,0,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,32,32,32,32,32,0,8,0,0,0,8,8,8,8,8,1],
[1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1,32,32,32,32,32,32,0,0,0,32,32,32,32,32,32,32,0,32,32,32,32,32,32,32,32,0,0,0,0,1,1,1,1,1,32,32,32,32,32,32,32,0,0,0,0,32,32,32,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,32,32,0,0,0,0,32,32,32,32,32,32,32,32,32,32,32,32,32,0,1,0,0,8,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,13,1,1,1,32,32,32,32,32,32,32,8,32,0,0,0,0,8,8,8,8,0,0,32,8,32,32,0,8,0,0,0,8,0,32,32,32,32,32,32,32,32,32,32,32,0,0,0,0,0,0,0,32,0,32,32,0,0,0,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,0,32,32,0,0,0,0,0,0,0,32,32,32,32,0,0,32,32,32,0,0,0,0,0,1,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,32,32,32,32,32,32,1,32,0,0,0,0,1,1,1,1,32,32,32,1,0,32,32,1,32,32,32,1,32,32,0,0,0,0,0,0,32,32,0,0,0,0,0,0,0,0,32,0,0,0,0,32,32,32,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,0,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,0,8,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,32,32,8,32,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,32,32,32,0,0,0,0,32,32,32,32,32,32,32,32,32,0,0,0,0,0,0,32,32,0,0,32,32,32,32,32,32,32,32,32,32,32,0,0,0,32,0,0,0,0,0,0,0,0,0,0,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,32,0,1,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,32,8,32,0,0,0,0,0,0,8,1,1,1,1,1,1,0,0,0,0,1,0,0,32,32,32,32,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,32,32,32,32,0,0,1,0,0,0,32,0,32,32,32,32,32,32,32,32,0,0,0,0,0,0,0,0,0,0,0,32,32,0,0,0,32,0,0,0,0,0,0,32,0,0,0,32,32,32,32,32,32,32,32,32,32,32,32,0,0,32,32,32,8,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,1,32,32,32,32,32,32,8,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,32,32,0,0,0,0,0,13,0,0,0,0,0,0,0,0,0,0,32,32,0,1,8,1,0,0,0,32,32,32,32,32,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,32,32,32,32,32,32,32,0,0,32,32,32,32,0,0,0,32,32,13,32,32,32,32,32,32,32,32,0,0,8,0,32,32,32,0,0,0,0,0,0,0,0,7,0,0,1],
[1,0,0,32,0,0,32,32,32,32,32,32,8,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,32,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,0,0,0,32,32,32,32,32,32,0,0,0,0,0,0,0,0,0,0,0,0,0,32,32,0,32,32,32,32,32,32,32,32,32,32,32,32,0,0,32,1,1,1,1,1,32,32,32,32,32,32,32,32,0,0,32,32,1,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,8,0,0,8,8,8,8,8,8,8,1,1,1,1,1,1,1,1,1,8,0,0,0,0,0,0,0,8,8,8,8,8,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,8,1,1,1,32,32,32,8,8,8,8,8,8,8,8,8,8,8,8,8,0,0,32,32,32,32,0,0,32,32,32,32,32,32,32,32,32,32,32,32,32,0,0,1,1,1,1,1,1,1,32,32,32,32,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,0,32,8,8,8,8,8,8,1,1,1,1,1,1,1,1,1,1,8,8,32,13,32,32,32,8,1,8,8,8,8,1,1,1,1,1,1,1,1,1,1,1,1,8,8,8,8,1,1,1,1,1,0,0,0,13,0,0,0,13,0,0,0,0,13,0,0,0,32,13,32,0,0,0,13,32,32,32,13,32,32,13,32,32,32,32,32,32,32,0,1,1,1,1,1,1,1,1,1,32,32,32,32,0,0,0,0,0,0,0,0,0,0,13,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
  ];
		
		var map3 = [  
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,0,0,0,0,0,8,8,8,0,0,0,8,8,0,0,0,8,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7,0,0,1],
[1,8,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,8,0,13,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,1,0,0,0,1,1,8,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1],
[1,1,1,1,1,0,0,0,0,0,0,0,8,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,1,0,0,0,1,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1],
[1,8,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1],
[1,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,8,0,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,8,8,8,1],
[1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,8,8,8,1],
[1,8,0,0,0,0,0,0,0,0,0,0,0,0,0,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,0,0,8,8,8,1],
[1,8,0,0,0,1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,8,8,8,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,8,8,8,1],
[1,8,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,8,8,8,8,8,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,13,1,1,1,1,0,1,0,0,0,0,8,8,8,1],
[1,8,0,0,1,0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0,0,0,0,0,0,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,8,8,8,8,8,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,8,8,8,1],
[1,8,0,0,0,0,0,0,0,0,1,0,0,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,8,8,8,8,8,8,8,8,8,1,1,0,0,0,0,0,0,0,0,1,8,8,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,0,0,0,8,8,8,1],
[1,8,13,0,13,0,0,13,0,0,0,0,1,1,1,1,1,0,0,13,0,0,0,0,1,1,0,0,1,1,0,0,13,0,0,13,0,0,13,0,0,13,0,0,0,1,1,8,8,8,8,8,8,8,8,8,1,1,0,0,0,0,0,0,0,0,1,8,8,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,13,0,0,13,0,0,13,0,0,0,1,1,1,1,1,1,1,13,13,13,13,13,13,13,8,8,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
  ];
		
		var enemies = [];
		var level = 1;
		var coins = 0;

		function Platformer() {
			//an example quick platformer using just squares.
			//to see an example of a game skinned with a sprite sheet see the dog fight space shooter example.
			var gameSpecs = { 
				gWidth:2000, gHeight:320,cameraWidth:640, cameraHeight:320, 
				cameraFollowOffsetX:-320, cameraFollowOffsetY:0,  tileW:16, tileH:16, 
				spriteSheetImage: null, containerDivId:"container", rootDivId:"root",
				controllerDivId:"controller", gameScale:1.5, hudScale:3, useScreenOrganizer:true,startWidth:50, startHeight:25,
				controllerHeight:144, initialLives:3, initPlayerPosition:new tabageos.MoverPoint(32,32), 
				gameLoop:this.loop,initializationSpecifics:this.setup, disableBackgroundAlpha:0,
				addedResizeMethod:null, priorToSceneChange:this.beforeScene, sceneChangeSpecifics:this.placeScenery,sceneResetSpecifics:null,fullResetSpecifics:null, additionalSceneResetSpecifics:null, 
				positionResetSpecifics:this.positionReset, underCoverSpecifics:this.underCover, cameraType:1, backgroundColor:"#c8c8c8",afterSceneChange:this.sceneChanged 
			};

			tabageos.GameSkeleton.call(this,  gameSpecs);

			this.establishKeyEventsForReset();
		}
		
		Platformer.constructor = Platformer;
		//JavaScript basic inheritance, the tabageos library also includes an implementation of Object.assign if Object.assign is not already defined in the browser.
		Platformer.prototype = Object.create(tabageos.GameSkeleton.prototype);
		
		Platformer.prototype.setup = function(sax,say) {
			this.lives = 3;
			
			this.title.floor.context.fillStyle = "#ffffff";
			this.title.floor.context.fillRect(0,0,2000,320);
			
			this.camera.v.width = 640;//because by default camera.v.width is set to half the game width, in this case 800 and not 1280 is the game width.
			this.tweenLimitX = 1360;//also because we are using an uneven with the camera, 2000 - 640.
			//if the game width was 1280 we would not need to mess with these, but its an example of customizing the game width and camera operations.
			
			this.player = new tabageos.MapTraveler(48,48,16,16,map,0,0);
			this.player._jumps = 1;//gravity is now applied to the character, by default it does not move with gravity, ._jumps is 0 by default for MapMovers.
			this.player._jumpSpeed = 4;//default _jumpSpeed is 4
			this.player._gravityLevel = .245;//.285 is the default _gravityLevel.
			this.player._autoAnimate = 1;//will animate during move calls.
			this.player._directCanvasObject = this.charLayer;//wen autoAnimate and this is set it will draw a square for the player.
			this.player.health = 100;
			//these are properties inherited from GameSkeleton.
			//this.resizeRootForNoTouch = 1; //when no touch, resize just the root instead of the whole container, root should be inside container, and controller should be under root also inside container.
			//resizeRootForNoTouch is for when your game is not fullscreen/page.
            
			//camera.colorValues will be used during drawSquaresFromPattern to draw the scene.
			//i used the array maker to make the arrays. Since 32 is not in colorValues it does not get drawn.
			this.camera.colorValues = {1:"#010101",0:"#c8c8c8", 7:"#c8c800", 8:"#FFFF00"};
			
			//we add our own div to the gameOverContainer.
			var goDiv = document.createElement("div");
			goDiv.setAttribute("style", "position:absolute;font-family: 'soupoj', sans-serif;width:640px;color:black;text-align:center");
			goDiv.innerHTML = "<h2>Game Over</h2><br /><br /><br /><span style='cursor:pointer' onclick='tabageos.GameSkeleton.game.hudExit()'>Press Start</span>";
			this.gameOverContainer.div.appendChild(goDiv);
			
			
			enemies = this.changeSceneEnemies(1);
			
			this.sceneChanger.addScene(map);
			this.sceneChanger.addScene(map2);
			this.sceneChanger.addScene(map3);
			this.sceneChanger.changeCurrentMap(1);
			
			//when the values in functionAssignments are found in the map will be dispatched by dispatchFunctionAssignments to placeScenery as PatternActionEvents.
			tabageos.BlitMath.functionAssignments = [13,8,32];//
			tabageos.BlitMath.dispatchFunctionAssignments(this.screenOrganizer, "placeScenery", this,map, 16, 16);
			
			tabageos.BlitMath.drawSquaresFromPattern(this.display,map,16,16,this.camera.colorValues);
			
		};
		Platformer.prototype.positionReset = function() {
			
			this.player.setX(64);
			this.player.setY(32);
			this.camera.v.x = 0;
			this.camera.v.y = 0;
			this.showScoreText(" Lives " + this.lives + " <br> Coins "+coins,0,100,15);
			this.callCamera();
			
		};
		Platformer.prototype.beforeScene = function(scene) {
			enemies = this.changeSceneEnemies(scene);
			this.hideScoreText();
		};
		Platformer.prototype.underCover = function() {
			this.moveForwardOneScene();
			this.hideText();
		};
		Platformer.prototype.toNextLevel = function(ts) {
			
			if(!this.textShown) {
				this.showText("Level Complete", 5000,24,640,320,0,0,'soupj','#6495ed');
			}
			if(this.textFinished()) { 
				this.endLevelComplete(0);
			}
		};
		Platformer.prototype.ending = function(ts) {
			if(!this.textShown) {
				this.showText("Game Complete 
 Thanks for playing", 7000,14,250,175,100,(640/2) - 125);
			}
		};
		Platformer.prototype.placeScenery = function(e) {
			//this method is happening from an event, so 'this' in here referes to that event dispatcher.
			//so we reference the game intsance via the GameSkeleton.game property.
			tabageos.GameSkeleton.game.player._map[e.tileYIndex][e.tileXIndex] = 0;
			if(e.tileValue == 13) {
				
				var en = new tabageos.MapTraveler(e.tileXIndex*16,e.tileYIndex*16,16,16,tabageos.GameSkeleton.game.sceneChanger.currentMap,0,0,0,16,16);
				en._autoAnimate = 1;
				en._directCanvasObject = tabageos.GameSkeleton.game.charLayer;
				en._jumps = 1;
				en._map = tabageos.GameSkeleton.game.player._map;
				en.health = 10;
				enemies.push(en);
			}

		};
		
		Platformer.prototype.loop = function() { 
		
			//move and collide with the map.
			this.charLayer.context.fillStyle = "#6495ed";//for the player use blue, move is also animating the player.
			this.player.move(this.controller.buttons.left , this.controller.buttons.right,this.controller.buttons.up || this.controller.buttons.a,this.controller.buttons.down);
			
			if(!this.scoreTextIsDisplayed) {
				
				this.showScoreText(" Lives " + this.lives + " <br> Coins "+coins,0,100,15);
			}
			
			var i = 0;var obj;
			for(i;i<enemies.length;i++) {
				
				obj = enemies[i];
				this.charLayer.context.fillStyle = "#d77c05";
				//an enemy routine that chases the player when they see it, and the optional params cause it to not go down off of platforms.
				tabageos.GameSkeleton.seeAndChaseRoutine(obj,enemies,this.player,this._helperPoint,128,0,48,obj._map,16,16);
				
				//jump on enemy.
				if( this.player._state == 3 && this.player.y + this.player.height >= obj.y && this.player.y < obj.y && this.player.x >= obj.x - 8 && this.player.x <= obj.x + obj.width+8 ) {
					
					this.player._grounded = 0;
                    this.player._veloc.y = -9;this.player._state = 3; 
					enemies.splice(enemies.indexOf(obj), 1);
				//else get hurt by enemy.
				} else if ( tabageos.GeometricMath.rectanglesOverlapAmount(obj.getRectangle(), this.player.getRectangle() )/16 >= 2) {
					this.hideScoreText();
					this.gameOver();
				}
			}
			//if the player falls off screen.
			if(this.player.y > 320) {
				this.hideScoreText();
				this.gameOver();
			}
			//tile checks.
			var tileRight=tabageos.BlitMath.checkTileValueAt(this.player.x+this.player.width+1,this.player.y,this.player._map,16,16);
			var tileLeft = tabageos.BlitMath.checkTileValueAt(this.player.x - 2,this.player.y,this.player._map,16,16);
			var tileAt = tabageos.BlitMath.checkTileValueAt(this.player.x+8,this.player.y+8,this.sceneChanger.currentMap,16,16, this._helperPoint);
			
			if( tileAt == 8 ) {//if the tile at where the player is, is a coin, collect it.
				coins += 1;
				this.sceneChanger.currentMap[this._helperPoint.y][this._helperPoint.x] = 0;
				this.display.context.clearRect(this._helperPoint.x * 16,this._helperPoint.y*16,16,16);
				this.showScoreText(" Lives " + this.lives + " <br> Coins "+coins,0,100,15);
			} 
			
			if((tileRight == 7 || tileLeft == 7 || tileAt == 7) && level != 3) { //if the player hits left or right of the exit block, complete the level.
				level += 1;this.hideScoreText();
				this.levelComplete(this.toNextLevel);
				return;
			} else if((tileRight == 7 || tileLeft == 7 || tileAt == 7)  && level == 3) {
				this.hideScoreText();
				this.gameComplete(this.ending);
			}
			
		};
		
		new Platformer();

	})();







back to top