API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 15th, 2019
133
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.73 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head></head>
  3. <body>
  4. <div id="marioField" style="position: relative;">
  5. <label id="score" style="position: absolute; top: 0px; left: 800px; font-size: 24px;">Score : 0</label>
  6. <img style="position: absolute; top: 200px;" id="mario" width="50" height="50" src="mario.jpg" />
  7.  
  8. <img style="position: absolute; top: 50px; left: 800px;" class="coin" width="30" height="30" src="coin.gif" />
  9. <img style="position: absolute; top: 75px; left: 600px;" class="coin" width="30" height="30" src="coin.gif" />
  10. <img style="position: absolute; top: 75px; left: 400px;" class="coin" width="30" height="30" src="coin.gif" />
  11. <img style="position: absolute; top: 100px; left: 1000px;" class="coin" width="30" height="30" src="coin.gif" />
  12. <img style="position: absolute; top: 100px; left: 1200px;" class="coin" width="30" height="30" src="coin.gif" />
  13. <img style="position: absolute; top: 90px; left: 800px;" class="coin" width="30" height="30" src="coin.gif" />
  14. <img style="position: absolute; top: 130px; left: 800px;" class="coin" width="30" height="30" src="coin.gif" />
  15. <img style="position: absolute; top: 170px; left: 800px;" class="coin" width="30" height="30" src="coin.gif" />
  16. <img style="position: absolute; top: 150px; left: 900px;" class="coin" width="30" height="30" src="coin.gif" />
  17. <img style="position: absolute; top: 150px; left: 700px;" class="coin" width="30" height="30" src="coin.gif" />
  18. <img style="position: absolute; top: 150px; left: 600px;" class="coin" width="30" height="30" src="coin.gif" />
  19.  
  20. <img style="position: absolute; top: 200px; left: 800px;" class="enemy" width="60" height="50" src="enemy.png" title="3" />
  21. <img style="position: absolute; top: 200px; left: 300px;" class="enemy" width="60" height="50" src="enemy.png" title="3" />
  22. <img style="position: absolute; top: 200px; left: 100px;" class="enemy" width="60" height="50" src="enemy.png" title="3" />
  23. <img style="position: absolute; top: 200px; left: 1500px;" class="enemy" width="60" height="50" src="enemy.png" title="3" />
  24. </div>
  25. <script type="text/javascript">
  26. //---- PlayGround -----
  27. var onAir = false;
  28. var running = false;
  29. var av = 5;
  30. var inertia = 10;
  31. var speed = 0;
  32. var vspeed = 0;
  33. var maxSpeed = 10;
  34. var left = 0;
  35. var gravity = 2;
  36. var score = 0;
  37. function Update() {
  38. if (running || onAir) {
  39. if (speed > maxSpeed) {
  40. speed = maxSpeed;
  41. }
  42. else if (speed < -maxSpeed) {
  43. speed = -maxSpeed;
  44. }
  45. }
  46. else {
  47. if (speed > 0.15)
  48. {
  49. speed -= inertia;
  50. }
  51. else if (speed < -0.15)
  52. {
  53. speed += inertia;
  54. }
  55. else
  56. {
  57. speed = 0;
  58. }
  59. }
  60. var fall = parseFloat($("#mario").css("top"));
  61. if (onAir) {
  62. vspeed += gravity;
  63.  
  64. if (vspeed > 20) {
  65. vspeed = 20;
  66. }
  67.  
  68. fall = vspeed + parseFloat($("#mario").css("top"));
  69. }
  70.  
  71.  
  72. if (parseFloat($("#mario").css("top")) > 200) {
  73. $("#mario").css({ top: 200 });
  74. if (onAir) {
  75. vspeed = 0;
  76. onAir = false;
  77. }
  78. } else {
  79. $("#mario").css({ top: fall });
  80. }
  81.  
  82. $("#mario").css({ left: left += speed });
  83.  
  84. if (parseFloat($("#mario").css("left")) < 0) {
  85. $("#mario").css({ left: 10 });
  86. running = false;
  87. } else if (parseFloat($("#mario").css("left")) + parseFloat($("#mario").css("width")) > window.screen.width) {
  88. $("#mario").css({ left: window.screen.width - parseFloat($("#mario").css("width") - 10) });
  89. running = false;
  90. }
  91.  
  92. var py = parseFloat($("#mario").css("top"));
  93. var px = parseFloat($("#mario").css("left"));
  94. var pw = parseFloat($("#mario").prop("width"));
  95. var ph = parseFloat($("#mario").prop("height"));
  96.  
  97.  
  98. FireBallShot();
  99. CoinPickup(py, px, pw, ph);
  100. EnemyMove();
  101. EnemyEngage(py,px,pw,ph);
  102.  
  103. }
  104.  
  105. function FireBallShot() {
  106. $(".fireball").each(function () {
  107. $(this).css({ left: parseFloat($(this).css("left")) + 10 });
  108. var y = parseFloat($(this).css("top"));
  109. var x = parseFloat($(this).css("left"));
  110. var w = parseFloat($(this).prop("width"));
  111. var h = parseFloat($(this).prop("height"));
  112. if (EnemyEngage(y, x, w, h)) {
  113. $(this).remove();
  114. }
  115.  
  116. if (parseFloat($(this).css("left")) > window.screen.width) {
  117. $(this).remove();
  118. }
  119. });
  120. }
  121.  
  122. function EnemyMove() {
  123. $(".enemy").each(function () {
  124. if (parseFloat($(this).css("left")) < 0) {
  125. $(this).prop("title", 3);
  126. } else if (parseFloat($(this).css("left")) > window.screen.width - parseFloat($(this).css("width"))) {
  127. $(this).prop("title", -3);
  128. }
  129. $(this).css({ left: parseFloat($(this).css("left")) + parseFloat($(this).prop("title")) });
  130. });
  131. }
  132.  
  133. function EnemyEngage(py,px,pw,ph) {
  134. $(".enemy").each(function () {
  135. var y = parseFloat($(this).css("top"));
  136. var x = parseFloat($(this).css("left"));
  137. var w = parseFloat($(this).prop("width"));
  138. var h = parseFloat($(this).prop("height"));
  139.  
  140. if (py < (y + h) && (py + ph) > y && px < (x + w) && (px + pw) > x) {
  141. if ((py+ph) > (y + (w * 0.5))) {
  142. $("#score").text("Game Over");
  143. $("#mario").remove();
  144. } else {
  145. score++;
  146. $("#score").text("Score : " + score);
  147. $(this).remove();
  148. return true;
  149. }
  150. }
  151.  
  152. });
  153. return false;
  154. }
  155.  
  156. function CoinPickup(py,px,pw,ph) {
  157. $(".coin").each(function () {
  158. var y = parseFloat($(this).css("top"));
  159. var x = parseFloat($(this).css("left"));
  160. var w = parseFloat($(this).prop("width"));
  161. var h = parseFloat($(this).prop("height"));
  162.  
  163. if (py < (y + h) && (py + ph) > y && px < (x + w) && (px + pw) > x) {
  164. score++;
  165. $("#score").text("Score : " + score);
  166. $(this).remove();
  167. }
  168. });
  169. }
  170.  
  171. function SpawnEnemy() {
  172. var left = Math.floor(Math.random() * window.screen.width) + 400;
  173. var element = '<img style="position:absolute; top:200px; left:'+left+'px;" class="enemy" width="60" height="50" src="enemy.png" title="3"/>';
  174. $('#marioField').append(element);
  175. }
  176.  
  177. function SpawnCoin() {
  178. var left = Math.floor(Math.random() * window.screen.width);
  179. var top = Math.floor(Math.random() * 200);
  180. var element = '<img style="position:absolute; top:' + top + 'px; left:' + left + 'px;" class="coin" width="30" height="30" src="coin.gif" />';
  181. $('#marioField').append(element);
  182. }
  183.  
  184. function SpawnFireball() {
  185. var py = parseFloat($("#mario").css("top"));
  186. var px = parseFloat($("#mario").css("left"));
  187.  
  188. var element = '<img style="position:absolute; top:' + py + 'px; left:' + px + 'px;" class="fireball" width="30" height="30" src="fireball.png" />';
  189. $('#marioField').append(element);
  190. }
  191.  
  192. document.addEventListener('keypress', (e) => {
  193. if (e.code == "KeyA") speed -= av;
  194. else if (e.code == "KeyD") speed += av;
  195. running = true;
  196. });
  197.  
  198. document.addEventListener('keyup', (e) => {
  199. if (e.code == "KeyW" && !onAir) {
  200. vspeed = -30;
  201. onAir = true;
  202. console.log(onAir + " jump");
  203. }
  204. running = false;
  205. });
  206.  
  207. document.addEventListener('keydown', (e) => {
  208. if (e.code == "KeyE" && $('#mario') != null) {
  209. SpawnFireball();
  210. }
  211. });
  212.  
  213. setInterval(Update, 10);
  214. setInterval(SpawnEnemy, 7200);
  215. setInterval(SpawnCoin, 3600);
  216. </script>
  217. </body>
  218. </html>
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!