You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 2.5KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <title>GameJam Game</title>
  7. <style>
  8. body {
  9. margin: 0px;
  10. padding: 0px;
  11. background-color: #000;
  12. color: #ccc;
  13. overflow: hidden;
  14. }
  15. .view {
  16. display: none;
  17. }
  18. .view.current {
  19. display: block;
  20. width: 100%;
  21. }
  22. .view button,
  23. .view input {
  24. font-size: 1.1em;
  25. padding: 10px;
  26. border-radius: 5px;
  27. color: #ccc;
  28. background-color: #333;
  29. border: 2px solid #222;
  30. }
  31. .view button:hover {
  32. background-color: #343434;
  33. border-color: #555;
  34. }
  35. .view.pre.current,
  36. .view.game-over.current {
  37. position: absolute;
  38. max-width: 900px;
  39. margin: auto;
  40. line-height: 1.5;
  41. top: 50%;
  42. left: 50%;
  43. -webkit-transform: translate(-50%, -50%);
  44. -moz-transform: translate(-50%, -50%);
  45. -ms-transform: translate(-50%, -50%);
  46. -o-transform: translate(-50%, -50%);
  47. transform: translate(-50%, -50%);
  48. }
  49. .view.game-over.current {
  50. color: #bb5545;
  51. text-align: center;
  52. }
  53. x-script {
  54. display: none;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <div class="view pre">
  60. <p>Umbreosyl. Once a peaceful paradise, your home planet is now shredded by the mighty blow of The Deathers and their powerful planet destroyer, the Death Moon.</p>
  61. <p>Umbreosylians are a cowardly race. At the first sign of danger, everyone you knew flew away to migrate to a safe place. Except you. You overslept, missed the ships, and are now abandoned.</p>
  62. <p>You barely managed to enter your ship, lift off, and get to a somewhat safe distance from the planet, before The Deathers destroyed Umbreosyl. You're currently sitting in your space ship, blood boiling, watching the debris from your beloved home fade away in the distance behind you. You brace yourself, prepared to face The Deathers.</p>
  63. <form id="startForm">
  64. <input id="playerName" placeholder="Name"></input>
  65. <button type="submit" id="startGameBtn">Start</button>
  66. </form>
  67. </div>
  68. <div class="view game">
  69. <canvas id="canvas">Your browser is bad and you should feel bad.</canvas>
  70. </div>
  71. <div class="view game-over">
  72. <h1>Game over.</h1>
  73. <button id="storyBtn">Back</button>
  74. <button id="restartGameBtn">Restart</button>
  75. </div>
  76. <script src="conf.js"></script>
  77. <script src="js/view.js"></script>
  78. <script src="node_modules/socksugar/client.js"></script>
  79. <script src="bundle.js"></script>
  80. <script>
  81. view("pre");
  82. </script>
  83. </body>
  84. </html>