API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 3rd, 2015
197
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.63 KB | None | 0 0
raw download clone embed print report
  1. <div id="gameWrapper">
  2. <div id="canvasWrapper">
  3. <canvas id="canvas">You're browser does not support the canvas tag. Go and get a real browser, nub</canvas>
  4. </div>
  5. <div id="redSelector" class="selector">
  6. <div data-mob = "zombieObj" class="genericButton" id="zombieRedWrap"><img class="IMGMobs" id="zombieRed" src="IMG/zombieRed.png"ondragstart="return false;"></div>
  7. <div data-mob = "skeletonObj" class="genericButton" id="skeletonRedWrap"><img class="IMGMobs" id="skeletonRed" src="IMG/skeletonRed.png"ondragstart="return false;"></div>
  8. <div data-mob = "creeperObj" class="genericButton" id="creeperRedWrap"><img class="IMGMobs" id="creeperRed" src="IMG/creeperRed.png"ondragstart="return false;"></div>
  9. <div data-mob = "steveObj" class="genericButton" id="steveRedWrap"><img class="IMGMobs" id="steveRed" src="IMG/steveRed.png"ondragstart="return false;"></div>
  10. <div data-mob = "endermanObj" class="genericButton" id="endermanRedWrap"><img class="IMGMobs" id="endermanRed" src="IMG/endermanRed.png"ondragstart="return false;"></div>
  11. <div data-mob = "herobrineObj" class="genericButton" id="herobrineRedWrap"><img class="IMGMobs" id="herobrineRed" src="IMG/herobrineRed.png"ondragstart="return false;"></div>
  12. <div data-mob = "ghastObj" class="genericButton" id="ghastRedWrap"><img class="IMGMobs" id="ghastRed" src="IMG/ghastRed.png"ondragstart="return false;"></div>
  13. <div data-mob = "magmacubeObj" class="genericButton" id="magmacubeRedWrap"><img class="IMGMobs" id="magmacubeRed" src="IMG/magmacubeRed.png"ondragstart="return false;"></div>
  14. <div class="genericButton">Derp</div>
  15. </div>
  16. <div id="blueSelector" class="selector">
  17. <div data-mob = "zombieObj" class="genericButton" id="zombieBlueWrap"><img class="IMGMobs" id="zombieBlue" src="IMG/zombieBlue.png"ondragstart="return false;"></div>
  18. <div data-mob = "skeletonObj" class="genericButton" id="skeletonBlueWrap"><img class="IMGMobs" id="skeletonBlue" src="IMG/skeletonBlue.png"ondragstart="return false;"></div>
  19. <div data-mob = "creeperObj" class="genericButton" id="creeperBlueWrap"><img class="IMGMobs" id="creeperBlue" src="IMG/creeperBlue.png"ondragstart="return false;"></div>
  20. <div data-mob = "steveObj" class="genericButton" id="steveBlueWrap"><img class="IMGMobs" id="steveBlue" src="IMG/steveBlue.png"ondragstart="return false;"></div>
  21. <div data-mob = "endermanObj" class="genericButton" id="endermanBlueWrap"><img class="IMGMobs" id="endermanBlue" src="IMG/endermanBlue.png"ondragstart="return false;"></div>
  22. <div data-mob = "herobrineObj" class="genericButton" id="herobrineBlueWrap"><img class="IMGMobs" id="herobrineBlue" src="IMG/herobrineBlue.png"ondragstart="return false;"></div>
  23. <div data-mob = "ghastObj" class="genericButton" id="ghastBlueWrap"><img class="IMGMobs" id="ghastBlue" src="IMG/ghastBlue.png"ondragstart="return false;"></div>
  24. <div data-mob = "magmacubeObj" class="genericButton" id="magmacubeBlueWrap"><img class="IMGMobs" id="magmacubeBlue" src="IMG/magmacubeBlue.png"ondragstart="return false;"></div>
  25. <div class="genericButton">Derp</div>
  26. </div>
  27. <div id="mobPopUpred" class="mobPopUp"></div>
  28. <div id="mobPopUpblue" class="mobPopUp"></div>
  29. </div>
  30.  
  31.  
  32.  
  33. <div id="options">
  34.  
  35. <div class="lineContainer">
  36. <div class="heading" id="Options-heading">Insert Title Here</div>
  37. </div>
  38. <div class="lineContainer">
  39. <div class="text" id="Options-info">Welcome to Insert Title Here. This game is a strategic game with an scaled up
  40. rock paper scissors concept. To beat you're opponent, You must select certain
  41. mobs that do good against you're opponents mobs. You can also make combinations
  42. of mobs to destroy you're opponents base but you must take into consideration
  43. the prices. better mobs require more money and take up more population.</div>
  44. </div>
  45. <div class="lineContainer">
  46. <div id="Restart" class="options-button">Restart</div>
  47. <div id="Exit" class="options-button">Exit</div>
  48. <div id="Play" class="options-button">Play</div>
  49. </div>
  50. <div class="lineContainer">
  51. <div id="Credits" class="options-button">Credits</div>
  52. <div id="Support" class="options-button">Contact</div>
  53. <div id="Controls" class="options-button">Controls</div>
  54. <div id="gameOptions" class="options-button">Options</div>
  55. </div>
  56. <div class="lineContainer">
  57. <div id="CreditsInfo" class="options-tab">Made entirely by _____ Carr</div>
  58. <div id="SupportInfo" class = "options-tab">Please tell me what you think and how I could improve. (Link)</div>
  59. <div id="ControlsInfo" class="options-tab">A-D to move player 1 scrollbar. J-L to move player 2 scrollbar You can also click on the mobs to select them. Right click over mob to see their stats. Press O to pause.</div>
  60. <div id="OptionsInfo" class="options-tab">Set FPS (max 60) <input id="setFPS">
  61. <div id="FPSMaxSubmit" class="smallButton">Current FPS: </div>
  62. Toggle Fps Counter
  63. <div id="FPSCounterToggle" class="smallButton">ON</div>
  64. </div>
  65. </div>
  66. </div>
  67.  
  68. html {
  69. overflow: -moz-scrollbars-horizontal;
  70. overflow-x: scroll;
  71. -webkit-user-select: none;
  72. -moz-user-select: none;
  73. zoom:0.5;
  74. -moz-transform: scale(0.5);
  75. -moz-transform-origin: 0 0;
  76. }
  77. html, body {
  78. width: 100%;
  79. height: 100%;
  80. margin: 0px;
  81. background-color: rgb(50, 100, 50);
  82. }
  83.  
  84. #Options-info{
  85. font-size: 24px;
  86. display: inline-block;
  87. background-color: rgb(255, 153, 0);
  88. border: 2px solid black;
  89. padding: 5px 5px;
  90. margin: 5px;
  91. width: 675px;
  92. line-height: 125%;
  93.  
  94. }
  95.  
  96.  
  97. .genericButton{
  98. display: inline-block;
  99. background-color: green;
  100. width: 112px;
  101. height: 72px;
  102. margin: 8px;
  103. border: 2px solid black;
  104. text-align: center;
  105. white-space: nowrap;
  106. }
  107. .IMGMobs{
  108. display: inline-block;
  109. height: 100%;
  110. vertical-align: middle;
  111. }
  112.  
  113. #options{
  114. overflow: auto;
  115. position: fixed;
  116. top: 0;
  117. bottom: 0;
  118. left: 0;
  119. right: 0;
  120. width: 80%;
  121. height: 80%;
  122. border: 10px solid black;
  123. background-color: rgb(200, 200, 200);
  124. margin: auto;
  125. text-align: center;
  126. }
  127.  
  128. .options-button {
  129. display: inline-block;
  130. padding: 25px 25px;
  131. font-size: 48px;
  132. background-color: rgb(255, 153, 0);
  133. margin: 5px;
  134. width: 200px;
  135. cursor: pointer;
  136. border: 2px solid black;
  137.  
  138. }
  139. .options-tab{
  140. display: none;
  141. padding: 15px 15px;
  142. font-size: 32px;
  143. width: 300px;
  144. border: 2px solid black;
  145. margin: 5px;
  146. background-color: rgb(0, 153, 255)
  147. }
  148. .options-button:hover {
  149. background-color: rgb(155, 103, 0)
  150. }
  151. .options-button:active{
  152. position: relative;
  153. top: 1;
  154. }
  155.  
  156. .heading{
  157. font-size: 108px;
  158. display: inline-block;
  159. padding: 25px 25px;
  160. background-color: rgb(255, 153, 0);
  161. margin: 5px;
  162. border: 2px solid black;
  163. }
  164. .lineContainer{
  165.  
  166. }
  167. #setFPS{
  168. width: 40px;
  169. }
  170. #optionsInfo{
  171. position: relative;
  172. top: -7px
  173. }
  174. .smallButton{
  175. color: lime;
  176. background-color: white;
  177. border: 2px solid black;
  178. padding: 5px 5px;
  179. margin-top: 5px;
  180. }
  181. .smallButton:hover {
  182. background-color: grey;
  183. cursor: pointer;
  184. }
  185. .smallButton:active{
  186. position: relative;
  187. top: 1;
  188. }
  189. #FPSCounterToggle{
  190. color: lime;
  191. }
  192. .mobPopUp{
  193. position: absolute;
  194. width: 500px;
  195. height: 200px;
  196. border: 5px solid black;
  197. left: 500px;
  198. text-align: justify;
  199. font-size: 24px;
  200. font-weight: 900px;
  201. color: lime;
  202. text-shadow: 3px 3px black;
  203. }
  204. #mobPopUpBlue{
  205. display: none;
  206. bottom: 0px;
  207. background-color: blue;
  208. }
  209. #mobPopUpRed{
  210. display: none;
  211. top: 0px;
  212. background-color: red;
  213. }
  214. #gameWrapper{
  215. position: relative;
  216. top: calc(50% - 650px);
  217. top: moz-calc(50% - 650px); // Does this help?
  218. }
  219. #canvasWrapper{
  220. position: aboslute;
  221. }
  222. #canvas{
  223. border: 10px solid black;
  224. }
  225. .selector{
  226. position: absolute;
  227. width: 1500px;
  228. height: 110px;
  229. border: 5px solid black;
  230. left: 1250px;
  231. }
  232. #redSelector{
  233. background-color: red;
  234. display: none;
  235. top: 0px;
  236. }
  237. #blueSelector{
  238. background-color: blue;
  239. display: none;
  240. bottom: 0px;
  241. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!