//The spirte sheet used in this example is the sunny land forest sheet by Ansimuz.
//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:relative;width:640px;height:320px;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,0,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 = [];
var coinsCollected = 0;
var starAnimation;//CanvasAnimation
function Platformer() {
//an example quick platformer using a sprite sheet.
//the sprite sheet used in this example is Sunny Land Forest by Ansimuz.
//You can get it from opengameart.org.
var gameSpecs = {
gWidth:2000, gHeight:320,cameraWidth:640, cameraHeight:320,
cameraFollowOffsetX:-320, cameraFollowOffsetY:0, tileW:16, tileH:16,
spriteSheetImage: "sunnyLandSheet.png", containerDivId:"container", rootDivId:"root",
controllerDivId:"controller", gameScale:1.5, useScreenOrganizer:true,startWidth:150, startHeight:32,
controllerHeight:144, initialLives:3, initPlayerPosition:new tabageos.MoverPoint(32,32), startLocations:new tabageos.MoverPoint(128*2,256-48),
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:"#c8c8c800",afterSceneChange:this.sceneChanged
};
tabageos.EventDispatcher.call(this);//for dispatchFunctionAssignments.
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);
Object.assign(Platformer.prototype, tabageos.EventDispatcher.prototype);
Platformer.prototype.setup = function(sax,say) {
this.lives = 3;
//this time we copy the title screen from the sprit sheet, and stretch it to fit.
this.title.floor.copyPixels(this._image,new tabageos.Rectangle(352,784,288,192), new tabageos.MoverPoint(),640,320);
this.startButton.innerHTML = " ";
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.
var drw = 0;//this time we draw onto the backgroundLayer.
for(drw;drw < 2000;drw+=384) {
this.backgroundLayer.copyPixels(this._image,new tabageos.Rectangle(352,512,384,240), new tabageos.MoverPoint(drw,0), 384, 320);
}
drw = 0;//and draw onto the gameOverContainer.floor which is like its background.
for(drw;drw < 640;drw+=384) {
this.gameOverContainer.floor.copyPixels(this._image,new tabageos.Rectangle(352,512,384,240), new tabageos.MoverPoint(drw,0), 384, 320);
}
//to give animation to the player we use the CanvasAnimation Class. CanvasAnimation is not a CanvasObject its just a class with methods for animating onto a given CanvasObject.
var playerAnimation = new tabageos.CanvasAnimation(this._image, this.charLayer,null,0,0,16,16);
playerAnimation.animationSpecs = {
"left":[3, [8,3,8,3,8,3,8,3,7,3,7,3,7,3,7,3,6,3,6,3,6,3,6,3,5,3,5,3,5,3,5,3,4,3,4,3,4,3,4,3,3,3,3,3,3,3,3,3,2,3,2,3,2,3,2,3,1,3,1,3,1,3,1,3] ],
"right":[1, [1,1,1,1,1,1,1,1,2,1,2,1,2,1,2,1,3,1,3,1,3,1,3,1,4,1,4,1,4,1,4,1,5,1,5,1,5,1,5,1,6,1,6,1,6,1,6,1,7,1,7,1,7,1,7,1,8,1,8,1,8,1,8,1] ],
"upleft":[12, [8,12,8,12,8,12,8,12,7,12,7,12,7,12,7,12,6,12,6,12,6,12,6,12,5,12,5,12,5,12,5,12] ],
"upright":[12, [1,12,1,12,1,12,1,12,2,12,2,12,2,12,2,12,3,12,3,12,3,12,3,12,4,12,4,12,4,12,4,12] ],
"downleft":[11, [5,11,5,11,5,11,5,11,6,11,6,11,6,11,6,11,7,11,7,11,7,11,7,11,8,11,8,11,8,11,8,11] ],
"downright":[11, [1,11,1,11,1,11,1,11,2,11,2,11,2,11,2,11,3,11,3,11,3,11,3,11,4,11,4,11,4,11,4,11] ],
"up":[12, [8,12,8,12,8,12,8,12] ],
"down":[11, [8,11,8,11,8,11,8,11] ],
"upidle":[12, [8,12,8,12,8,12,8,12] ],
"downidle":[11, [8,11,8,11,8,11,8,11] ],
"idle":[5, [1,5,1,5,1,5,1,5,2,5,2,5,2,5,2,5,3,5,3,5,3,5,3,5,4,5,4,5,4,5,4,5,5,5,5,5,5,5,5,5,6,5,6,5,6,5,6,5,7,5,7,5,7,5,7,5,9,5,9,5,9,5,9,5] ],
"rightidle":[5, [1,5,1,5,1,5,1,5,2,5,2,5,2,5,2,5,3,5,3,5,3,5,3,5,4,5,4,5,4,5,4,5,5,5,5,5,5,5,5,5,6,5,6,5,6,5,6,5,7,5,7,5,7,5,7,5,9,5,9,5,9,5,9,5] ],
"leftidle":[7, [9,7,9,7,9,7,9,7,8,7,8,7,8,7,8,7,7,7,7,7,7,7,7,7,6,7,6,7,6,7,6,7,5,7,5,7,5,7,5,7,4,7,4,7,4,7,4,7,3,7,3,7,3,7,3,7,1,7,1,7,1,7,1,7] ]
};
//we are using the sprite sheet as is, as given by the artist.
//the character is laid out at 37x37 and the tiles at 16x16.
//and we will collide at 16x16, so we define the player width and height as 16.
//but to make it draw from the sprite sheet at 37x37 for the player.
//we define both Width/Height Offset to make it draw more.
//and XYOffset to make it draw from an offset position.
playerAnimation.fromWidthOffset = 21;
playerAnimation.fromHeightOffset = 21;
playerAnimation.fromXOffset = 21;
playerAnimation.fromYOffset = 21;
playerAnimation.currentAnimation = "right";
//and the only difference in the player set up is that we pass in the CanvasAnimation.
this.player = new tabageos.MapTraveler(48,48,16,16,map,playerAnimation,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;
//we've set it to autoAnimate which is going to call CanvasAnimation.changeDirectionAnimation for us.
//that method will change the animation based on how the player is moving.
//The default animation names that method uses are what we used in the animationSpecs.
//if we miss one, errors happen because .changeDirectionAnimation would be trying to set the animation to one not defined.
//so it's important to define all the above animations if your going to use _autoAnimate.
//using the animation objet maker its easy to define many animations directly from placed art.
//no need for these color values anymore, we are going to draw from the sprite sheet.
//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);//we are letting the sceneChanger manage the enemies.
//this is for cross scene enemy mangament. the top down rpg example is the best to see the TileSceneChanger in more use.
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];//
//what we do in placeScenery will be somewhat different.
//but also this time we've extended tabageos.EventDispatcher using Object.assign.
//dispatchFunctionAssignments needs an EventDispatcher and in the squares example we passed in this.screenOrganizer.
//this.screenOrganizer is what makes the iris transition and is an EventDispatcher.
//but when using it, then inside of placeScenery we dont have 'this' to use anymore.
//in, this, case we will have 'this' to use because this Class, our Platformer Class is now aslo a EventDispatcher.
tabageos.BlitMath.dispatchFunctionAssignments(this, "placeScenery", this,map, 16, 16);
//to keep the map arrays as they are and use them to draw from a spirte sheet, we are going to use the BlitMath.patternBlit method.
//it lets us define how to get the index based on the tile value given.
//first we are going to define two methods that will return the correct index to draw from based on the integers in the map.
var xIndex = function(num) {
var r = 0;
if(num === 1) r = 56;//you can get these indexes using the array maker found in the fromArtToCode section of this site.
if(num === 7) r = 57;//load a tile sheet, set the tile width and height, click on a tile you want to know the y,x index for.
if(num === 13) r = 32;//and place that tile in the top left of the grid, the hit 'specific' and what you'll see is an array of the y,x index values.
return r;//these index multipled by the tile width and height give the exact position of each tile in the sprite sheet.
};
//if we wanted we could just use 'specific' style arrays in the first place and the specificPatternBlit method that expects those kinds of arrays.
//but i wanted to use the same arrays from the squares version so you could easily see the similaraties.
var yIndex = function(num) {
var r = 0;
if(num === 1) r = 15;
if(num === 7) r = 14;
if(num === 13) r = 25;
return r;
};
//instead of using drawSquaresFromPattern we are going to use patternBlit to blit from the sprite sheet.
//a lot of comments, but really not a lot of code changes.
tabageos.BlitMath._specs = new tabageos.BlitSpecs(16,16);//BlitMath._specs is already defined as this, just showing that this is where BlitMath gets width and height for each one of its calls.
//notice that the character is 37x37 yet we are still doing everything at 16x16, seldum do you actually need more.
tabageos.BlitMath.patternBlit(this.display, this._image,map,xIndex,yIndex);
var pLax = new tabageos.CanvasObject(null,2000,320);//offscreen layer.
drw = 0;
for(drw;drw < 2000;drw+=192) {//we draw the parallax section repeatedly to fill the 2000 width.
pLax.copyPixels(this._image,new tabageos.Rectangle(400,144,192,240), new tabageos.MoverPoint(drw,0),192,320);
}
this.camera.addParallaxLayer(pLax);//we add it to the camera as another layer, a parallax layer, it thereby knows to render it under the background, and slower.
//there can only be 2 parallax layers, and 5 normal camera layers.
};
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 "+coinsCollected,0,100,15);
this.callCamera();
};
Platformer.prototype.beforeScene = function(scene) {
enemies = this.changeSceneEnemies(scene);//enemies now references a different array.
coins.length = 0;
this.hideScoreText();
};
Platformer.prototype.underCover = function() {
this.moveForwardOneScene();
//by default moveForwardOneScene is using either specificPatternBlit or drawSquaresFromPattern.
//so we have to call patternBlit again to actually draw the next scene because integer maps do not work with specificPatternBlit.
//if we use specifc style [y,x] tile vlaues instead of integers and specificPatternBlit we dont have to create extra methods.
//and we would not have to call this here again.
var xIndex = function(num) {
var r = 0;
if(num === 1) r = 56;
if(num === 7) r = 57;
if(num === 13) r = 32;
return r;//these methods can get heafty when you have a lot of values; specificPatternBlit is really handy and solves all the problems.
};//nevertheless this is an example of keeping integer style 'lighter' map arrays.
//if you were going to really do it this way, these functions should be on the prototype as well.
var yIndex = function(num) {
var r = 0;
if(num === 1) r = 15;
if(num === 7) r = 14;
if(num === 13) r = 25;
return r;
};
tabageos.BlitMath.patternBlit(this.display, this._image,this.sceneChanger.currentMap,xIndex,yIndex);
//but BlitMath as well as most classes are set up such that you could create your own systems, not having to use GameSkeleton.
this.hideText();
};
Platformer.prototype.toNextLevel = function(ts) {
//this time we'll show an animation.
var cy = 0;//bounce tween down the 'sunnyland' words.
//i've not touched the sprite sheet, i've left it as is from the artist, otherwise we could pre draw all kinds of other stuff on it for whatever we want during in between levels and game over.
if(this._helperPoint.y === -9999) {
coins.length = 0;
this._helperPoint.x = 320-112; this._helperPoint.y = 0;
tabageos.TweenMath.tweenArray(-50,160-25, 3000,"OutBounce",0,coins);//a powerful class. coins is now populated with the numbers that make up a 3 second bounce tween from -50 to 158.
//We can apply those numbers to whatever we want to tween it. In this case we are tweening a copyPixels call.
}
if(coins.length) { cy = coins.shift();//we use the first value out of the tween array. shift removes the first value.
this._helperPoint.x = 320-112; this._helperPoint.y = cy;
this._helperRect.x = 384; this._helperRect.y = 816; this._helperRect.width = 224; this._helperRect.height = 50;
this.cameraLayer.context.clearRect(0,0,640,320);
this.cameraLayer.copyPixels(this._image,this._helperRect,this._helperPoint);//using _helper is better than make a 'new' Objects.
} else {
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.player._map[e.tileYIndex][e.tileXIndex] = 0;
//this time we'll animate each coin, they'll be spinning stars.
if (e.tileValue == 8) {
this.sceneChanger.currentMap[e.tileYIndex][e.tileXIndex] = 0;
starAnimation = new tabageos.CanvasAnimation(this._image,this.charLayer,null,0,0,16,16);
starAnimation.animationSpecs = {"spin":[2, [24,2,24,2,24,2,24,2,25,2,25,2,25,2,25,2,26,2,26,2,26,2,26,2,27,2,27,2,27,2,27,2,28,2,28,2,28,2,28,2,29,2,29,2,29,2,29,2] ]};
starAnimation.currentAnimation = "spin";
starAnimation.x = e.x; starAnimation.y = e.y;
coins.push(starAnimation);
}
//and each enemy will be a snail animation.
if(e.tileValue == 13) {
var enemyAnimation = new tabageos.CanvasAnimation(this._image,this.charLayer,null,e.x,e.y,16,16);
enemyAnimation.animationSpecs = {
"left":[25, [32,25,32,25,32,25,32,25,34,25,34,25,34,25,34,25,36,25,36,25,36,25,36,25,38,25,38,25,38,25,38,25] ],
"right":[28, [38,28,38,28,38,28,38,28,36,28,36,28,36,28,36,28,34,28,34,28,34,28,34,28,32,28,32,28,32,28,32,28] ]
};
enemyAnimation.currentAnimation = "right";
enemyAnimation.fromWidthOffset = 16;
enemyAnimation.fromHeightOffset = 16;
var en = new tabageos.MapTraveler(e.tileXIndex*16,e.tileYIndex*16,16,16,this.sceneChanger.currentMap,enemyAnimation,0,0,16,16);
en._autoAnimate = 1;
en._jumps = 1;
en._map = this.player._map;
en.health = 10;
en.maxSpeed = 2;
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 "+coinsCollected,0,100,15);
}
var i = 0;var obj;
for(i;i<coins.length;i++) { //this is how we will handle coins now, and this is the only added difference in the loop method.
obj = coins[i];
obj.animate();
obj.blit();
if(tabageos.GeometricMath.testForPointInCircle(this.player._pos, 16, obj.getPosition())) {
coinsCollected += 1;
this.showScoreText(" Lives " + this.lives + " <br> Coins "+coinsCollected,0,100,15);
tabageos.GeometricMath.splice(coins, coins.indexOf(obj));
}
}
i = 0;
for(i;i<enemies.length;i++) {//enemy loop is exactly the same.
obj = enemies[i];
//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);
//we no longer check for coin tiles.
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._helperPoint.y = -9999;
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