circleOne.js 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344
  1. /******************************
  2. * This file holds game states.
  3. ******************************/
  4. /** [GAME STATE]
  5. *
  6. * .....circleOne.... = gameName
  7. * ....../...\.......
  8. * .....a.....b...... = gameMode
  9. * .......\./........
  10. * ........|.........
  11. * ....../.|.\.......
  12. * .plus.minus.mixed. = gameOperation
  13. * ......\.|./.......
  14. * ........|.........
  15. * ......1,2,3....... = gameDifficulty
  16. *
  17. * Character : kid/kite
  18. * Theme : getting the kite on the floor
  19. * Concept : 'How much the kid has to walk to get to the kite?'
  20. * Represent fractions as : circles/arcs
  21. *
  22. * Game modes can be :
  23. *
  24. * a : Player can place kite position
  25. * Place kite in position (so the kid can get to it)
  26. * b : Player can select # of circles
  27. * Selects number of circles (that represent distance kid needs to walk to get to the kite)
  28. *
  29. * Operations can be :
  30. *
  31. * plus : addition of fractions
  32. * Represented by : kid going to the right (floor positions 0..5)
  33. * minus : subtraction of fractions
  34. * Represented by: kid going to the left (floor positions 5..0)
  35. * mixed : Mix addition and subtraction of fractions in same
  36. * Represented by: kid going to the left (floor positions 0..5)
  37. *
  38. * @namespace
  39. */
  40. const circleOne = {
  41. ui: undefined,
  42. control: undefined,
  43. animation: undefined,
  44. road: undefined,
  45. circles: undefined,
  46. kid: undefined,
  47. kite: undefined,
  48. kite_line: undefined,
  49. walkedPath: undefined,
  50. /**
  51. * Main code
  52. */
  53. create: function () {
  54. this.ui = {
  55. help: undefined,
  56. message: undefined,
  57. continue: {
  58. // modal: undefined,
  59. button: undefined,
  60. text: undefined,
  61. },
  62. };
  63. const roadMapper = () => {
  64. const _pointWidth = (game.sprite['map_place'].width / 2) * 0.45;
  65. const defaultX = 150;
  66. const defaultY =
  67. context.canvas.height - game.image['floor_grass'].width * 1.5;
  68. const defaultWidth = 1620;
  69. // Initial 'x' coordinate for the kid and the kite
  70. const x =
  71. gameOperation === 'minus'
  72. ? context.canvas.width - defaultX - _pointWidth / 2
  73. : defaultX + _pointWidth / 2;
  74. const y = defaultY;
  75. const width = defaultWidth - _pointWidth;
  76. const _divisions = 5;
  77. const _subdivisions = gameDifficulty === 3 ? 4 : gameDifficulty;
  78. const numberOfBlocks = _divisions * _subdivisions;
  79. return { x, y, width, numberOfBlocks, defaultX, defaultY, defaultWidth };
  80. };
  81. this.road = roadMapper();
  82. const blocksMapper = () => {
  83. let width = this.road.width / this.road.numberOfBlocks;
  84. if (gameOperation === 'minus') width = -width;
  85. const height = 50;
  86. return { width, height, list: [], cur: undefined };
  87. };
  88. this.blocks = blocksMapper();
  89. this.walkedPath = [];
  90. const pointWidth = (game.sprite['map_place'].width / 2) * 0.45;
  91. const distanceBetweenPoints =
  92. (context.canvas.width - this.road.defaultX * 2 - pointWidth) / 5; // Distance between road points
  93. const y0 = this.road.defaultY + 20;
  94. const x0 = this.road.x;
  95. this.circles = {
  96. diameter: game.math.getRadiusFromCircunference(distanceBetweenPoints) * 2, // (Fixed) Circles Diameter
  97. cur: 0, // Current circle index
  98. list: [], // Circle objects
  99. };
  100. this.control = {
  101. directionModifier: gameOperation === 'minus' ? -1 : 1,
  102. correctX: x0, // Correct position (accumulative)
  103. nextX: undefined, // Next point position
  104. divisorsList: '', // used in postScore (Accumulative)
  105. hasClicked: false, // Checks if user has clicked
  106. checkAnswer: false, // Check kid on top of kiteline
  107. isCorrect: false, // Informs answer is correct
  108. showEndInfo: false,
  109. endSignX: undefined,
  110. curWalkedPath: 0,
  111. // mode 'b' exclusive
  112. correctIndex: undefined,
  113. selectedIndex: -1, // Index of clicked circle (game (b))
  114. numberOfPlusFractions: undefined,
  115. };
  116. const walkOffsetX = 2;
  117. const walksPerDistanceBetweenPoints = distanceBetweenPoints / walkOffsetX;
  118. this.animation = {
  119. list: {
  120. left: undefined,
  121. right: undefined,
  122. },
  123. invertDirection: undefined,
  124. animateKid: false,
  125. animateKite: false, // TODO
  126. counter: undefined,
  127. walkOffsetX,
  128. angleOffset: 360 / walksPerDistanceBetweenPoints,
  129. };
  130. renderBackground('farmRoad');
  131. // Calls function that loads navigation icons
  132. // FOR MOODLE
  133. if (moodle) {
  134. navigation.add.right(['audio']);
  135. } else {
  136. navigation.add.left(['back', 'menu', 'show_answer'], 'customMenu');
  137. navigation.add.right(['audio']);
  138. }
  139. const validPath = { x0, y0, distanceBetweenPoints };
  140. this.utils.renderRoadBlocks();
  141. this.utils.renderRoad(validPath);
  142. const [restart, kiteX] = this.utils.renderCircles(validPath);
  143. this.restart = restart;
  144. this.utils.renderCharacters(validPath, kiteX);
  145. this.utils.renderMainUI();
  146. if (!this.restart) {
  147. game.timer.start(); // Set a timer for the current level (used in postScore())
  148. game.event.add('click', this.events.onInputDown);
  149. game.event.add('mousemove', this.events.onInputOver);
  150. }
  151. },
  152. /**
  153. * Game loop
  154. */
  155. update: function () {
  156. // Starts kid animation
  157. if (self.animation.animateKid) {
  158. self.utils.animateKidHandler();
  159. }
  160. // Check if kid is on top of kite line
  161. if (self.control.checkAnswer) {
  162. self.utils.checkAnswerHandler();
  163. }
  164. // Starts kite moving animation
  165. if (self.animation.animateKite) {
  166. self.utils.animateKiteHandler();
  167. }
  168. game.render.all();
  169. },
  170. utils: {
  171. renderRoadBlocks: function () {
  172. for (let i = 0; i < self.road.numberOfBlocks; i++) {
  173. const block = game.add.geom.rect(
  174. self.road.x + i * self.blocks.width,
  175. self.road.y,
  176. self.blocks.width, // If gameOperation is minus, block width is negative
  177. self.blocks.height,
  178. 'transparent',
  179. 0.5,
  180. colors.red,
  181. 2
  182. );
  183. block.info = { index: i };
  184. self.blocks.list.push(block);
  185. }
  186. },
  187. // RENDERS
  188. renderRoad: function (validPath) {
  189. const offset = 40;
  190. for (let i = 0; i <= 5; i++) {
  191. // Gray place
  192. game.add
  193. .sprite(
  194. validPath.x0 +
  195. i *
  196. validPath.distanceBetweenPoints *
  197. self.control.directionModifier,
  198. validPath.y0,
  199. 'map_place',
  200. 0,
  201. 0.45
  202. )
  203. .anchor(0.5, 0.5);
  204. // White circle behind number
  205. const curX =
  206. validPath.x0 +
  207. i * validPath.distanceBetweenPoints * self.control.directionModifier;
  208. game.add.geom
  209. .circle(
  210. curX,
  211. validPath.y0 + 60 + offset,
  212. 60,
  213. undefined,
  214. 0,
  215. colors.white,
  216. 0.8
  217. )
  218. .anchor(0, 0.25);
  219. game.add.geom.rect(
  220. curX,
  221. validPath.y0 + 60 - 28,
  222. 4,
  223. 25,
  224. colors.white,
  225. 0.8,
  226. undefined,
  227. 0
  228. );
  229. // Number
  230. game.add.text(
  231. curX,
  232. validPath.y0 + 60 + offset,
  233. i * self.control.directionModifier,
  234. {
  235. ...textStyles.h2_,
  236. font: 'bold ' + textStyles.h2_.font,
  237. fill: gameOperation === 'minus' ? colors.red : colors.green,
  238. }
  239. );
  240. }
  241. self.utils.renderWalkedPath(
  242. validPath.x0 - 1,
  243. validPath.y0 - 5,
  244. gameOperation === 'minus' ? colors.red : colors.green
  245. );
  246. },
  247. renderWalkedPath: function (x, y, color) {
  248. const path = game.add.geom.rect(x, y, 1, 1, 'transparent', 1, color, 4);
  249. self.walkedPath.push(path);
  250. return path;
  251. },
  252. renderCircles: function (validPath) {
  253. let restart = false;
  254. let hasBaseDifficulty = false;
  255. let kiteX = context.canvas.width / 2;
  256. const fractionX =
  257. validPath.x0 -
  258. (self.circles.diameter - 10) * self.control.directionModifier;
  259. const font = {
  260. ...textStyles.h2_,
  261. font: 'bold ' + textStyles.h2_.font,
  262. };
  263. // Number of circles
  264. const max = gameOperation === 'mixed' ? 6 : curMapPosition + 1;
  265. const min =
  266. curMapPosition === 1 && (gameOperation === 'mixed' || gameMode === 'b')
  267. ? 2
  268. : curMapPosition; // Mixed level has at least 2 fractions
  269. const total = game.math.randomInRange(min, max); // Total number of circles
  270. // For mode 'b'
  271. self.control.numberOfPlusFractions = game.math.randomInRange(
  272. 1,
  273. total - 1
  274. );
  275. for (let i = 0; i < total; i++) {
  276. let curDirection = undefined;
  277. let curLineColor = undefined;
  278. let curFillColor = undefined;
  279. let curAngleDegree = undefined;
  280. let curIsCounterclockwise = undefined;
  281. let curFractionItems = undefined;
  282. let curCircle = undefined;
  283. const curCircleInfo = {
  284. direction: undefined,
  285. direc: undefined,
  286. distance: undefined,
  287. angle: undefined,
  288. fraction: {
  289. labels: [],
  290. nominator: undefined,
  291. denominator: undefined,
  292. },
  293. };
  294. let curDivisor = game.math.randomInRange(1, gameDifficulty); // Set fraction 'divisor' (depends on difficulty)
  295. if (curDivisor === gameDifficulty) hasBaseDifficulty = true; // True if after for ends has at least 1 '1/difficulty' fraction
  296. curDivisor = curDivisor === 3 ? 4 : curDivisor; // Turns 1/3 into 1/4 fractions
  297. self.control.divisorsList += curDivisor + ','; // Add this divisor to the list of divisors (for postScore())
  298. // Set each circle direction
  299. switch (gameOperation) {
  300. case 'plus':
  301. curDirection = 'right';
  302. break;
  303. case 'minus':
  304. curDirection = 'left';
  305. break;
  306. case 'mixed':
  307. curDirection =
  308. i < self.control.numberOfPlusFractions ? 'right' : 'left';
  309. break;
  310. }
  311. curCircleInfo.direction = curDirection;
  312. // Set each circle visual info
  313. if (curDirection === 'right') {
  314. curIsCounterclockwise = true;
  315. curLineColor = colors.green;
  316. curFillColor = colors.greenLight;
  317. curCircleInfo.direc = 1;
  318. } else {
  319. curIsCounterclockwise = false;
  320. curLineColor = colors.red;
  321. curFillColor = colors.redLight;
  322. curCircleInfo.direc = -1;
  323. }
  324. font.fill = curLineColor;
  325. const curCircleY =
  326. validPath.y0 -
  327. 5 -
  328. self.circles.diameter / 2 -
  329. i * self.circles.diameter;
  330. // Draw circles
  331. if (curDivisor === 1) {
  332. curAngleDegree = 360;
  333. curCircle = game.add.geom.circle(
  334. validPath.x0,
  335. curCircleY,
  336. self.circles.diameter,
  337. curLineColor,
  338. 3,
  339. curFillColor,
  340. 1
  341. );
  342. curCircle.counterclockwise = curIsCounterclockwise;
  343. curCircleInfo.angleDegree = curAngleDegree;
  344. curFractionItems = [
  345. {
  346. x: fractionX,
  347. y: curCircleY + 10,
  348. text: '1',
  349. },
  350. {
  351. x: fractionX - 25,
  352. y: curCircleY + 10,
  353. text: curDirection === 'left' ? '-' : '',
  354. },
  355. null,
  356. ];
  357. } else {
  358. curAngleDegree = 360 / curDivisor;
  359. if (curDirection === 'right') curAngleDegree = 360 - curAngleDegree; // counterclockwise equivalent
  360. curCircle = game.add.geom.arc(
  361. validPath.x0,
  362. curCircleY,
  363. self.circles.diameter,
  364. 0,
  365. game.math.degreeToRad(curAngleDegree),
  366. curIsCounterclockwise,
  367. curLineColor,
  368. 3,
  369. curFillColor,
  370. 1
  371. );
  372. curCircleInfo.angleDegree = curAngleDegree;
  373. curFractionItems = [
  374. {
  375. x: fractionX,
  376. y: curCircleY - 2,
  377. text: `1\n${curDivisor}`,
  378. },
  379. {
  380. x: fractionX - 35,
  381. y: curCircleY + 15,
  382. text: curDirection === 'left' ? '-' : '',
  383. },
  384. {
  385. x0: fractionX,
  386. y0: curCircleY + 2,
  387. x1: fractionX + 25,
  388. y1: curCircleY + 2,
  389. lineWidth: 2,
  390. color: curLineColor,
  391. },
  392. ];
  393. }
  394. for (let i = 0; i < 2; i++) {
  395. const item = game.add.text(
  396. curFractionItems[i].x,
  397. curFractionItems[i].y,
  398. curFractionItems[i].text,
  399. font
  400. );
  401. item.lineHeight = 37;
  402. curCircleInfo.fraction.labels.push(item);
  403. }
  404. if (curFractionItems[2]) {
  405. const line = game.add.geom.line(
  406. curFractionItems[2].x0,
  407. curFractionItems[2].y0,
  408. curFractionItems[2].x1,
  409. curFractionItems[2].y1,
  410. curFractionItems[2].lineWidth,
  411. curFractionItems[2].color
  412. );
  413. line.anchor(0.5, 0);
  414. curCircleInfo.fraction.labels.push(line);
  415. } else {
  416. curCircleInfo.fraction.labels.push(null);
  417. }
  418. curCircleInfo.fraction.nominator = curCircleInfo.direc;
  419. curCircleInfo.fraction.denominator = curDivisor;
  420. if (!showFractions) {
  421. curCircleInfo.fraction.labels.forEach((label) => {
  422. if (label) label.alpha = 0;
  423. });
  424. }
  425. curCircle.rotate = 90;
  426. // If game is type (b) (select fractions)
  427. if (gameMode === 'b') {
  428. curCircle.index = i;
  429. }
  430. curCircleInfo.distance = Math.floor(
  431. validPath.distanceBetweenPoints / curDivisor
  432. );
  433. // Add to the list
  434. curCircle.info = curCircleInfo;
  435. self.circles.list.push(curCircle);
  436. self.control.correctX +=
  437. Math.floor(validPath.distanceBetweenPoints / curDivisor) *
  438. curCircle.info.direc;
  439. }
  440. // Restart if
  441. // Does not have at least one fraction of type 1/difficulty
  442. if (!hasBaseDifficulty) {
  443. restart = true;
  444. }
  445. // Calculate next circle
  446. self.control.nextX =
  447. validPath.x0 +
  448. self.circles.list[0].info.distance * self.circles.list[0].info.direc;
  449. let isBeforeMin = (isAfterMax = false);
  450. let finalPosition = self.control.correctX.toFixed(1);
  451. // Restart if
  452. // In Game mode 'a' and 'b' : Kite position is out of bounds
  453. if (gameOperation === 'minus') {
  454. isBeforeMin = finalPosition > validPath.x0;
  455. isAfterMax =
  456. finalPosition < validPath.x0 - 5 * validPath.distanceBetweenPoints;
  457. } else {
  458. isBeforeMin = finalPosition <= validPath.x0;
  459. isAfterMax =
  460. finalPosition > validPath.x0 + 5 * validPath.distanceBetweenPoints;
  461. }
  462. if (isBeforeMin || isAfterMax) restart = true;
  463. if (gameMode === 'b') {
  464. // If game is type (b), select a random kite place
  465. kiteX = validPath.x0;
  466. self.control.correctIndex = game.math.randomInRange(
  467. self.control.numberOfPlusFractions,
  468. self.circles.list.length
  469. );
  470. for (let i = 0; i < self.control.correctIndex; i++) {
  471. kiteX +=
  472. self.circles.list[i].info.distance *
  473. self.circles.list[i].info.direc;
  474. }
  475. finalPosition = kiteX;
  476. self.blocks.list.forEach((cur) => {
  477. self.utils.fillCurrentBlock(kiteX, cur.x, cur);
  478. if (self.utils.isOverBlock(kiteX, cur.x, cur.width, cur))
  479. self.blocks.cur = cur;
  480. });
  481. // Restart if
  482. // In Game mode 'b' : Top circle position is out of bounds (when on the ground)
  483. if (gameOperation === 'minus') {
  484. isBeforeMin = finalPosition > validPath.x0;
  485. isAfterMax =
  486. finalPosition < validPath.x0 - 5 * validPath.distanceBetweenPoints;
  487. } else {
  488. isBeforeMin = finalPosition < validPath.x0;
  489. isAfterMax =
  490. finalPosition > validPath.x0 + 5 * validPath.distanceBetweenPoints;
  491. }
  492. if (isBeforeMin || isAfterMax) restart = true;
  493. }
  494. return [restart, kiteX];
  495. },
  496. renderCharacters: function (validPath, kiteX) {
  497. // KID
  498. self.kid = game.add.sprite(
  499. validPath.x0,
  500. validPath.y0 - 32 - self.circles.list.length * self.circles.diameter,
  501. 'kid_walking',
  502. 0,
  503. 1.2
  504. );
  505. self.kid.anchor(0.5, 0.8);
  506. self.animation.list.right = [
  507. 'right',
  508. [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
  509. 4,
  510. ];
  511. self.animation.list.left = [
  512. 'left',
  513. [23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12],
  514. 4,
  515. ];
  516. if (gameOperation === 'minus') {
  517. self.kid.animation = self.animation.list.left;
  518. self.kid.curFrame = 23;
  519. } else {
  520. self.kid.animation = self.animation.list.right;
  521. }
  522. // KITE
  523. self.kite = game.add.image(kiteX, validPath.y0 - 295, 'kite', 1.8, 0.5);
  524. self.kite.alpha = 0.5;
  525. self.kite.anchor(0, 0.5);
  526. self.kite_line = game.add.image(kiteX, validPath.y0 - 30, 'kite_line', 2);
  527. self.kite_line.alpha = 0.8;
  528. self.kite_line.anchor(0.5, 0);
  529. if (gameMode === 'b') {
  530. self.kite_line.alpha = 1;
  531. self.kite.alpha = 1;
  532. }
  533. },
  534. renderMainUI: function () {
  535. // Help pointer
  536. self.ui.help = game.add.image(0, 0, 'pointer', 2, 0);
  537. // Intro text
  538. const correctMessage =
  539. gameMode === 'a'
  540. ? game.lang.circleOne_intro_a
  541. : game.lang.circleOne_intro_b;
  542. const treatedMessage = correctMessage.split('\\n');
  543. self.ui.message = [];
  544. self.ui.message.push(
  545. game.add.text(
  546. context.canvas.width / 2,
  547. 170,
  548. treatedMessage[0] + '\n' + treatedMessage[1],
  549. textStyles.h1_
  550. )
  551. );
  552. },
  553. renderOperationUI: function () {
  554. /**
  555. * if game mode A:
  556. * - left: selected kite position (user selection)
  557. * - right: correct sum of stack of arcs (pre-set)
  558. *
  559. * if game mode B:
  560. * - left: line created from the stack of arcs (user selection)
  561. * - right: baloon position (pre-set)
  562. */
  563. const renderFloorFractions = (lastIndex) => {
  564. const divisor = gameDifficulty == 3 ? 4 : gameDifficulty;
  565. const operator = gameOperation === 'minus' ? '-' : '+';
  566. const index = lastIndex;
  567. const blocks = index + 1;
  568. const valueReal = blocks / divisor;
  569. const valueFloor = Math.floor(valueReal);
  570. const valueRest = valueReal - valueFloor;
  571. let fracNomin = (fracDenomin = fracLine = '');
  572. // Adds sign on the left of the equation
  573. if (gameOperation === 'minus') {
  574. fracNomin += ' ';
  575. fracDenomin += ' ';
  576. fracLine += operator;
  577. }
  578. // 1 _ _
  579. if (valueFloor) {
  580. fracNomin += ' ';
  581. fracDenomin += ' ';
  582. fracLine += valueFloor;
  583. }
  584. // _ + _
  585. if (valueFloor && valueRest) {
  586. fracNomin += ' ';
  587. fracDenomin += ' ';
  588. fracLine += operator;
  589. }
  590. // _ _ 1/5
  591. if (valueRest) {
  592. fracNomin += `${valueRest * divisor}`;
  593. fracDenomin += `${divisor}`;
  594. fracLine += '-';
  595. }
  596. return [fracNomin, fracDenomin, fracLine, valueReal];
  597. };
  598. const renderStackFractions = (lastIndex) => {
  599. const index = lastIndex;
  600. const blocks = index + 1;
  601. const nominators = [];
  602. const denominators = [];
  603. const values = [];
  604. let valueReal = 0;
  605. let fracNomin = (fracDenomin = fracLine = '');
  606. for (let i = 0; i < blocks; i++) {
  607. const m = self.circles.list[i].info.fraction.denominator || 1;
  608. const temp = self.circles.list[i].info.fraction.nominator || 0;
  609. const n = temp < 0 ? -temp : +temp;
  610. const nm = n / m;
  611. nominators[i] = n + 0;
  612. denominators[i] = m + 0;
  613. values[i] = nm;
  614. if (gameOperation === 'mixed')
  615. valueReal = temp < 0 ? valueReal - nm : valueReal + nm;
  616. else valueReal += nm;
  617. }
  618. for (let i = 0; i < blocks; i++) {
  619. const valueReal = values[i];
  620. const valueFloor = Math.floor(valueReal);
  621. const valueRest = valueReal - valueFloor;
  622. const operator =
  623. self.circles.list[i].info.fraction.nominator < 0 ? '-' : '+';
  624. if (i > 0 || gameOperation === 'minus') {
  625. fracNomin += ' ';
  626. fracDenomin += ' ';
  627. fracLine += operator;
  628. }
  629. if (valueFloor && !valueRest) {
  630. fracNomin += ' ';
  631. fracDenomin += ' ';
  632. fracLine += valueFloor;
  633. }
  634. if (valueRest) {
  635. fracNomin += `${nominators[i]}`;
  636. fracDenomin += `${denominators[i]}`;
  637. fracLine += '-';
  638. }
  639. }
  640. return [fracNomin, fracDenomin, fracLine, valueReal];
  641. };
  642. // Initial setup
  643. const font = textStyles.fraction;
  644. font.fill = colors.black;
  645. const padding = 100;
  646. const offsetX = 100;
  647. const widthOfChar = 35;
  648. const x0 = padding;
  649. const y0 = context.canvas.height / 3;
  650. let nextX = x0;
  651. const cardHeight = 400;
  652. const cardX = x0 - padding;
  653. const cardY = y0;
  654. const renderList = [];
  655. // Render Card
  656. const card = game.add.geom.rect(
  657. cardX,
  658. cardY,
  659. 0,
  660. cardHeight,
  661. colors.blueLight,
  662. 0.5,
  663. colors.blueDark,
  664. 8
  665. );
  666. card.id = 'card';
  667. card.anchor(0, 0.5);
  668. renderList.push(card);
  669. // Fraction setup
  670. const [floorNominators, floorDenominators, floorLines, floorValue] =
  671. renderFloorFractions(self.blocks.cur.info.index);
  672. const [stackNominators, stackDenominators, stackLines, stackValue] =
  673. renderStackFractions(self.circles.cur - 1);
  674. const renderFloorOperationLine = (x) => {
  675. font.fill = colors.black;
  676. const floorNom = game.add.text(
  677. x + offsetX / 2,
  678. y0,
  679. floorNominators,
  680. font,
  681. 60
  682. );
  683. const floorDenom = game.add.text(
  684. x + offsetX / 2,
  685. y0 + 70,
  686. floorDenominators,
  687. font,
  688. 60
  689. );
  690. const floorLin = game.add.text(
  691. x + offsetX / 2,
  692. y0 + 35,
  693. floorLines,
  694. font,
  695. 60
  696. );
  697. renderList.push(floorNom);
  698. renderList.push(floorDenom);
  699. renderList.push(floorLin);
  700. };
  701. const renderStackOperationLine = (x) => {
  702. font.fill = colors.black;
  703. const stackNom = game.add.text(
  704. x + offsetX / 2,
  705. y0,
  706. stackNominators,
  707. font,
  708. 60
  709. );
  710. const stackDenom = game.add.text(
  711. x + offsetX / 2,
  712. y0 + 70,
  713. stackDenominators,
  714. font,
  715. 60
  716. );
  717. const stackLin = game.add.text(
  718. x + offsetX / 2,
  719. y0 + 35,
  720. stackLines,
  721. font,
  722. 60
  723. );
  724. renderList.push(stackNom);
  725. renderList.push(stackDenom);
  726. renderList.push(stackLin);
  727. };
  728. // Render LEFT part of the operation
  729. if (gameMode === 'a') renderFloorOperationLine(x0);
  730. else renderStackOperationLine(x0);
  731. let curNominators = gameMode === 'a' ? floorNominators : stackNominators;
  732. nextX = x0 + (curNominators.length + 2) * widthOfChar;
  733. // Render middle sign - equal by default
  734. font.fill = colors.green;
  735. let comparisonSign = '=';
  736. // Render middle sign - if not equal
  737. if (floorValue != stackValue) {
  738. font.fill = colors.red;
  739. let leftSideIsLarger = floorValue > stackValue;
  740. if (gameMode === 'b') leftSideIsLarger = !leftSideIsLarger;
  741. if (gameOperation === 'minus') leftSideIsLarger = !leftSideIsLarger;
  742. comparisonSign = leftSideIsLarger ? '>' : '<';
  743. }
  744. renderList.push(game.add.text(nextX, y0 + 35, comparisonSign, font));
  745. // Render RIGHT part of the operationf
  746. if (gameMode === 'a') renderStackOperationLine(nextX);
  747. else renderFloorOperationLine(nextX);
  748. curNominators = gameMode === 'a' ? stackNominators : floorNominators;
  749. const resultWidth = (curNominators.length + 2) * widthOfChar;
  750. const cardWidth = nextX - x0 + resultWidth + padding * 2;
  751. card.width = cardWidth;
  752. const endSignX = (context.canvas.width - cardWidth) / 2 + cardWidth;
  753. // Center Card
  754. moveList(renderList, (context.canvas.width - cardWidth) / 2, 0);
  755. self.fractionOperationUI = renderList;
  756. return endSignX;
  757. },
  758. renderEndUI: function () {
  759. let btnColor = colors.green;
  760. let btnText = game.lang.continue;
  761. if (!self.control.isCorrect) {
  762. btnColor = colors.red;
  763. btnText = game.lang.retry;
  764. }
  765. // continue button
  766. self.ui.continue.button = game.add.geom.rect(
  767. context.canvas.width / 2,
  768. context.canvas.height / 2 + 100,
  769. 450,
  770. 100,
  771. btnColor
  772. );
  773. self.ui.continue.button.anchor(0.5, 0.5);
  774. self.ui.continue.text = game.add.text(
  775. context.canvas.width / 2,
  776. context.canvas.height / 2 + 16 + 100,
  777. btnText,
  778. textStyles.btn
  779. );
  780. },
  781. // UPDATE
  782. animateKidHandler: function () {
  783. let canLowerCircles = undefined;
  784. let curCircle = self.circles.list[self.circles.cur];
  785. let curDirec = curCircle.info.direc;
  786. // Move
  787. self.circles.list.forEach((circle) => {
  788. circle.x += self.animation.walkOffsetX * curDirec;
  789. });
  790. self.kid.x += self.animation.walkOffsetX * curDirec;
  791. self.walkedPath[self.control.curWalkedPath].width +=
  792. self.animation.walkOffsetX * curDirec;
  793. // Update arc
  794. curCircle.info.angleDegree += self.animation.angleOffset * curDirec;
  795. curCircle.angleEnd = game.math.degreeToRad(curCircle.info.angleDegree);
  796. // When finish current circle
  797. if (curCircle.info.direction === 'right') {
  798. canLowerCircles = curCircle.x >= self.control.nextX;
  799. } else if (curCircle.info.direction === 'left') {
  800. canLowerCircles = curCircle.x <= self.control.nextX;
  801. // If just changed from 'right' to 'left' inform to change direction of kid animation
  802. if (
  803. self.animation.invertDirection === undefined &&
  804. self.circles.cur > 0 &&
  805. self.circles.list[self.circles.cur - 1].info.direction === 'right'
  806. ) {
  807. self.animation.invertDirection = true;
  808. }
  809. }
  810. // Change direction of kid animation
  811. if (self.animation.invertDirection) {
  812. self.animation.invertDirection = false;
  813. game.animation.stop(self.kid.animation[0]);
  814. self.kid.animation = self.animation.list.left;
  815. self.kid.curFrame = 23;
  816. game.animation.play('left');
  817. self.control.curWalkedPath = 1;
  818. self.utils.renderWalkedPath(
  819. curCircle.x,
  820. self.walkedPath[0].y + 8,
  821. colors.red
  822. );
  823. }
  824. if (canLowerCircles) {
  825. // Hide current circle
  826. curCircle.alpha = 0;
  827. // Lowers kid and other circles
  828. self.circles.list.forEach((circle) => {
  829. circle.y += self.circles.diameter;
  830. });
  831. self.kid.y += self.circles.diameter;
  832. self.circles.cur++; // Update index of current circle
  833. if (self.circles.list[self.circles.cur]) {
  834. curCircle = self.circles.list[self.circles.cur];
  835. curDirec = curCircle.info.direc;
  836. self.control.nextX += curCircle.info.distance * curDirec; // Update next position
  837. }
  838. }
  839. // When finish all circles (final position)
  840. if (
  841. self.circles.cur === self.circles.list.length ||
  842. curCircle.alpha === 0
  843. ) {
  844. self.animation.animateKid = false;
  845. self.control.checkAnswer = true;
  846. }
  847. },
  848. checkAnswerHandler: function () {
  849. game.timer.stop();
  850. game.animation.stop(self.kid.animation[0]);
  851. self.control.isCorrect = game.math.isOverlap(self.kite_line, self.kid);
  852. const x = self.utils.renderOperationUI();
  853. if (self.control.isCorrect) {
  854. completedLevels++;
  855. // self.kid.curFrame = self.kid.curFrame < 12 ? 24 : 25;
  856. // console.log(self.kid);
  857. self.kid.alpha = 0;
  858. const kidStanding = game.add.sprite(
  859. self.kid.x,
  860. self.kid.y,
  861. 'kid_standing',
  862. 5,
  863. 1.2
  864. );
  865. kidStanding.anchor(0.5, 0.8);
  866. self.kid = kidStanding;
  867. self.kid.alpha = 1;
  868. self.kite_line.alpha = 0;
  869. self.kite.x += 25;
  870. self.kite.y -= 40;
  871. if (audioStatus) game.audio.okSound.play();
  872. game.add
  873. .image(x + 50, context.canvas.height / 3, 'answer_correct')
  874. .anchor(0.5, 0.5);
  875. if (isDebugMode) console.log('Completed Levels: ' + completedLevels);
  876. } else {
  877. if (audioStatus) game.audio.errorSound.play();
  878. game.add
  879. .image(x, context.canvas.height / 3, 'answer_wrong')
  880. .anchor(0.5, 0.5);
  881. }
  882. self.fetch.postScore();
  883. self.control.checkAnswer = false;
  884. self.animation.counter = 0;
  885. self.animation.animateKite = true;
  886. },
  887. animateKiteHandler: function () {
  888. self.animation.counter++;
  889. if (!self.control.isCorrect) {
  890. self.kite.y -= 2;
  891. self.kite_line.y -= 2;
  892. }
  893. if (self.animation.counter % 40 === 0) {
  894. const kiteMovement = self.animation.counter % 80 === 0 ? -3 : 3;
  895. self.kite.y += kiteMovement;
  896. }
  897. if (self.animation.counter === 100) {
  898. self.utils.renderEndUI();
  899. self.control.showEndInfo = true;
  900. if (self.control.isCorrect) canGoToNextMapPosition = true;
  901. else canGoToNextMapPosition = false;
  902. }
  903. },
  904. endLevel: function () {
  905. game.state.start('map');
  906. },
  907. // INFORMATION
  908. /**
  909. * Show correct answer
  910. */
  911. showAnswer: function () {
  912. if (!self.control.hasClicked) {
  913. // On gameMode (a)
  914. if (gameMode === 'a') {
  915. self.ui.help.x = self.control.correctX - 20;
  916. self.ui.help.y = self.road.defaultY;
  917. // On gameMode (b)
  918. } else {
  919. self.ui.help.x = self.circles.list[self.control.correctIndex - 1].x;
  920. self.ui.help.y = self.circles.list[self.control.correctIndex - 1].y; // - self.circles.diameter / 2;
  921. }
  922. self.ui.help.alpha = 1;
  923. }
  924. },
  925. // HANDLERS
  926. /**
  927. * (in gameMode 'b') Function called when player clicked over a valid circle
  928. *
  929. * @param {number|object} cur clicked circle
  930. */
  931. clickCircleHandler: function (cur) {
  932. if (!self.control.hasClicked) {
  933. // On gameMode (a)
  934. if (gameMode === 'a') {
  935. self.kite.x = cur;
  936. self.kite_line.x = cur;
  937. }
  938. // On gameMode (b)
  939. if (gameMode === 'b') {
  940. document.body.style.cursor = 'auto';
  941. for (let i in self.circles.list) {
  942. if (i <= cur.index) {
  943. self.circles.list[i].alpha = 1; // Keep selected circle
  944. self.control.selectedIndex = cur.index;
  945. } else {
  946. self.circles.list[i].alpha = 0; // Hide unselected circle
  947. self.kid.y += self.circles.diameter; // Lower kid to selected circle
  948. }
  949. }
  950. }
  951. if (audioStatus) game.audio.popSound.play();
  952. // Hide fractions
  953. if (showFractions) {
  954. self.circles.list.forEach((circle) => {
  955. circle.info.fraction.labels.forEach((labelPart) => {
  956. if (labelPart) labelPart.alpha = 0;
  957. });
  958. });
  959. }
  960. // Hide solution pointer
  961. if (self.ui.help != undefined) self.ui.help.alpha = 0;
  962. self.ui.message[0].alpha = 0;
  963. navigation.disableIcon(navigation.showAnswerIcon);
  964. self.kite.alpha = 1;
  965. self.kite_line.alpha = 1;
  966. self.walkedPath[self.control.curWalkedPath].alpha = 1;
  967. self.control.hasClicked = true;
  968. self.animation.animateKid = true;
  969. game.animation.play(self.kid.animation[0]);
  970. }
  971. },
  972. /**
  973. * (in gameMode 'b') Function called when cursor is over a valid circle
  974. *
  975. * @param {object} cur circle the cursor is over
  976. */
  977. overCircleHandler: function (cur) {
  978. if (!self.control.hasClicked) {
  979. document.body.style.cursor = 'pointer';
  980. for (let i in self.circles.list) {
  981. const alpha = i <= cur.index ? 1 : 0.4;
  982. self.circles.list[i].alpha = alpha;
  983. if (showFractions) {
  984. self.circles.list[i].info.fraction.labels.forEach((lbl) => {
  985. if (lbl) lbl.alpha = alpha;
  986. });
  987. }
  988. }
  989. }
  990. },
  991. /**
  992. * (in gameMode 'b') Function called when cursor leaves a valid circle
  993. */
  994. outCircleHandler: function () {
  995. if (!self.control.hasClicked) {
  996. document.body.style.cursor = 'auto';
  997. const alpha = 1;
  998. self.circles.list.forEach((circle) => {
  999. circle.alpha = alpha;
  1000. if (showFractions) {
  1001. circle.info.fraction.labels.forEach((lbl) => {
  1002. if (lbl) lbl.alpha = alpha;
  1003. });
  1004. }
  1005. });
  1006. }
  1007. },
  1008. /** TODO */
  1009. isOverBlock: function (x, blockX, blockWidth) {
  1010. if (
  1011. ((gameOperation === 'plus' || gameOperation === 'mixed') &&
  1012. x >= blockX &&
  1013. x < blockX + blockWidth) ||
  1014. (gameOperation === 'minus' && x <= blockX && x > blockX + blockWidth)
  1015. )
  1016. return true;
  1017. return false;
  1018. },
  1019. /** TODO */
  1020. isOverRoad: function (x, y, roadX, roadWidth) {
  1021. if (y > 150) {
  1022. if (
  1023. ((gameOperation === 'plus' || gameOperation === 'mixed') &&
  1024. x >= roadX &&
  1025. x < roadX + roadWidth) ||
  1026. (gameOperation === 'minus' &&
  1027. x <= roadX &&
  1028. x > roadX + roadWidth * self.control.directionModifier)
  1029. )
  1030. return true;
  1031. }
  1032. return false;
  1033. },
  1034. /** TODO */
  1035. fillCurrentBlock: function (x, blockX, block) {
  1036. block.fillColor =
  1037. ((gameOperation === 'plus' || gameOperation === 'mixed') &&
  1038. x > blockX) ||
  1039. (gameOperation === 'minus' && x < blockX)
  1040. ? colors.red
  1041. : 'transparent';
  1042. },
  1043. },
  1044. events: {
  1045. /**
  1046. * Called by mouse click event
  1047. *
  1048. * @param {object} mouseEvent contains the mouse click coordinates
  1049. */
  1050. onInputDown: function (mouseEvent) {
  1051. const x = game.math.getMouse(mouseEvent).x;
  1052. const y = game.math.getMouse(mouseEvent).y;
  1053. // GAME MODE A : click road
  1054. if (gameMode === 'a') {
  1055. const isValidX = self.utils.isOverRoad(
  1056. x,
  1057. y,
  1058. self.road.x,
  1059. self.road.width
  1060. );
  1061. if (isValidX) {
  1062. self.utils.clickCircleHandler(
  1063. self.blocks.cur.x + self.blocks.cur.width
  1064. );
  1065. document.body.style.cursor = 'auto';
  1066. }
  1067. }
  1068. // GAME MODE B : click circle
  1069. if (gameMode === 'b') {
  1070. self.circles.list.forEach((circle) => {
  1071. const isValid =
  1072. game.math.distanceToPointer(
  1073. x,
  1074. circle.xWithAnchor,
  1075. y,
  1076. circle.yWithAnchor
  1077. ) <=
  1078. (circle.diameter / 2) * circle.scale;
  1079. if (isValid) self.utils.clickCircleHandler(circle);
  1080. });
  1081. }
  1082. // Continue button
  1083. if (self.control.showEndInfo) {
  1084. if (game.math.isOverIcon(x, y, self.ui.continue.button)) {
  1085. if (audioStatus) game.audio.popSound.play();
  1086. self.utils.endLevel();
  1087. }
  1088. }
  1089. navigation.onInputDown(x, y);
  1090. game.render.all();
  1091. },
  1092. /**
  1093. * Called by mouse move event
  1094. *
  1095. * @param {object} mouseEvent contains the mouse move coordinates
  1096. */
  1097. onInputOver: function (mouseEvent) {
  1098. const x = game.math.getMouse(mouseEvent).x;
  1099. const y = game.math.getMouse(mouseEvent).y;
  1100. let isOverCircle = false;
  1101. if (gameMode === 'a' && !self.control.hasClicked) {
  1102. const isValidX = self.utils.isOverRoad(
  1103. x,
  1104. y,
  1105. self.road.x,
  1106. self.road.width
  1107. );
  1108. if (isValidX) {
  1109. // GAME MODE A : kite follow mouse
  1110. self.blocks.cur = self.blocks.list[0];
  1111. self.blocks.list.forEach((cur) => {
  1112. self.utils.fillCurrentBlock(x, cur.x, cur);
  1113. if (self.utils.isOverBlock(x, cur.x, cur.width, cur))
  1114. self.blocks.cur = cur;
  1115. });
  1116. const newX = self.blocks.cur.x + self.blocks.cur.width;
  1117. self.kite.x = newX;
  1118. self.kite_line.x = newX;
  1119. document.body.style.cursor = 'pointer';
  1120. } else {
  1121. document.body.style.cursor = 'auto';
  1122. }
  1123. }
  1124. // GAME MODE B : hover circle
  1125. if (gameMode === 'b' && !self.control.hasClicked) {
  1126. self.circles.list.forEach((circle) => {
  1127. const isValid =
  1128. game.math.distanceToPointer(
  1129. x,
  1130. circle.xWithAnchor,
  1131. y,
  1132. circle.yWithAnchor
  1133. ) <=
  1134. (circle.diameter / 2) * circle.scale;
  1135. if (isValid) {
  1136. self.utils.overCircleHandler(circle);
  1137. isOverCircle = true;
  1138. }
  1139. });
  1140. if (!isOverCircle) self.utils.outCircleHandler();
  1141. }
  1142. // Continue button
  1143. if (self.control.showEndInfo) {
  1144. if (game.math.isOverIcon(x, y, self.ui.continue.button)) {
  1145. // If pointer is over icon
  1146. document.body.style.cursor = 'pointer';
  1147. self.ui.continue.button.scale =
  1148. self.ui.continue.button.initialScale * 1.1;
  1149. self.ui.continue.text.style = textStyles.btnLg;
  1150. } else {
  1151. // If pointer is not over icon
  1152. document.body.style.cursor = 'auto';
  1153. self.ui.continue.button.scale =
  1154. self.ui.continue.button.initialScale * 1;
  1155. self.ui.continue.text.style = textStyles.btn;
  1156. }
  1157. }
  1158. navigation.onInputOver(x, y);
  1159. game.render.all();
  1160. },
  1161. },
  1162. fetch: {
  1163. /**
  1164. * Saves players data after level ends - to be sent to database <br>
  1165. *
  1166. * Attention: the 'line_' prefix data table must be compatible to data table fields (MySQL server)
  1167. *
  1168. * @see /php/squareOne.js
  1169. */
  1170. postScore: function () {
  1171. // Creates string that is going to be sent to db
  1172. const data =
  1173. '&line_game=' +
  1174. gameShape +
  1175. '&line_mode=' +
  1176. gameMode +
  1177. '&line_oper=' +
  1178. gameOperation +
  1179. '&line_leve=' +
  1180. gameDifficulty +
  1181. '&line_posi=' +
  1182. curMapPosition +
  1183. '&line_resu=' +
  1184. self.control.isCorrect +
  1185. '&line_time=' +
  1186. game.timer.elapsed +
  1187. '&line_deta=' +
  1188. 'numCircles:' +
  1189. self.circles.list.length +
  1190. ', valCircles: ' +
  1191. self.control.divisorsList +
  1192. ' kiteX: ' +
  1193. self.kite_line.x +
  1194. ', selIndex: ' +
  1195. self.control.selectedIndex;
  1196. // FOR MOODLE
  1197. sendToDatabase(data);
  1198. },
  1199. },
  1200. };