Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

index.html 2.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  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. font-size: 1.1em;
  24. padding: 10px;
  25. border-radius: 5px;
  26. color: #ccc;
  27. background-color: #333;
  28. border: 2px solid #222;
  29. }
  30. .view button:hover {
  31. background-color: #343434;
  32. border-color: #555;
  33. }
  34. .view.pre.current,
  35. .view.game-over.current {
  36. position: absolute;
  37. max-width: 900px;
  38. margin: auto;
  39. line-height: 1.5;
  40. top: 50%;
  41. left: 50%;
  42. -webkit-transform: translate(-50%, -50%);
  43. -moz-transform: translate(-50%, -50%);
  44. -ms-transform: translate(-50%, -50%);
  45. -o-transform: translate(-50%, -50%);
  46. transform: translate(-50%, -50%);
  47. }
  48. .view.game-over.current {
  49. color: #bb5545;
  50. text-align: center;
  51. }
  52. x-script {
  53. display: none;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div class="view pre">
  59. <p>Umbreosyl. Once a peaceful paradise, your home planet is now shredded by the mighty blow of The Deathers and their powerful Death Moon.</p>
  60. <p>Umbreosylians are a fickle race. At the first sign of danger, of course, everyone you knew flew away to migrate to a safe place. Except you. You overslept, missed the ships, and are now abandoned.</p>
  61. <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 planet encounter you from behind, and ships from The Deathers from ahead.</p>
  62. <button id="startGameBtn">Start</button>
  63. </div>
  64. <div class="view game">
  65. <canvas id="canvas">Your browser is bad and you should feel bad.</canvas>
  66. </div>
  67. <div class="view game-over">
  68. <h1>Game over.</h1>
  69. <button id="restartGameBtn">Restart</button>
  70. </div>
  71. <script src="conf.js"></script>
  72. <script src="js/view.js"></script>
  73. <script src="node_modules/socksugar/client.js"></script>
  74. <script src="bundle.js"></script>
  75. <script>
  76. view("pre");
  77. </script>
  78. </body>
  79. </html>