API tools faq
paste
Advertisement
Guest User

Vincent

a guest
Oct 18th, 2019
144
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.12 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2.  
  3. <!-- Copyright Davis Zetlan,
  4. October 17-2019 -->
  5. <html>
  6.  
  7. <head>
  8. <title>Protein Parsing</title>
  9.  
  10. <style>
  11. #canvas {
  12. margin: auto;
  13. border-style: double;
  14. border-color: slateblue;
  15. display: block;
  16.  
  17. }
  18. </style>
  19.  
  20.  
  21. <script type="text/javascript">
  22. window.addEventListener("keydown", keyPress, false);
  23.  
  24. //I store all my global variables at the start of my code so I know where to find them
  25. var canvas;
  26. var ctx;
  27. var timer;
  28.  
  29. var backgroundColor = "#FFFF88";
  30. var blobColor = "#008800";
  31. var blueColor = "#AAAAFF";
  32. var boxColor = "#8888FF";
  33. var textColor = "#222266";
  34. var receiverColor = "#33FF33";
  35. var select1Color = "#FF8800";
  36. var select2Color = "#FF8888";
  37. var font = "Times New Roman"
  38. var gamePhase = -1;
  39.  
  40. var posit = [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50];
  41. var phase = [00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00];
  42. var prob = 1999.9;
  43.  
  44. var maxConnectors = posit.length;
  45. var initNumOfConnectors = 3;
  46. var numOfConnectors = 3;
  47. var numOfReceivers = 3;
  48. var hasSelected = 0;
  49.  
  50. var possibleSelections = ["§","Ω","≈","∞","•", "«", " ", "start - beginner", "how to play", "start - normal", "Welcome to Package Parsing!", "Ok", "Use the left and right arrow keys to navigate the menu,", "and the up arrow to select options."];
  51.  
  52. var explanText = ["Welcome to Package Parsing version 1.01!",
  53. "You run a package delivery service,",
  54. "and must deliver the packages that the nameless, faceless,",
  55. "limbless package carriers deliver to you.",
  56. " ",
  57. " If their trust with you drops below zero, you lose.",
  58. "Use the left and right arrow keys to switch which package slot",
  59. "you have selected. Press the down arrow key to highlight a package,",
  60. "and while a different package is selected, press z to swap them.",
  61. "Press up to send the selected package to the correct destination box.",
  62. "The box being sent to is indicated with the lines,",
  63. "and the correct packages for that box are labeled on the box.",
  64. " ",
  65. "Press up to go back."];
  66. var posSelectionDestns = [1, 1, 2, 2, 3, 3];
  67. var selectionsPerBin = 2;
  68. var selection = [7, 8, 9];
  69. var selectBuffer = 0;
  70. var select1 = 1;
  71. var select2 = 0;
  72. var timer = 10;
  73. var countdown = 100;
  74. var score = 5;
  75. var higheScore = 0;
  76. var framesRunning = 0;
  77. var menuFrames = 0;
  78. var howToPlay = 0;
  79.  
  80.  
  81. var centralWidth = 120;
  82. var centerX;
  83. var centerY;
  84.  
  85. var connectorDist;
  86. var connectorX;
  87. var connectorAngle;
  88.  
  89.  
  90. window.onload = setup;
  91.  
  92. //the initializing function.
  93. function setup() {
  94.  
  95. canvas = document.getElementById("canvas");
  96. ctx = canvas.getContext("2d");
  97. centerX = canvas.width / 2;
  98. centerY = canvas.height / 2;
  99. window.setInterval(draw, timer);
  100.  
  101. }
  102.  
  103. function keyPress(hn) {
  104. switch (hn.keyCode) {
  105. case 37:
  106. select1 = select1 - 1;
  107. break;
  108. case 38:
  109. parse(select1 - 1);
  110. select2 = 0;
  111. break;
  112. case 39:
  113. select1 = select1 + 1;
  114. break;
  115. case 40:
  116. select2 = select1;
  117. break;
  118. case 90:
  119. if (gamePhase > -1) {
  120. swap();
  121. }
  122. break;
  123. }
  124.  
  125. if (select1 > 3) {
  126. select1 = 1;
  127. }
  128. if (select1 < 1) {
  129. select1 = 3;
  130. }
  131.  
  132. }
  133. //this function swaps the two selected packages.
  134. function swap() {
  135. if (select2 != 0) {
  136. //this code always makes me slightly concerned that it won't work. It does because that's just how javascript works
  137. [selection[select1 - 1], selection[select2 - 1]] = [selection[select2 - 1], selection[select1 - 1]];
  138. }
  139. }
  140.  
  141. //this checks to see if the packages are in the right spots and adds score accordingly. This was extremely annoying to put in, because it was hard to keep track of what the code I was writing actually did.
  142. function parse(binNum) {
  143. if (gamePhase == 0 || gamePhase == 1) {
  144. if (Math.floor(selection[binNum] / 2) == binNum) {
  145. score = score + 1;
  146. selection[binNum] = 6;
  147. }
  148. } else {
  149. switch (selection[binNum]) {
  150. case 7:
  151. gamePhase = 0;
  152. menuFrames = 0;
  153. selection[0] = 6;
  154. selection[1] = 6;
  155. selection[2] = 6;
  156. break;
  157. case 8:
  158. howToPlay = 1;
  159. menuFrames = 0;
  160. selection[0] = 6;
  161. selection[1] = 11;
  162. selection[2] = 6;
  163. break;
  164. case 9:
  165. gamePhase = 1;
  166. menuFrames = 0;
  167. score = 15;
  168. prob = 999.9;
  169. selection[0] = 6;
  170. selection[1] = 6;
  171. selection[2] = 6;
  172. break;
  173. case 11:
  174. reset();
  175. break;
  176. }
  177. }
  178. }
  179.  
  180. function receive() {
  181. //I skipped m because it looked similar to n
  182. var n = 0;
  183. var o = 0;
  184. var p = Math.floor(Math.random() * 2.9);
  185.  
  186. while (n <= 2) {
  187. if (selection[p] == 6) {
  188. selection[p] = Math.floor(Math.random() * 5.9);
  189. n = n + 1000;
  190. o = 1;
  191. }
  192. n = n + 1;
  193. p = p + 1;
  194. if (p > 2) {
  195. p = 0;
  196. }
  197. }
  198. if (o == 0) {
  199. if (gamePhase == 0) {
  200. score = score - 1;
  201. } else {
  202. score = score - 5;
  203. }
  204. }
  205. }
  206.  
  207. /*this function is the main function that repeats every time the timer goes off. It clears the screen and then draws everything. */
  208. function draw() {
  209. //the background
  210. ctx.clearRect(0, 0, canvas.width, canvas.height);
  211. ctx.fillStyle = backgroundColor;
  212. ctx.fillRect(0, 40, canvas.width, canvas.height);
  213. ctx.fillStyle = blueColor;
  214. ctx.fillRect(0, 0, canvas.width, 40);
  215. //after the background is drawn, it checks to see whether the game is in a menu state or a game state.
  216. //in a game state, the code below activates.
  217. if (gamePhase == 0 || gamePhase == 1) {
  218. //this is the code for the central blob
  219. ctx.fillStyle = blobColor;
  220. ctx.beginPath();
  221. ctx.ellipse(centerX, centerY, centralWidth, 60, Math.PI, 0, Math.PI * 4);
  222. ctx.fill();
  223.  
  224. //This part draws the various other interesting things to the screen. Connectors are drawn first so that they are the lowest when compared to other things needed.
  225. drawConnectors();
  226. drawSelectionBoxes();
  227. drawReceivers();
  228. //this function displays things like trust and time running.
  229. scoring();
  230. //keeping track of time, as well as changing the gamePhase.
  231. if (gamePhase == 1) {
  232. framesRunning = framesRunning + 1;
  233. }
  234. if (gamePhase == 0) {
  235. if (score >= 15) {
  236. gamePhase = 1;
  237. prob = 999.9;
  238. }
  239. }
  240. }
  241. //if the game is not in a game state, it will either be in an end state or a menu state, so an end state is checked for next.
  242. else if (gamePhase == 2) {
  243. scoring();
  244. }
  245. //the only other option is for the game to be in a menu state, so it draws menu things.
  246. else {
  247. ctx.fillStyle = boxColor;
  248. ctx.fillRect(0, 40, canvas.width, canvas.height);
  249. drawMenu();
  250. }
  251. //scoring is outside of that because
  252. }
  253.  
  254. function drawConnectors() {
  255.  
  256. //this part draws the connectors
  257. connectorDist = canvas.width / numOfConnectors;
  258. connectorWidth = 120 / numOfConnectors;
  259.  
  260. for(a = 1; a <= Math.round(numOfConnectors); a++) {
  261. var decimal = numOfConnectors - Math.floor(numOfConnectors);
  262. connectorX = connectorDist * a - (connectorDist / 2);
  263. var h = a - 1;
  264.  
  265. /*theta here is equal to the arctangent of b over a, where a is the x distance between the center of the connector blob and the center of the main blob, and b is the y distance between the center of the connector blob and the center of the main blob.
  266. What all this means is that the blobs point towards the center main blob.*/
  267. connectorAngle = Math.atan(((canvas.height / 2) - canvas.height) / (centerX - connectorX));
  268. //this next part caclulates the hypotenuse so that the blobs extend to the right length.
  269. connectorLength = Math.sqrt(Math.pow(Math.abs(canvas.height - centerY), 2) + Math.pow(Math.abs(centerX - connectorX), 2));
  270.  
  271. /*This is the part that chooses when to send a package. It works by choosing a number between 1 and whatever prob is (1000 in normal mode), and if the number is 5, sending the package.
  272.  
  273. It is also important that only one maximum blob extends at a time in beginner mode, so th player is not overwhelmed. This is measured with hasSelected.*/
  274.  
  275. //for normal mode
  276. if (gamePhase == 1) {
  277. if (phase[h] == 0) {
  278. if (Math.floor(Math.random() * prob) == 5) {
  279. phase[h] = 1;
  280. }
  281. }
  282. }
  283. //for beginner mode
  284. if (gamePhase == 0) {
  285. if (phase[h] == 0 && hasSelected == 0) {
  286. if ((selection[0] + selection[1] + selection[2]) == 18) {
  287. phase[h] = 1;
  288. hasSelected = 1;
  289. }
  290. if (Math.floor(Math.random() * prob) == 5) {
  291. phase[h] = 1;
  292. hasSelected = 1;
  293. }
  294. }
  295. }
  296.  
  297. if (phase[h] != 0) {
  298. //updates position
  299. posit[h] = posit[h] + phase[h];
  300. //updates animation phase
  301. if (posit[h] > connectorLength) {
  302. receive();
  303. phase[h] = -1;
  304. hasSelected = 0;
  305. }
  306. if (posit[h] < 50) {
  307. phase[h] = 0;
  308. posit[h] = 50;
  309. }
  310. }
  311.  
  312. //this part below draws the blobs, while the part above sets the parameters for the blobs
  313. ctx.fillStyle = blobColor;
  314. ctx.beginPath();
  315. ctx.ellipse(connectorX, canvas.height, posit[a - 1], connectorWidth, connectorAngle, 0, Math.PI * 4);
  316. ctx.fill();
  317. }
  318. }
  319.  
  320. function drawSelectionBoxes() {
  321. if (gamePhase == 0 || gamePhase == 1) {
  322. var sizeX = 40;
  323. var sizeY = 50;
  324. var offset = 0;
  325. } else {
  326. var sizeX = 150;
  327. var sizeY = 40;
  328. var offset = 55;
  329. }
  330.  
  331. var textSelection = 0;
  332. //these first for loops draw the different packages.
  333. ctx.fillStyle = textColor;
  334. ctx.font = "20px Ariel";
  335. ctx.textAlign = "center";
  336. for (a = 0; a < selection.length; a++) {
  337. ctx.fillText(possibleSelections[selection[a]], centerX - (sizeX * 2.5) + ((a+1) * (sizeX + 10)) + offset, centerY);
  338. }
  339.  
  340.  
  341. /* this is a little complicated to look at, but the two switch statements are responsible for drawing the two selection boxes in the right spots with the right spacings. Everything else in the function is just getting the styling right and control variables. */
  342.  
  343.  
  344. ctx.strokeStyle = select1Color;
  345. ctx.lineWidth = 2;
  346. ctx.beginPath();
  347. switch (select1) {
  348. case 1:
  349. ctx.rect(centerX - (sizeX * 1.5) - 10, centerY - (sizeY / 2), sizeX, sizeY);
  350. break;
  351. case 2:
  352. ctx.rect(centerX - (sizeX / 2), centerY - (sizeY / 2), sizeX, sizeY);
  353. break;
  354. case 3:
  355. ctx.rect(centerX + (sizeX / 2) + 10, centerY - (sizeY / 2), sizeX, sizeY);
  356. break;
  357. }
  358. ctx.stroke();
  359. if (select2 != 0) {
  360. ctx.strokeStyle = select2Color;
  361. ctx.beginPath();
  362. switch (select2) {
  363. case 1:
  364. ctx.rect(centerX - (sizeX * 1.5) - 7.5, centerY - (sizeY / 2) + 2.5, sizeX - 5, sizeY - 5);
  365. break;
  366. case 2:
  367. ctx.rect(centerX - (sizeX / 2) + 2.5, centerY - (sizeY / 2) + 2.5, sizeX - 5, sizeY - 5);
  368. break;
  369. case 3:
  370. ctx.rect(centerX + (sizeX / 2) + 12.5, centerY - (sizeY / 2) + 2.5, sizeX - 5, sizeY - 5);
  371. break;
  372. }
  373. ctx.stroke();
  374. }
  375. }
  376.  
  377. function drawReceivers() {
  378. var b = 0;
  379. for (a = 1; a <= 3; a++) {
  380. var goodX = (canvas.width / 3)*a - (canvas.width / 6) - 20;
  381. var c = 1;
  382. ctx.fillStyle = receiverColor;
  383. ctx.fillRect(goodX, 0, 40, 40);
  384. ctx.fillStyle = textColor;
  385. ctx.font = "13px Ariel";
  386. ctx.textAlign = "center";
  387. while (a == posSelectionDestns[b]) {
  388. ctx.fillText(possibleSelections[b], goodX + (c * 11), 15);
  389. b = b + 1;
  390. c = c + 1;
  391. }
  392.  
  393. }
  394. }
  395.  
  396. function drawMenu() {
  397. //Title text
  398. ctx.fillStyle = textColor;
  399. ctx.font = "20px Times New Roman";
  400. ctx.textAlign = "center";
  401. ctx.fillText(possibleSelections[10], centerX, 25);
  402.  
  403. //if the player is not in the how to play submenu, draw the main menu.
  404. if (howToPlay != 1) {
  405. drawSelectionBoxes();
  406. menuFrames = menuFrames + 1;
  407. }
  408. //if they're not in the main menu, then they must be in the sub menu
  409. else {
  410. ctx.font = "15px Times New Roman";
  411. ctx.textAlign = "center";
  412. for (a = 0; a < explanText.length; a++) {
  413. ctx.fillText(explanText[a], centerX, 55 + (a * 15));
  414. }
  415. select1 = 2;
  416. }
  417.  
  418. if (menuFrames > 3000) {
  419. ctx.font = "15px Times New Roman";
  420. ctx.fillText(possibleSelections[12], centerX, canvas.height - 25);
  421. ctx.fillText(possibleSelections[13], centerX, canvas.height - 10);
  422. }
  423. }
  424.  
  425. function scoring() {
  426. //drawing the score box
  427. var countAdjustX = (100 - countdown) * 3.65;
  428. var countAdjustY = (100 - countdown) * 2.95;
  429. var trustText = " ";
  430. ctx.fillStyle = boxColor;
  431. ctx.fillRect(canvas.width - 150 - countAdjustX, canvas.height - 50 - countAdjustY, canvas.width + 10, canvas.height)
  432. //this draws the display for the game score and trust.
  433. ctx.fillStyle = textColor;
  434. ctx.font = "20px Ariel";
  435. ctx.textAlign = "center";
  436.  
  437. if (gamePhase == 0 || gamePhase == 1) {
  438. trustText = "trust: " + score;
  439. }
  440. else {
  441. trustText = "Highest trust: " + higheScore;
  442. }
  443. ctx.fillText(trustText, canvas.width - 80 - (countAdjustX / 2), canvas.height - 30 - (countAdjustY / 2));
  444.  
  445. ctx.fillText("time: " + (framesRunning / 100), canvas.width - 80 - (countAdjustX / 2), canvas.height - 10 - (countAdjustY / 2));
  446.  
  447. if (numOfConnectors < maxConnectors && gamePhase == 1) {
  448. numOfConnectors = numOfConnectors + (0.0005 / (numOfConnectors / 4));
  449. }
  450. if (gamePhase == 1 && score < 0) {
  451. gamePhase = 2;
  452. countdown = 99;
  453. }
  454. if (gamePhase == 2) {
  455. if (countdown > 0) {
  456. countdown = countdown - 1;
  457. }
  458. select1 = 2;
  459. if (countdown == 0) {
  460. ctx.fillText("Press up to continue", centerX, centerY + 55);
  461. selection[0] = 6;
  462. selection[1] = 11;
  463. selection[2] = 6;
  464. }
  465. }
  466. if (higheScore < score) {
  467. higheScore = score;
  468. }
  469. }
  470.  
  471. function reset() {
  472. gamePhase = -1;
  473. howToPlay = 0;
  474. score = 5;
  475. higheScore = score;
  476. framesRunning = 0;
  477. prob = 1999.9;
  478. countdown = 100;
  479. numOfConnectors = initNumOfConnectors;
  480. selection[0] = 7;
  481. selection[1] = 8;
  482. selection[2] = 9;
  483. hasSelected = 0;
  484.  
  485. //resets the package deliverer positions
  486. for (a = 0; a < posit.length; a++) {
  487. posit[a] = 50;
  488. phase[a] = 0;
  489. }
  490. }
  491.  
  492. </script>
  493. </head>
  494.  
  495. <body>
  496. <div>
  497. <canvas id="canvas" width="512" height="384">
  498. </canvas>
  499.  
  500. </div>
  501. </body>
  502.  
  503. </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!