Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

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>