squareTwo.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623
  1. /******************************
  2. * This file holds game states.
  3. ******************************/
  4. /** [GAME STATE]
  5. *
  6. * .squareTwo. = gameType
  7. * .../...\...
  8. * ..A.....B.. = gameMode
  9. * ....\./....
  10. * .....|.....
  11. * ...Equals.. = gameOperation
  12. * .....|.....
  13. * .1,2,3,4,5. = gameDifficulty
  14. *
  15. * Character : kid
  16. * Theme : (not themed)
  17. * Concept : player select equivalent dividends for fractions with different divisors
  18. * Represent fractions as : subdivided rectangles
  19. *
  20. * Game modes can be :
  21. *
  22. * A : equivalence of fractions
  23. * top has more subdivisions
  24. * B : equivalence of fractions
  25. * bottom has more subdivisions
  26. *
  27. * Operations :
  28. *
  29. * Equals : Player selects equivalent fractions of both blocks
  30. *
  31. * @namespace
  32. */
  33. const squareTwo = {
  34. /**
  35. * Main code
  36. */
  37. create: function () {
  38. // CONTROL VARIABLES
  39. this.result = false; // Check if selected blocks are correct
  40. this.delay = 0; // Counter for game dalays
  41. this.endLevel = false;
  42. this.A = {
  43. blocks: [], // List of selection blocks
  44. auxBlocks: [], // List of shadow under selection blocks
  45. fractions: [], // Fraction numbers
  46. selected: 0, // Number of selected blocks for A
  47. hasClicked: false, // Check if player clicked blocks from A
  48. animate: false, // Animate blocks from A
  49. warningText: undefined,
  50. label: undefined,
  51. };
  52. this.B = {
  53. blocks: [],
  54. auxBlocks: [],
  55. fractions: [],
  56. selected: 0,
  57. hasClicked: false,
  58. animate: false,
  59. warningText: undefined,
  60. label: undefined,
  61. };
  62. // BACKGROUND AND KID
  63. // Add background image
  64. game.add.image(0, 0, 'bgimage', 2.2);
  65. // Add clouds
  66. game.add.image(640, 100, 'cloud');
  67. game.add.image(1280, 80, 'cloud');
  68. game.add.image(300, 85, 'cloud', 0.8);
  69. // Add floor of grass
  70. for (let i = 0; i < context.canvas.width / 100; i++) {
  71. game.add.image(i * 100, context.canvas.height - 100, 'floor');
  72. }
  73. // Calls function that loads navigation icons
  74. // FOR MOODLE
  75. if (moodle) {
  76. navigationIcons.add(
  77. false,
  78. false,
  79. false, // Left buttons
  80. true,
  81. false, // Right buttons
  82. false,
  83. false
  84. );
  85. } else {
  86. navigationIcons.add(
  87. true,
  88. true,
  89. false, // Left buttons
  90. true,
  91. false, // Right buttons
  92. 'customMenu',
  93. false
  94. );
  95. }
  96. // Add kid
  97. this.kidAnimation = game.add.sprite(
  98. 100,
  99. context.canvas.height - 128,
  100. 'kid_standing',
  101. 5,
  102. 0.8
  103. );
  104. this.kidAnimation.anchor(0.5, 0.7);
  105. // Width and Height of A and B
  106. this.figureWidth = 400;
  107. const figureHeight = 50;
  108. // Coordinates for A and B
  109. let xA, xB, yA, yB;
  110. if (gameMode != 'B') {
  111. // More subdivisions on B
  112. xA = context.canvas.width / 2 - this.figureWidth / 2;
  113. yA = gameFrame().y;
  114. xB = xA;
  115. yB = yA + 3 * figureHeight + 30;
  116. } else {
  117. // More subdivisions on A
  118. xB = context.canvas.width / 2 - this.figureWidth / 2;
  119. yB = gameFrame().y;
  120. xA = xB;
  121. yA = yB + 3 * figureHeight + 30;
  122. }
  123. // Possible points for A
  124. const points = [2, 4, 6, 8, 9, 10, 12, 14, 15, 16, 18, 20];
  125. // Random index for 'points'
  126. const randomIndex = game.math.randomInRange(
  127. (gameDifficulty - 1) * 2 + 1,
  128. (gameDifficulty - 1) * 2 + 3
  129. );
  130. // Number of subdivisions of A and B (blocks)
  131. const totalBlocksA = points[randomIndex];
  132. const totalBlocksB = game.math.randomDivisor(totalBlocksA);
  133. if (debugMode) {
  134. console.log(
  135. 'Difficulty: ' +
  136. gameDifficulty +
  137. '\ncur index: ' +
  138. randomIndex +
  139. ', (min index: ' +
  140. ((gameDifficulty - 1) * 2 + 1) +
  141. ', max index: ' +
  142. ((gameDifficulty - 1) * 2 + 3) +
  143. ')' +
  144. '\ntotal blocks A: ' +
  145. totalBlocksA +
  146. ', total blocks B: ' +
  147. totalBlocksB
  148. );
  149. }
  150. // CREATING TOP FIGURE (A)
  151. let blockWidth = this.figureWidth / totalBlocksA; // Width of each block in A
  152. let lineColor = colors.redDark;
  153. let fillColor = colors.redLight;
  154. // Create blocks
  155. for (let i = 0; i < totalBlocksA; i++) {
  156. const x = xA + i * blockWidth;
  157. // Blocks
  158. const block = game.add.geom.rect(
  159. x,
  160. yA,
  161. blockWidth,
  162. figureHeight,
  163. lineColor,
  164. 2,
  165. fillColor,
  166. 0.5
  167. );
  168. block.figure = 'A';
  169. block.index = i;
  170. block.finalX = xA;
  171. this.A.blocks.push(block);
  172. // Auxiliar blocks
  173. const alpha = fractionLabel ? 0.1 : 0;
  174. const yAux = yA + figureHeight + 10; // On the bottom of A
  175. const auxBlock = game.add.geom.rect(
  176. x,
  177. yAux,
  178. blockWidth,
  179. figureHeight,
  180. lineColor,
  181. 1,
  182. fillColor,
  183. alpha
  184. );
  185. this.A.auxBlocks.push(auxBlock);
  186. }
  187. // 'total blocks' label for A : on the side of A
  188. let xLabel = xA + this.figureWidth + 30;
  189. let yLabel = yA + figureHeight / 2;
  190. this.A.label = game.add.text(
  191. xLabel,
  192. yLabel,
  193. this.A.blocks.length,
  194. textStyles.h4_blueDark
  195. );
  196. // 'selected blocks/fraction' label for A : at the bottom of A
  197. yLabel = yA + figureHeight + 34;
  198. this.A.fractions[0] = game.add.text(
  199. xLabel,
  200. yLabel,
  201. '',
  202. textStyles.h4_blueDark
  203. );
  204. this.A.fractions[1] = game.add.text(
  205. xLabel,
  206. yLabel + 21,
  207. '',
  208. textStyles.h4_blueDark
  209. );
  210. this.A.fractions[2] = game.add.text(
  211. xLabel,
  212. yLabel,
  213. '___',
  214. textStyles.h4_blueDark
  215. );
  216. this.A.fractions[0].alpha = 0;
  217. this.A.fractions[1].alpha = 0;
  218. this.A.fractions[2].alpha = 0;
  219. // CREATING BOTTOM FIGURE (B)
  220. blockWidth = this.figureWidth / totalBlocksB; // Width of each block in B
  221. lineColor = colors.greenDark;
  222. fillColor = colors.greenLight;
  223. // Blocks and auxiliar blocks
  224. for (let i = 0; i < totalBlocksB; i++) {
  225. const x = xB + i * blockWidth;
  226. // Blocks
  227. const block = game.add.geom.rect(
  228. x,
  229. yB,
  230. blockWidth,
  231. figureHeight,
  232. lineColor,
  233. 2,
  234. fillColor,
  235. 0.5
  236. );
  237. block.figure = 'B';
  238. block.index = i;
  239. block.finalX = xB;
  240. this.B.blocks.push(block);
  241. // Auxiliar blocks
  242. const alpha = fractionLabel ? 0.1 : 0;
  243. const yAux = yB + figureHeight + 10; // On the bottom of B
  244. const auxBlock = game.add.geom.rect(
  245. x,
  246. yAux,
  247. blockWidth,
  248. figureHeight,
  249. lineColor,
  250. 1,
  251. fillColor,
  252. alpha
  253. );
  254. this.B.auxBlocks.push(auxBlock);
  255. }
  256. // Label block B
  257. xLabel = xB + this.figureWidth + 30;
  258. yLabel = yB + figureHeight / 2;
  259. this.B.label = game.add.text(
  260. xLabel,
  261. yLabel,
  262. this.B.blocks.length,
  263. textStyles.h4_blueDark
  264. );
  265. // Label fraction
  266. yLabel = yB + figureHeight + 34;
  267. this.B.fractions[0] = game.add.text(
  268. xLabel,
  269. yLabel,
  270. '',
  271. textStyles.h4_blueDark
  272. );
  273. this.B.fractions[1] = game.add.text(
  274. xLabel,
  275. yLabel + 21,
  276. '',
  277. textStyles.h4_blueDark
  278. );
  279. this.B.fractions[2] = game.add.text(
  280. xLabel,
  281. yLabel,
  282. '___',
  283. textStyles.h4_blueDark
  284. );
  285. this.B.fractions[0].alpha = 0;
  286. this.B.fractions[1].alpha = 0;
  287. this.B.fractions[2].alpha = 0;
  288. // Invalid selection text
  289. this.A.warningText = game.add.text(
  290. context.canvas.width / 2,
  291. context.canvas.height / 2 - 225,
  292. '',
  293. textStyles.h4_brown
  294. );
  295. this.B.warningText = game.add.text(
  296. context.canvas.width / 2,
  297. context.canvas.height / 2 - 45,
  298. '',
  299. textStyles.h4_brown
  300. );
  301. game.timer.start(); // Set a timer for the current level (used in postScore)
  302. game.event.add('click', this.onInputDown);
  303. game.event.add('mousemove', this.onInputOver);
  304. },
  305. /**
  306. * Game loop
  307. */
  308. update: function () {
  309. // Animate blocks
  310. if (self.A.animate || self.B.animate) {
  311. ['A', 'B'].forEach((cur) => {
  312. if (self[cur].animate) {
  313. // Lower selected blocks
  314. for (let i = 0; i < self[cur].selected; i++) {
  315. self[cur].blocks[i].y += 2;
  316. }
  317. // After fully lowering blocks, set fraction value
  318. if (self[cur].blocks[0].y >= self[cur].auxBlocks[0].y) {
  319. self[cur].fractions[0].name = self[cur].selected;
  320. self[cur].animate = false;
  321. }
  322. }
  323. });
  324. }
  325. // If A and B are already clicked
  326. if (self.A.hasClicked && self.B.hasClicked && !self.endLevel) {
  327. game.timer.stop();
  328. self.delay++;
  329. // After delay is over, check result
  330. if (self.delay > 50) {
  331. self.result =
  332. self.A.selected / self.A.blocks.length ==
  333. self.B.selected / self.B.blocks.length;
  334. // Fractions are equivalent : CORRECT
  335. if (self.result) {
  336. if (audioStatus) game.audio.okSound.play();
  337. game.add
  338. .image(context.canvas.width / 2, context.canvas.height / 2, 'ok')
  339. .anchor(0.5, 0.5);
  340. mapMove = true; // Allow character to move to next level in map state
  341. completedLevels++;
  342. if (debugMode) console.log('Completed Levels: ' + completedLevels);
  343. // Fractions are not equivalent : INCORRECT
  344. } else {
  345. if (audioStatus) game.audio.errorSound.play();
  346. game.add
  347. .image(context.canvas.width / 2, context.canvas.height / 2, 'error')
  348. .anchor(0.5, 0.5);
  349. mapMove = false; // Doesnt allow character to move to next level in map state
  350. }
  351. self.postScore();
  352. self.endLevel = true;
  353. // Reset delay values for next delay
  354. self.delay = 0;
  355. }
  356. }
  357. // Wait a bit and go to map state
  358. if (self.endLevel) {
  359. self.delay++;
  360. if (self.delay >= 80) {
  361. game.state.start('map');
  362. }
  363. }
  364. game.render.all();
  365. },
  366. /**
  367. * Function called by self.onInputOver() when cursor is over a valid rectangle.
  368. *
  369. * @param {object} curBlock rectangle the cursor is over : can be self.A.blocks[i] or self.B.blocks[i]
  370. */
  371. overSquare: function (curBlock) {
  372. const curSet = curBlock.figure; // 'A' || 'B'
  373. if (!self[curSet].hasClicked) {
  374. // self.A.hasClicked || self.B.hasClicked
  375. // If over fraction 'n/n' shows warning message not allowing it
  376. if (curBlock.index == self[curSet].blocks.length - 1) {
  377. const otherSet = curSet == 'A' ? 'B' : 'A';
  378. self[curSet].warningText.name = game.lang.s2_error_msg;
  379. self[otherSet].warningText.name = '';
  380. self.outSquare(curSet);
  381. } else {
  382. document.body.style.cursor = 'pointer';
  383. self.A.warningText.name = '';
  384. self.B.warningText.name = '';
  385. // Selected blocks become fully visible
  386. for (let i in self[curSet].blocks) {
  387. self[curSet].blocks[i].alpha = i <= curBlock.index ? 1 : 0.5;
  388. }
  389. self[curSet].fractions[0].name = curBlock.index + 1; // Nominator : selected blocks
  390. self[curSet].fractions[1].name = self[curSet].blocks.length; // Denominator : total blocks
  391. const newX =
  392. curBlock.finalX +
  393. (curBlock.index + 1) *
  394. (self.figureWidth / self[curSet].blocks.length) +
  395. 25;
  396. self[curSet].fractions[0].x = newX;
  397. self[curSet].fractions[1].x = newX;
  398. self[curSet].fractions[2].x = newX;
  399. self[curSet].fractions[0].alpha = 1;
  400. }
  401. }
  402. },
  403. /**
  404. * Function called (by self.onInputOver() and self.overSquare()) when cursor is out of a valid rectangle.
  405. *
  406. * @param {object} curSet set of rectangles : can be top (self.A) or bottom (self.B)
  407. */
  408. outSquare: function (curSet) {
  409. if (!self[curSet].hasClicked) {
  410. self[curSet].fractions[0].alpha = 0;
  411. self[curSet].fractions[1].alpha = 0;
  412. self[curSet].fractions[2].alpha = 0;
  413. self[curSet].blocks.forEach((cur) => {
  414. cur.alpha = 0.5;
  415. });
  416. }
  417. },
  418. /**
  419. * Function called by self.onInputDown() when player clicked a valid rectangle.
  420. *
  421. * @param {object} curBlock clicked rectangle : can be self.A.blocks[i] or self.B.blocks[i]
  422. */
  423. clickSquare: function (curBlock) {
  424. const curSet = curBlock.figure; // 'A' || 'B'
  425. if (
  426. !self[curSet].hasClicked &&
  427. curBlock.index != self[curSet].blocks.length - 1
  428. ) {
  429. document.body.style.cursor = 'auto';
  430. // Turn auxiliar blocks invisible
  431. for (let i in self[curSet].blocks) {
  432. if (i > curBlock.index) self[curSet].auxBlocks[i].alpha = 0;
  433. }
  434. // Turn value label invisible
  435. self[curSet].label.alpha = 0;
  436. if (audioStatus) game.audio.popSound.play();
  437. // Save number of selected blocks
  438. self[curSet].selected = curBlock.index + 1;
  439. // Set fraction x position
  440. const newX =
  441. curBlock.finalX +
  442. self[curSet].selected *
  443. (self.figureWidth / self[curSet].blocks.length) +
  444. 25;
  445. self[curSet].fractions[0].x = newX;
  446. self[curSet].fractions[1].x = newX;
  447. self[curSet].fractions[2].x = newX;
  448. self[curSet].fractions[1].alpha = 1;
  449. self[curSet].fractions[2].alpha = 1;
  450. self[curSet].hasClicked = true; // Inform player have clicked in current block set
  451. self[curSet].animate = true; // Let it initiate animation
  452. }
  453. game.render.all();
  454. },
  455. /**
  456. * Called by mouse click event
  457. *
  458. * @param {object} mouseEvent contains the mouse click coordinates
  459. */
  460. onInputDown: function (mouseEvent) {
  461. const x = game.math.getMouse(mouseEvent).x;
  462. const y = game.math.getMouse(mouseEvent).y;
  463. // Click block in A
  464. self.A.blocks.forEach((cur) => {
  465. if (game.math.isOverIcon(x, y, cur)) self.clickSquare(cur);
  466. });
  467. // Click block in B
  468. self.B.blocks.forEach((cur) => {
  469. if (game.math.isOverIcon(x, y, cur)) self.clickSquare(cur);
  470. });
  471. // Click navigation icons
  472. navigationIcons.onInputDown(x, y);
  473. game.render.all();
  474. },
  475. /**
  476. * Called by mouse move event
  477. *
  478. * @param {object} mouseEvent contains the mouse move coordinates
  479. */
  480. onInputOver: function (mouseEvent) {
  481. const x = game.math.getMouse(mouseEvent).x;
  482. const y = game.math.getMouse(mouseEvent).y;
  483. let flagA = false;
  484. let flagB = false;
  485. // Mouse over A : show fraction
  486. self.A.blocks.forEach((cur) => {
  487. if (game.math.isOverIcon(x, y, cur)) {
  488. flagA = true;
  489. self.overSquare(cur);
  490. }
  491. });
  492. if (!flagA) self.outSquare('A');
  493. // Mouse over B : show fraction
  494. self.B.blocks.forEach((cur) => {
  495. if (game.math.isOverIcon(x, y, cur)) {
  496. flagB = true;
  497. self.overSquare(cur);
  498. }
  499. });
  500. if (!flagB) self.outSquare('B');
  501. if (!flagA && !flagB) document.body.style.cursor = 'auto';
  502. // Mouse over navigation icons : show name
  503. navigationIcons.onInputOver(x, y);
  504. game.render.all();
  505. },
  506. /**
  507. * Saves players data after level ends - to be sent to database. <br>
  508. *
  509. * Attention: the 'line_' prefix data table must be compatible to data table fields (MySQL server)
  510. *
  511. * @see /php/save.php
  512. */
  513. postScore: function () {
  514. // Creates string that is going to be sent to db
  515. const data =
  516. '&line_game=' +
  517. gameShape +
  518. '&line_mode=' +
  519. gameMode +
  520. '&line_oper=Equal' +
  521. '&line_leve=' +
  522. gameDifficulty +
  523. '&line_posi=' +
  524. mapPosition +
  525. '&line_resu=' +
  526. self.result +
  527. '&line_time=' +
  528. game.timer.elapsed +
  529. '&line_deta=' +
  530. 'numBlocksA: ' +
  531. self.A.blocks.length +
  532. ', valueA: ' +
  533. self.A.selected +
  534. ', numBlocksB: ' +
  535. self.B.blocks.length +
  536. ', valueB: ' +
  537. self.B.selected;
  538. // FOR MOODLE
  539. sendToDB(data);
  540. },
  541. };