test.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <html>
  2. <head>
  3. <style>
  4. html,body {
  5. margin: 0px;
  6. padding: 0px;
  7. height: 100%;
  8. overflow-y: hidden;
  9. overflow-x: hidden;
  10. }
  11. .scribble-canvas {
  12. z-index: 500;
  13. position: absolute;
  14. left: 0px;
  15. top: 0px;
  16. }
  17. .canvas-layer {
  18. position: absolute;
  19. left: 0px;
  20. top: 0px;
  21. }
  22. #controls {
  23. position: fixed;
  24. top: 10px;
  25. left: 10px;
  26. z-index: 999;
  27. }
  28. #controls button {
  29. float: left;
  30. background-color: gray;
  31. }
  32. #controls button.active {
  33. background-color: orange;
  34. }
  35. .overlay {
  36. position:absolute;
  37. left: 0px;
  38. top: 0px;
  39. width: 1000px;
  40. height: 500px;
  41. z-index: 600;
  42. font-size: 50px;
  43. color: red;
  44. text-align: center;
  45. margin-top: 200px;
  46. }
  47. </style>
  48. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  49. <script>
  50. // some initialization code
  51. Systems = {};
  52. Entities = {};
  53. images = [];
  54. </script>
  55. <script src="util.js"></script>
  56. <!-- <script src="behaviortree.js"></script> -->
  57. <script src="systems/movement.js"></script>
  58. <script src="systems/collisions.js"></script>
  59. <script src="systems/rendering.js"></script>
  60. <script src="systems/hud.js"></script>
  61. <script src="systems/ai.js"></script>
  62. <script src="game.js"></script>
  63. <script src="entities/people.js"></script>
  64. <script src="entities/buildings.js"></script>
  65. <script src="entities/organizations.js"></script>
  66. <script src="sp.js"></script>
  67. <script src="paths.js"></script>
  68. <script src="map.js"></script>
  69. <script src="mapgen.js"></script>
  70. <script src="lb.js"></script>
  71. <script>
  72. var clayers = [];
  73. $(function() {
  74. game = new Game();
  75. $('.canvas-layer').each(function() {
  76. clayers.push(this);
  77. });
  78. $(window).resize(resizeGame);
  79. resizeGame();
  80. $('.again').click(function(e) {
  81. e.preventDefault();
  82. $('.overlay').hide();
  83. game.loadLevel();
  84. game.loop();
  85. });
  86. });
  87. function resizeGame() {
  88. var w = $(window).width();
  89. var h = $(window).height();
  90. for(var i = 0; i < clayers.length; i++) {
  91. clayers[i].width = w;
  92. clayers[i].height = h;
  93. }
  94. // var m = new Map();
  95. // m.render();
  96. //
  97. }
  98. </script>
  99. </head>
  100. <body>
  101. <canvas width="300" height="300" id="tex-canvas" z-index="100" class="canvas-layer"></canvas>
  102. <canvas width="300" height="300" id="fixture-canvas" z-index="110" class="canvas-layer"></canvas>
  103. <canvas width="300" height="300" id="entity-canvas" z-index="200" class="canvas-layer"></canvas>
  104. <canvas width="300" height="300" id="hud-canvas" z-index="300" class="canvas-layer"></canvas>
  105. <div class="menu inventory" style="display:block">
  106. </div>
  107. <div class="overlay intro" style="display:none">
  108. Get ready to squeeze!
  109. <br>
  110. <button class="again">Play!</button>
  111. </div>
  112. </body>