//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