API tools faq
paste
Guest User

Untitled

a guest
Apr 24th, 2018
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui">
  6. <title>Emoji Rampage</title>
  7. <style type="text/css">
  8. * {
  9. -webkit-box-sizing: border-box;
  10. box-sizing: border-box;
  11. margin: 0;
  12. padding: 0;
  13. }
  14. html,body {
  15. width:100%;
  16. height: 100%;
  17. position: absolute;
  18. background: black;
  19. }
  20. div,nav {
  21. -webkit-user-select: none;
  22. -moz-user-select: none;
  23. -ms-user-select: none;
  24. -o-user-select: none;
  25. user-select: none;
  26. cursor: default;
  27. }
  28. div, aside, nav, label, .label {
  29. display: block;
  30. width: 100%;
  31. height: 100%;
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. }
  36. input,input[type=button] {
  37. display: inline-block;
  38. padding: .5em;
  39. position: relative;
  40. z-index: 100;
  41. font-size: 14pt;
  42. }
  43. i {
  44. font-style: normal;
  45. display: block;
  46. width: calc(100%/16);
  47. height: calc(100%/16);
  48. float: left;
  49. font-size:1em;
  50. text-align: center;
  51. line-height: 170%;
  52. }
  53. /* View Styles */
  54. #menu.name {
  55. background: green;
  56. text-align: center;
  57. padding: 30% 0 0;
  58. }
  59. #menu.title {
  60. background: grey;
  61. text-align: center;
  62. padding: 30% 0 0;
  63. }
  64. #menu.pause {
  65. background: rgba(0,0,0,.5);
  66. text-align: center;
  67. color: white;
  68. padding: 20% 0 0;
  69. }
  70. #menu.pause input {
  71. display: block;
  72. margin: 10px auto;
  73. }
  74. /* HUD Styles */
  75. #hud {
  76. position: relative;
  77. font-size: 16pt;
  78. opacity: .7;
  79. }
  80. #health {
  81. position: absolute;
  82. top: 5px;
  83. left: 5px;
  84. color: mediumblue;
  85. }
  86. #score {
  87. position: absolute;
  88. top: 5px;
  89. right: 5px;
  90. color: white;
  91. }
  92. /* Direction Correction */
  93. [data-lean=left] {
  94. -webkit-transform: skewX(5deg);
  95. transform: skewX(5deg);
  96. }
  97. [data-lean=right] {
  98. -webkit-transform: skewX(-5deg);
  99. transform: skewX(-5deg);
  100. }
  101. [data-dir=left] {
  102. -moz-transform: scaleX(-1);
  103. -webkit-transform: scaleX(-1);
  104. transform: scaleX(-1);
  105. filter: FlipH;
  106. -ms-filter: "FlipH";
  107. }
  108. [data-dir=up] {
  109. -webkit-transform: rotate(-90deg);
  110. transform: rotate(-90deg);
  111. }
  112. [data-dir=down] {
  113. -webkit-transform: rotate(90deg);
  114. transform: rotate(90deg);
  115. }
  116. /* Touch Controls */
  117. #touch_controls {
  118. display: none;
  119. width: 100%;
  120. height: 150px;
  121. position: fixed;
  122. top: calc(100% - 150px);
  123. left: 0;
  124. padding: 15px;
  125. z-index: 0;
  126. }
  127. #touch_controls input {
  128. position: absolute;
  129. border-radius:100%;
  130. width: 50px;
  131. height: 50px;
  132. outline: none;
  133. }
  134. #keyup {
  135. top:5px;
  136. left:65px;
  137. }
  138. #keydown {
  139. bottom:5px;
  140. left:65px;
  141. }
  142. #keyleft {
  143. top:calc(50% - 25px);
  144. left:15px;
  145. }
  146. #keyright {
  147. top:calc(50% - 25px);
  148. left:115px;
  149. }
  150. #touch_controls #attack {
  151. width:100px;
  152. height:100px;
  153. top:calc(50% - 50px);
  154. right:15px;
  155. }
  156. #touch_controls #pause {
  157. right: 140px;
  158. bottom:10px;
  159. width:40px;
  160. height:40px;
  161. font-size:12pt;
  162. padding:0;
  163. }
  164. /* Responsive Resizing */
  165. @media (orientation: portrait) {
  166. body {
  167. width: 100vw;
  168. height: 100vw;
  169. top: 0;
  170. left: calc(50% - 50vw);
  171. }
  172. }
  173. @media (min-width:400px) and (orientation: portrait) { i{font-size:1em} }
  174. @media (min-width:500px) and (orientation: portrait) { i{font-size:1.25em} }
  175. @media (min-width:600px) and (orientation: portrait) { i{font-size:1.5em} }
  176. @media (min-width:700px) and (orientation: portrait) { i{font-size:2em} }
  177. @media (min-width:800px) and (orientation: portrait) { i{font-size:2.25em} }
  178. @media (min-width:900px) and (orientation: portrait) { i{font-size:2.5em} }
  179. @media (orientation: landscape) {
  180. body {
  181. width: 100vh;
  182. height: 100vh;
  183. top: calc(50% - 50vh);
  184. left: calc(50% - 50vh);
  185. }
  186. }
  187. @media (min-height:400px) and (orientation: landscape) { i{font-size:1em} }
  188. @media (min-height:500px) and (orientation: landscape) { i{font-size:1.25em} }
  189. @media (min-height:600px) and (orientation: landscape) { i{font-size:1.5em} }
  190. @media (min-height:700px) and (orientation: landscape) { i{font-size:2em} }
  191. @media (min-height:800px) and (orientation: landscape) { i{font-size:2.25em} }
  192. @media (min-height:900px) and (orientation: landscape) { i{font-size:2.5em} }
  193. </style>
  194. </head>
  195. <body>
  196. <div id=board></div>
  197. <div id=characters></div>
  198. <nav id=hud>
  199. <span id=health></span>
  200. <span id=score></span>
  201. </nav>
  202. <aside id=menu></aside>
  203. <!-- Menu Views -->
  204. <script id=clear type="text/html">
  205. </script>
  206. <script id=pause type="text/html">
  207. <h1>pause</h1>
  208. <input type=button value="Exit" onclick="pause();clearBoard('all');updateMenu('title')">
  209. <input type=button value="Regenerate" onclick="pause();clearBoard('all');updateMenu('clear');startGame()">
  210. <input type=button value="Return to Game" onclick="pause();updateMenu('clear')">
  211. </script>
  212. <script id=name type="text/html">
  213. <h1>Set Player Name</h1>
  214. <input id=playername type=text autofocus>
  215. <input type=submit onclick="player.name=playername.value;startGame()">
  216. <label for=playername></label>
  217. </script>
  218. <script id=title type="text/html">
  219. <h1>Emoji Rampage</h1>
  220. <p>Click Anywhere to start a new game</p>
  221. <br>
  222. <h4><strong>Controls</strong></h4>
  223. <p>Use the <kbd>arrow</kbd> keys to <em>move</em></p>
  224. <p>Use the <kbd>space</kbd> key to <em>attack</em></p>
  225. <p>Use the <kbd>escape</kbd> key to <em>pause</em></p>
  226. <span class=label onclick=startGame()></span>
  227. </script>
  228. <!-- Touch Controls -->
  229. <nav id=touch_controls>
  230. <input type=button id=keyleft value="←" onclick="move('left',1)">
  231. <input type=button id=keyup value="↑" onclick="move('up',1)">
  232. <input type=button id=keydown value="↓" onclick="move('down',1)">
  233. <input type=button id=keyright value="→" onclick="move('right',1)">
  234. <input type=button id=attack value="Attack" onclick="attack()">
  235. <input type=button id=pause value="Ⅱ" onclick="pause()">
  236. </nav>
  237. <script type="text/javascript">
  238. var player = {
  239. name: '',
  240. character: '😃',
  241. score: 0,
  242. health: 3,
  243. position: '',
  244. direction: 'down'
  245. },
  246. tiles = [ // name : css color : collide
  247. ['dirt','sienna','',false],
  248. ['grass','forestgreen','',false],
  249. ['turf','green','',false],
  250. ['gravel','dimgray','',false],
  251. ['hole','black','',true]
  252. ],
  253. items = [ // name : character : css color : hp : score : movement : damage: probability
  254. ['cactus','🌵','limegreen',1,0,0,0,0],
  255. ['mushroom','🍄','saddlebrown',1,0,0,0,0],
  256. ['plant','🌿','darkgreen',1,0,0,0,0],
  257. ['croc','🐊','greenyellow',3,15,1,2,50],
  258. ['ant','🐜','firebrick',2,5,2,1,20],
  259. ['snake','🐍','yellowgreen',2,10,0,1,10]
  260. ],
  261. board = document.getElementById('board'),
  262. menu = document.getElementById('menu'),
  263. characters = document.getElementById('characters'),
  264. boardTiles = [],
  265. boardItems = [],
  266. session = false;
  267. // Game functions
  268. function startGame() {
  269. if (player.name == ''){
  270. updateMenu('name');
  271. } else {
  272. player.health = 3;
  273. player.score = 0;
  274. generateBoard();
  275. updateMenu('clear');
  276. }
  277. }
  278. onload = function(){updateMenu('title');spawnBoost();spawnBeast()}
  279. // View related functions
  280. function clearBoard(scope) {
  281. if(scope == 'all') {
  282. boardTiles = [];
  283. boardItems = [];
  284. }
  285. for(i=0;i<256;i++){
  286. board.removeChild(board.firstChild);
  287. characters.removeChild(characters.firstChild);
  288. }
  289. }
  290. function generateBoard() {
  291. for(i=0;i<256;i++){
  292. boardTiles.push(Math.round(Math.random()*4));
  293. }
  294. spawnPlayer();
  295. for(i=0;i<256;i++){
  296. if(i == player.position){
  297. boardItems.push('player');
  298. } else {
  299. if(Math.random() > .9) {
  300. var random = Math.round(Math.random()*2);
  301. if (tiles[boardTiles[i]][3] == false) {
  302. boardItems.push(random + '_' + items[random][3]);
  303. } else {
  304. boardItems.push(undefined);
  305. }
  306. } else {
  307. boardItems.push(undefined);
  308. }
  309. }
  310. }
  311. session = true;
  312. updateBoard();
  313. }
  314. function updateBoard() {
  315. for (i=0;i<boardTiles.length;i++){
  316. var tile = document.createElement('i');
  317. tile.style.background = tiles[boardTiles[i]][1];
  318. tile.innerHTML = tiles[boardTiles[i]][2];
  319. board.appendChild(tile);
  320. }
  321. for (i=0;i<boardItems.length;i++){
  322. var tile = document.createElement('i');
  323. if ((boardItems[i] != 'player') && (boardItems[i] != 'boost') && (boardItems[i] != undefined)) {
  324. tile.innerHTML = items[boardItems[i].split('_')[0]][1];
  325. tile.setAttribute('data-beast',boardItems[i].split('_')[0]);
  326. tile.setAttribute('data-hp',boardItems[i].split('_')[1]);
  327. tile.style.color = items[boardItems[i].split('_')[0]][2];
  328. } else if (boardItems[i] == 'boost') {
  329. tile.innerHTML = '🍕';
  330. tile.style.color = 'orange';
  331. }
  332. if(i == player.position){
  333. tile.innerHTML = player.character;
  334. tile.style.color = 'gold';
  335. tile.setAttribute('data-lean',player.direction);
  336. }
  337. characters.appendChild(tile);
  338. }
  339. updateHud();
  340. }
  341. function spawnBoost() {
  342. if(session == true) {
  343. var pick = Math.round(Math.random()*256);
  344. if ((boardItems[pick] == undefined) && (tiles[boardTiles[pick]][3] == false)) {
  345. boardItems[pick] = 'boost';
  346. clearBoard();
  347. updateBoard();
  348. }
  349. }
  350. setTimeout(function(){spawnBoost()},(Math.round(Math.random()*15000)+15000))
  351. }
  352. function spawnBeast() {
  353. if(session == true) {
  354. var pick = Math.round(Math.random()*256),
  355. random = Math.round(Math.random()*2)+3;
  356. if ((boardItems[pick] == undefined) && (tiles[boardTiles[pick]][3] == false)) {
  357. boardItems[pick] = random + '_' + items[random][3];
  358. clearBoard();
  359. updateBoard();
  360. }
  361. }
  362. setTimeout(function(){spawnBeast()},(Math.round(Math.random()*1000)+2500))
  363. }
  364. function updateMenu(view) {
  365. menu.innerHTML = document.getElementById(view).innerHTML;
  366. menu.setAttribute('class',view);
  367. }
  368. function updateHud() {
  369. var hp = '';
  370. for(i=0;i<player.health;i++){
  371. hp = hp + '💙';
  372. }
  373. document.getElementById('health').innerHTML = hp;
  374. document.getElementById('score').innerHTML = player.name + ': ' + player.score;
  375. }
  376. // Player related functions
  377. function spawnPlayer() {
  378. player.position = Math.round(Math.random()*256);
  379. if (tiles[boardTiles[player.position]][3] == true) {
  380. spawnPlayer();
  381. }
  382. }
  383. function move(dir,step){
  384. var attempt = '';
  385. player.direction = dir;
  386. if (dir == 'up') {
  387. attempt = player.position - (16*step);
  388. }
  389. if (dir == 'right') {
  390. attempt = player.position + (1*step);
  391. }
  392. if (dir == 'down') {
  393. attempt = player.position + (16*step);
  394. }
  395. if (dir == 'left') {
  396. attempt = player.position - (1*step);
  397. }
  398. if (attempt < 0) {
  399. attempt = attempt + 256;
  400. }
  401. if (attempt > 256) {
  402. attempt = attempt - 256;
  403. }
  404. if ((tiles[boardTiles[attempt]][3] == false) && (boardItems[attempt] == undefined) || (boardItems[attempt] == 'player') || (boardItems[attempt] == 'boost')) {
  405. player.position = attempt;
  406. }
  407. if (boardItems[attempt] == 'boost') {
  408. if (player.health <= 4) {
  409. player.health = player.health + 1;
  410. }
  411. boardItems[attempt] = undefined;
  412. }
  413. clearBoard();
  414. updateBoard();
  415. }
  416. function attack(){
  417. if (player.direction == 'up') {
  418. attempt = player.position - (16);
  419. }
  420. if (player.direction == 'right') {
  421. attempt = player.position + (1);
  422. }
  423. if (player.direction == 'down') {
  424. attempt = player.position + (16);
  425. }
  426. if (player.direction == 'left') {
  427. attempt = player.position - (1);
  428. }
  429. if ((attempt >= 0) && (attempt <=256)) {
  430. if ((boardItems[attempt] != 'player') && (boardItems[attempt] != undefined) && (boardItems[attempt] != 'boost')) {
  431. health = (document.querySelectorAll('#characters i')[attempt].getAttribute('data-hp') - 1);
  432. if (health >= 1) {
  433. boardItems[attempt] = (boardItems[attempt].split('_')[0] +'_'+ health);
  434. } else {
  435. player.score = player.score + items[boardItems[attempt].split('_')[0]][4];
  436. boardItems[attempt] = undefined;
  437. }
  438. }
  439. document.querySelectorAll('#characters i')[attempt].innerHTML = '🔪';
  440. document.querySelectorAll('#characters i')[attempt].style.color = 'white';
  441. document.querySelectorAll('[data-lean]')[0].innerHTML = '😆';
  442. document.querySelectorAll('#characters i')[attempt].setAttribute('data-dir',player.direction);
  443. setTimeout(function(){
  444. clearBoard();
  445. updateBoard();
  446. },250)
  447. }
  448. }
  449. function run() {
  450. var beasts = document.querySelectorAll('[data-beast]');
  451. for(i=0;i<beasts.length;i++){
  452. var dir = Math.round(Math.random()*3)+1,
  453. speed = items[beasts[i].getAttribute('data-beast')][6],
  454. damage = items[beasts[i].getAttribute('data-beast')][7],
  455. probability = items[beasts[i].getAttribute('data-beast')][8];
  456. beasts[i].setAttribute('data-dir',dir);
  457. }
  458. }
  459. function animate() {
  460. }
  461. function die() {
  462. session = false;
  463. updateMenu('title');
  464. }
  465. function pause() {
  466. if(session==true){
  467. session=false
  468. } else {
  469. session=true
  470. };
  471. if(menu.className != 'pause'){
  472. updateMenu('pause')} else {updateMenu('clear')
  473. }
  474. }
  475. // Keyboard Controls
  476. if(('ontouchstart' in window)||(navigator.msMaxTouchPoints>0)){
  477. document.getElementById('touch_controls').style.display = 'block';
  478. }
  479. document.onkeydown = function(e) { e = e || window.event;
  480. var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
  481. if (charCode == 38) {move('up',1)}
  482. if (charCode == 39) {move('right',1)}
  483. if (charCode == 40) {move('down',1)}
  484. if (charCode == 37) {move('left',1)}
  485. if (charCode == 32) {attack()}
  486. if (charCode == 27) {pause()}
  487. }
  488. </script>
  489. </body>
  490. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!