123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149 |
- const squareOne = {
- control: undefined,
- default: undefined,
- ui: undefined,
- animation: undefined,
- tractor: undefined,
- stack: undefined,
- floor: undefined,
-
- create: function () {
- const truckWidth = 201;
- const divisor = gameDifficulty == 3 ? 4 : gameDifficulty;
- let lineColor = undefined;
- let fillColor = undefined;
- if (gameOperation === 'minus') {
- lineColor = colors.red;
- fillColor = colors.redLight;
- } else {
- lineColor = colors.green;
- fillColor = colors.greenLight;
- }
- this.ui = {
- arrow: undefined,
- help: undefined,
- message: undefined,
- continue: {
-
- button: undefined,
- text: undefined,
- },
- };
- this.control = {
- direc: gameOperation == 'minus' ? -1 : 1,
- divisorsList: '',
- lineWidth: 3,
- hasClicked: false,
- checkAnswer: false,
- isCorrect: false,
- count: 0,
- };
- this.animation = {
- animateTractor: false,
- animateEnding: false,
- speed: 2 * this.control.direc,
- };
- this.default = {
- width: 172,
- height: 70,
- x0:
- gameOperation == 'minus'
- ? context.canvas.width - truckWidth
- : truckWidth,
- y0: context.canvas.height - game.image['floor_grass'].width * 1.5,
- };
- this.default.arrowX0 =
- self.default.x0 + self.default.width * self.control.direc;
- this.default.arrowXEnd =
- self.default.arrowX0 + self.default.width * self.control.direc * 8;
- renderBackground();
-
- if (moodle) {
- navigation.add.right(['audio']);
- } else {
- navigation.add.left(['back', 'menu', 'show_answer'], 'customMenu');
- navigation.add.right(['audio']);
- }
- this.stack = {
- list: [],
-
- selectedIndex: undefined,
-
- correctIndex: undefined,
-
- curIndex: 0,
-
- curBlockEndX: undefined,
- };
- this.floor = {
- list: [],
-
- selectedIndex: undefined,
-
- correctIndex: undefined,
-
- curIndex: -1,
-
- correctX: undefined,
- };
- let [restart, correctXA] = this.utils.renderStackedBlocks(
- this.control.direc,
- lineColor,
- fillColor,
- this.control.lineWidth,
- divisor
- );
- this.utils.renderFloorBlocks(
- this.control.direc,
- lineColor,
- this.control.lineWidth,
- divisor,
- correctXA
- );
- this.utils.renderCharacters();
- this.utils.renderMainUI();
- this.restart = restart;
- if (!this.restart) {
- game.timer.start();
- game.event.add('click', this.events.onInputDown);
- game.event.add('mousemove', this.events.onInputOver);
- }
- },
-
- update: function () {
-
- if (self.animation.animateTractor) {
- self.utils.animateTractorHandler();
- }
-
- if (self.control.checkAnswer) {
- self.utils.checkAnswerHandler();
- }
-
- if (self.animation.animateEnding) {
- self.utils.animateEndingHandler();
- }
- game.render.all();
- },
- utils: {
-
-
- renderStackedBlocks: (direc, lineColor, fillColor, lineWidth, divisor) => {
- let restart = false;
- let hasBaseDifficulty = false;
- const max = gameMode == 'b' ? 10 : curMapPosition + 4;
- const total = game.math.randomInRange(curMapPosition + 2, max);
- const renderLabels = (curDivisor, x, y, i, curBlock) => {
- let font, curFractionItems;
- const fractionPartsList = [];
- if (curDivisor === 1) {
- font = textStyles.h2_;
- curFractionItems = [
- {
- x: x,
- y: self.default.y0 - i * y - 20,
- text: '1',
- },
- {
- x: x - 25,
- y: self.default.y0 - i * y - 27,
- text: gameOperation === 'minus' ? '-' : '',
- },
- null,
- ];
- } else {
- font = textStyles.p_;
- curFractionItems = [
- {
- x: x,
- y: self.default.y0 - i * y - 40,
- text: '1\n' + curDivisor,
- },
- {
- x: x - 25,
- y: self.default.y0 - i * y - 27,
- text: gameOperation === 'minus' ? '-' : '',
- },
- {
- x0: x,
- y: self.default.y0 - i * y - 35,
- x1: x + 25,
- lineWidth: 2,
- color: lineColor,
- },
- ];
- }
- font = { ...font, font: 'bold ' + font.font, fill: lineColor };
- for (let i = 0; i < 2; i++) {
- const item = game.add.text(
- curFractionItems[i].x,
- curFractionItems[i].y,
- curFractionItems[i].text,
- font
- );
- item.lineHeight = 30;
- fractionPartsList.push(item);
- }
- if (curFractionItems[2]) {
- const line = game.add.geom.line(
- curFractionItems[2].x0,
- curFractionItems[2].y,
- curFractionItems[2].x1,
- curFractionItems[2].y,
- curFractionItems[2].lineWidth,
- curFractionItems[2].color
- );
- line.anchor(0.5, 0);
- fractionPartsList.push(line);
- } else {
- fractionPartsList.push(null);
- }
- curBlock.fraction = {
- labels: fractionPartsList,
- nominator: direc,
- denominator: curDivisor,
- };
- if (!showFractions) {
- curBlock.fraction.labels.forEach((label) => {
- if (label) label.alpha = 0;
- });
- }
- };
- const shouldRestart = (hasBaseDifficulty, correctXA) => {
- if (
- !hasBaseDifficulty ||
- (gameOperation == 'plus' &&
- (correctXA < self.default.x0 + self.default.width ||
- correctXA > self.default.x0 + 8 * self.default.width)) ||
- (gameOperation == 'minus' &&
- (correctXA < self.default.x0 - 8 * self.default.width ||
- correctXA > self.default.x0 - self.default.width))
- )
- return true;
- return false;
- };
- let correctXA = self.default.x0 + self.default.width * direc;
-
- for (let i = 0; i < total; i++) {
- let curDivisor = game.math.randomInRange(1, gameDifficulty);
- if (curDivisor === gameDifficulty) hasBaseDifficulty = true;
- if (curDivisor === 3) curDivisor = 4;
- const curBlockWidth = self.default.width / curDivisor;
- self.control.divisorsList += curDivisor + ',';
- correctXA += curBlockWidth * direc;
- const curBlock = game.add.geom.rect(
- self.default.x0,
- self.default.y0 - i * self.default.height - lineWidth,
- curBlockWidth,
- self.default.height,
- fillColor,
- 1,
- lineColor,
- lineWidth
- );
- curBlock.anchor(gameOperation === 'minus' ? 1 : 0, 1);
- curBlock.blockValue = divisor / curDivisor;
-
- if (gameMode === 'b') curBlock.blockIndex = i;
-
- self.stack.list.push(curBlock);
-
- const x = self.default.x0 + (curBlockWidth + 40) * direc;
- const y = self.default.height + 1;
- renderLabels(curDivisor, x, y, i, curBlock);
- }
-
- if (gameMode === 'a') self.stack.selectedIndex = total - 1;
-
-
- self.stack.curBlockEndX =
- self.default.x0 + self.stack.list[0].width * direc;
-
- restart = shouldRestart(hasBaseDifficulty, correctXA);
- if (isDebugMode) {
- console.log(
- `------------------------------
- \nGame Map Position: ${curMapPosition}
- \n------------------------ setup stack
- \nMin blocks (curMapPosition + 2): ${curMapPosition + 2}
- ${
- gameMode === 'a'
- ? `\nMax blocks (A mode) (curMapPosition + 4): ${
- curMapPosition + 4
- }`
- : '\nMax blocks (B mode): 10'
- }
- \nTotal blocks (random min..max): ${total}
- \nPossible divisors (random 1..gameDifficulty / if 3 then 4): 1..${
- gameDifficulty == 3 ? 4 : gameDifficulty
- }
- \n(Checks if has 1/diff or floor x is out of bounds)
- `
- );
- if (restart) console.log('Error during level setup. Retrying...');
- else console.log('Successfull level setup!');
- }
- return [restart, correctXA];
- },
- /**
- * Create floor blocks for the level in create()
- */
- renderFloorBlocks: (direc, lineColor, lineWidth, divisor, correctXA) => {
- let correctXB = 0;
- let total = 8 * divisor; // Number of floor blocks
- const blockWidth = self.default.width / divisor; // Width of each floor block
- const renderLabels = () => {
- for (let i = 0; i <= 8; i++) {
- const x = self.default.x0 + (i + 1) * self.default.width * direc;
- const y = self.default.y0 + self.default.height + 45 - 65;
- let numberX = x;
- let numberText = i;
- let numberCircleSize = 45;
- let numberFont = {
- ...textStyles.h3_,
- fill: lineColor,
- font: 'bold ' + textStyles.h3_.font,
- };
- if (gameOperation === 'minus') {
- numberX = i !== 0 ? x - 2 : x;
- numberText = -i;
- numberCircleSize = 45;
- numberFont.font = 'bold ' + textStyles.h4_.font;
- }
- game.add.geom
- .circle(x, y, numberCircleSize, undefined, 0, colors.white, 1)
- .anchor(0, 0.25);
- game.add.text(numberX, y + 2, numberText, numberFont);
- }
- };
- // If game is type (b), select a random floor x position
- if (gameMode === 'b') {
- self.stack.correctIndex = game.math.randomInRange(
- 0,
- self.stack.list.length - 1
- ); // Correct stacked index
- correctXB = self.default.x0 + self.default.width * direc;
- for (let i = 0; i <= self.stack.correctIndex; i++) {
- correctXB += self.stack.list[i].width * direc; // Equivalent x position on the floor
- }
- }
- // Render floor blocks
- for (let i = 0, shouldUpdateIndex = true; i < total; i++) {
- const curX =
- self.default.x0 + (self.default.width + i * blockWidth) * direc;
- // If game is type (a), iterate until find equivalent floor index
- if (gameMode === 'a' && shouldUpdateIndex) {
- if (
- (gameOperation == 'plus' && curX >= correctXA) ||
- (gameOperation == 'minus' && curX <= correctXA)
- ) {
- self.floor.correctIndex = i - 1; // Set index of correct floor block
- shouldUpdateIndex = false;
- }
- }
- // If game is type (b), stop iterating after find equivalent floor block
- if (gameMode === 'b') {
- if (
- (gameOperation == 'plus' && curX >= correctXB) ||
- (gameOperation == 'minus' && curX <= correctXB)
- ) {
- total = i;
- break;
- }
- }
- // Render floor block
- const curBlock = game.add.geom.rect(
- curX,
- self.default.y0,
- blockWidth,
- self.default.height + 10,
- colors.blueBgInsideLevel,
- 1,
- colors.gray,
- lineWidth
- );
- const anchor = gameOperation == 'minus' ? 1 : 0;
- curBlock.anchor(anchor, 0);
- curBlock.blockValue = 1;
- // If game is type (a), add events to floor blocks
- if (gameMode === 'a') {
- curBlock.fillColor = 'transparent';
- curBlock.blockIndex = i;
- }
- // Add current block to list
- self.floor.list.push(curBlock);
- }
- if (gameMode === 'b') {
- self.floor.selectedIndex = total - 1; // Computer generated correct floor index
- self.floor.correctX = correctXB;
- } else {
- self.floor.correctX = correctXA;
- }
- // Creates labels on the floor to display the numbers
- renderLabels();
- if (isDebugMode) {
- console.log(
- `------------------------ setup floor
- \nDivisor (gameDifficulty / if 3 then 4): ${divisor}
- ${
- gameMode === 'a'
- ? `\nTotal blocks (A) (divisor * 8): ${divisor} * 8 = ${
- divisor * 8
- }`
- : `\nTotal blocks (B) (((equiv. to stack))): ${self.floor.list.length}`
- }
- ${
- gameMode === 'a'
- ? `\nCorrect index (A) (((equival. to stack))): ${self.floor.correctIndex}`
- : ''
- }
- `
- );
- }
- },
- renderCharacters: () => {
- self.tractor = game.add.sprite(
- self.default.x0,
- self.default.y0,
- 'tractor',
- 0,
- 1
- );
- if (gameOperation == 'plus') {
- self.tractor.anchor(1, 1);
- self.tractor.animation = ['move', [0, 1, 2, 3, 4], 4];
- } else {
- self.tractor.anchor(0, 1);
- self.tractor.animation = ['move', [5, 6, 7, 8, 9], 4];
- self.tractor.curFrame = 5;
- }
- },
- renderMainUI: () => {
- // Help pointer
- self.ui.help = game.add.image(0, 0, 'pointer', 1.7, 0);
- if (gameMode === 'b') self.ui.help.anchor(0.25, 0.7);
- else self.ui.help.anchor(0.2, 0);
- // Selection Arrow
- if (gameMode === 'a') {
- self.ui.arrow = game.add.image(
- self.default.arrowX0,
- self.default.y0,
- 'arrow_down',
- 1.5
- );
- self.ui.arrow.anchor(0.5, 1);
- self.ui.arrow.alpha = 0.5;
- }
- // Intro text
- const correctMessage =
- gameMode === 'a'
- ? game.lang.squareOne_intro_a
- : game.lang.squareOne_intro_b;
- const treatedMessage = correctMessage.split('\\n');
- const font = textStyles.h1_;
- self.ui.message = [];
- self.ui.message.push(
- game.add.text(
- context.canvas.width / 2,
- 170,
- treatedMessage[0] + '\n' + treatedMessage[1],
- font
- )
- );
- },
- renderOperationUI: () => {
- let validBlocks = [];
- const lastValidIndex =
- gameMode === 'a' ? self.stack.curIndex : self.stack.selectedIndex;
- for (let i = 0; i <= lastValidIndex; i++) {
- validBlocks.push(self.stack.list[i]);
- }
- const font = textStyles.fraction;
- font.fill = colors.green;
- const nominators = [];
- const denominators = [];
- const renderList = [];
- const padding = 100;
- const offsetX = 100;
- const widthOfChar = 35;
- const x0 = padding;
- const y0 = context.canvas.height / 3;
- let nextX = x0;
- const cardHeight = 400;
- const cardX = x0 - padding;
- const cardY = y0; // + cardHeight / 4;
- // Card
- const card = game.add.geom.rect(
- cardX,
- cardY,
- 0,
- cardHeight,
- colors.blueLight,
- 0.5,
- colors.blueDark,
- 8
- );
- card.id = 'card';
- card.anchor(0, 0.5);
- renderList.push(card);
- // Fraction list
- for (let i in validBlocks) {
- const curFraction = validBlocks[i].fraction;
- const curFractionString = curFraction.labels[0].name;
- let curFractionSign = i !== '0' ? '+' : '';
- if (curFraction.labels[1].name === '-') {
- curFractionSign = '-';
- font.fill = colors.red;
- }
- const fraction = game.add.text(
- x0 + i * offsetX + offsetX / 2,
- curFractionString === '1' ? y0 + 40 : y0,
- curFractionString,
- font,
- 60
- );
- fraction.lineHeight = 70;
- renderList.push(
- game.add.text(x0 + i * offsetX, y0 + 35, curFractionSign, font)
- );
- renderList.push(fraction);
- renderList.push(
- game.add.text(
- x0 + offsetX / 2 + i * offsetX,
- y0,
- curFractionString === '1' ? '' : '_',
- font
- )
- );
- nominators.push(curFraction.nominator);
- denominators.push(curFraction.denominator);
- }
- // Setup for fraction operation with least common multiple
- font.fill = colors.black;
- const updatedNominators = [];
- const mmc = game.math.mmcArray(denominators);
- let resultNominator = 0;
- for (let i in nominators) {
- const temp = nominators[i] * (mmc / denominators[i]);
- updatedNominators.push(temp);
- resultNominator += temp;
- }
- const resultNominatorUnsigned =
- resultNominator < 0 ? -resultNominator : resultNominator;
- const resultAux = resultNominator / mmc;
- const result =
- ('' + resultAux).length > 4 ? resultAux.toFixed(2) : resultAux;
- // Fraction operation with least common multiple
- nextX = x0 + validBlocks.length * offsetX + 20;
- // Fraction result
- renderList.push(game.add.text(nextX, y0 + 35, '=', font));
- font.align = 'center';
- nextX += offsetX;
- if (result < 0) {
- nextX += 60;
- renderList.push(game.add.text(nextX - 80, y0 + 35, '-', font));
- nextX -= 30;
- }
- const fractionResult = game.add.text(
- nextX,
- mmc === 1 || resultNominatorUnsigned === 0 ? y0 + 40 : y0,
- mmc === 1 || resultNominatorUnsigned === 0
- ? resultNominatorUnsigned
- : resultNominatorUnsigned + '\n' + mmc,
- font
- );
- fractionResult.lineHeight = 70;
- renderList.push(fractionResult);
- const fractionLine = game.add.geom.line(
- nextX,
- y0 + 15,
- nextX + 60,
- y0 + 15,
- 4,
- colors.black,
- mmc === 1 || resultNominatorUnsigned === 0 ? 0 : 1
- );
- fractionLine.anchor(0.5, 0);
- renderList.push(fractionLine);
- // Fraction result simplified setup
- const mdcAux = game.math.mdc(resultNominator, mmc);
- const mdc = mdcAux < 0 ? -mdcAux : mdcAux;
- if (mdc !== 1 && resultNominatorUnsigned !== 0) {
- nextX += offsetX;
- renderList.push(game.add.text(nextX, y0 + 35, '=', font));
- nextX += offsetX;
- renderList.push(
- game.add.text(nextX - 50, y0 + 35, result > 0 ? '' : '-', font)
- );
- renderList.push(
- game.add.text(nextX, y0, resultNominatorUnsigned / mdc, font)
- );
- renderList.push(game.add.text(nextX, y0 + 70, mmc / mdc, font));
- const fractionLine = game.add.geom.line(
- nextX,
- y0 + 15,
- nextX + 60,
- y0 + 15,
- 4,
- colors.black
- );
- fractionLine.anchor(0.5, 0);
- renderList.push(fractionLine);
- }
- // Decimal result
- let resultWidth = '_'.length * widthOfChar;
- const cardWidth = nextX - x0 + resultWidth + padding * 2;
- card.width = cardWidth;
- const endSignX = (context.canvas.width - cardWidth) / 2 + cardWidth;
- // Center Card
- moveList(renderList, (context.canvas.width - cardWidth) / 2, 0);
- self.fractionOperationUI = renderList;
- return endSignX;
- },
- renderEndUI: () => {
- let btnColor = colors.green;
- let btnText = game.lang.continue;
- if (!self.control.isCorrect) {
- btnColor = colors.red;
- btnText = game.lang.retry;
- }
- // continue button
- self.ui.continue.button = game.add.geom.rect(
- context.canvas.width / 2,
- context.canvas.height / 2 + 100,
- 450,
- 100,
- btnColor
- );
- self.ui.continue.button.anchor(0.5, 0.5);
- self.ui.continue.text = game.add.text(
- context.canvas.width / 2,
- context.canvas.height / 2 + 16 + 100,
- btnText,
- textStyles.btn
- );
- },
- // UPDATE HANDLERS
- animateTractorHandler: () => {
- // Move
- self.tractor.x += self.animation.speed;
- self.stack.list.forEach((block) => (block.x += self.animation.speed));
- // If the current block is 1/n (not 1/1) we need to consider the
- // extra space the truck needs to pass after the blocks falls but
- // before reaching the next block
- const curBlockExtra =
- (self.default.width - self.stack.list[self.stack.curIndex].width) *
- self.control.direc;
- const canLowerBlocks =
- (gameOperation == 'plus' &&
- self.stack.list[0].x >= self.stack.curBlockEndX + curBlockExtra) ||
- (gameOperation == 'minus' &&
- self.stack.list[0].x <= self.stack.curBlockEndX + curBlockExtra);
- if (canLowerBlocks) {
- const endAnimation = self.utils.lowerBlocksHandler();
- if (!endAnimation) {
- self.animation.animateTractor = false;
- self.control.checkAnswer = true;
- }
- }
- },
- lowerBlocksHandler: () => {
- self.floor.curIndex += self.stack.list[self.stack.curIndex].blockValue;
- const tooManyStackBlocks = self.floor.curIndex > self.floor.selectedIndex;
- if (tooManyStackBlocks) return false;
- // fill floor
- for (let i = 0; i <= self.floor.curIndex; i++) {
- self.floor.list[i].fillColor = 'transparent';
- }
- // lower blocks
- self.stack.list.forEach((block) => {
- block.y += self.default.height;
- });
- // hide current block
- self.stack.list[self.stack.curIndex].alpha = 0;
- const isLastFloorBlock = self.floor.curIndex === self.floor.selectedIndex;
- const notEnoughStackBlocks =
- self.stack.curIndex === self.stack.list.length - 1;
- if (isLastFloorBlock || notEnoughStackBlocks) return false;
- // update stack blocks
- self.stack.curIndex++;
- self.stack.curBlockEndX +=
- self.stack.list[self.stack.curIndex].width * self.control.direc;
- return true;
- },
- checkAnswerHandler: () => {
- game.timer.stop();
- game.animation.stop(self.tractor.animation[0]);
- if (gameMode === 'a') self.ui.arrow.alpha = 0;
- self.control.isCorrect =
- gameMode === 'a'
- ? self.floor.selectedIndex === self.floor.correctIndex
- : self.stack.selectedIndex === self.stack.correctIndex;
- const x = self.utils.renderOperationUI();
- // Give feedback to player and turns on sprite animation
- if (self.control.isCorrect) {
- completedLevels++; // Increases number os finished levels
- if (audioStatus) game.audio.okSound.play();
- game.animation.play(self.tractor.animation[0]);
- game.add
- .image(x + 50, context.canvas.height / 3, 'answer_correct')
- .anchor(0.5, 0.5);
- if (isDebugMode) console.log('Completed Levels: ' + completedLevels);
- } else {
- if (audioStatus) game.audio.errorSound.play();
- game.add
- .image(x, context.canvas.height / 3, 'answer_wrong')
- .anchor(0.5, 0.5);
- }
- self.fetch.postScore();
- self.control.checkAnswer = false;
- self.animation.animateEnding = true;
- },
- animateEndingHandler: () => {
- // ANIMATE ENDING
- self.control.count++;
- // If CORRECT ANSWER runs final tractor animation (else tractor desn't move, just wait)
- if (self.control.isCorrect) self.tractor.x += self.animation.speed;
- if (self.control.count === 100) {
- self.utils.renderEndUI();
- self.control.showEndInfo = true;
- if (self.control.isCorrect) canGoToNextMapPosition = true;
- else canGoToNextMapPosition = false;
- }
- },
- endLevel: () => {
- game.state.start('map');
- },
- // INFORMATION
- /**
- * Display correct answer
- */
- showAnswer: () => {
- if (!self.control.hasClicked) {
- // On gameMode (a)
- if (gameMode === 'a') {
- const aux = self.floor.list[0];
- self.ui.help.x =
- self.floor.correctX - (aux.width / 2) * self.control.direc;
- self.ui.help.y = self.default.y0;
- // On gameMode (b)
- } else {
- const aux = self.stack.list[self.stack.correctIndex];
- self.ui.help.x = aux.x + (aux.width / 2) * self.control.direc;
- self.ui.help.y = aux.y;
- }
- self.ui.help.alpha = 0.7;
- }
- },
- // EVENT HANDLERS
- /**
- * Function called by self.events.onInputDown() when player clicks on a valid rectangle.
- */
- clickHandler: (clickedIndex, curSet) => {
- if (!self.control.hasClicked && !self.animation.animateEnding) {
- document.body.style.cursor = 'auto';
- // Play beep sound
- if (audioStatus) game.audio.popSound.play();
- // Disable show answer nav icon
- navigation.disableIcon(navigation.showAnswerIcon);
- // Hide intro message
- self.ui.message[0].alpha = 0;
- // Hide labels
- if (showFractions) {
- self.stack.list.forEach((block) => {
- block.fraction.labels.forEach((lbl) => {
- if (lbl) lbl.alpha = 0;
- });
- });
- }
- // Hide solution pointer
- if (self.ui.help != undefined) self.ui.help.alpha = 0;
- // Hide unselected blocks
- for (let i = curSet.list.length - 1; i > clickedIndex; i--) {
- curSet.list[i].alpha = 0;
- }
- // Save selected index
- curSet.selectedIndex = clickedIndex;
- if (gameMode === 'a') {
- self.ui.arrow.alpha = 0;
- } else {
- // update list size
- self.stack.list.length = curSet.selectedIndex + 1;
- }
- // Turn tractor animation on
- game.animation.play(self.tractor.animation[0]);
- self.animation.animateTractor = true;
- self.control.hasClicked = true;
- }
- },
- /**
- * Function called by self.events.onInputOver() when cursor is over a valid rectangle
- *
- * @param {object} cur rectangle the cursor is over
- */
- overHandler: (cur) => {
- if (!self.control.hasClicked) {
- document.body.style.cursor = 'pointer';
- if (gameMode === 'a') {
- for (let i in self.floor.list) {
- self.floor.list[i].fillColor =
- i <= cur.blockIndex ? colors.blueBgInsideLevel : 'transparent';
- }
- self.floor.selectedIndex = cur.blockIndex;
- } else {
- for (let i in self.stack.list) {
- const alpha = i <= cur.blockIndex ? 1 : 0.4;
- self.stack.list[i].alpha = alpha;
- if (showFractions) {
- self.stack.list[i].fraction.labels.forEach((lbl) => {
- if (lbl) lbl.alpha = alpha;
- });
- }
- }
- self.stack.selectedIndex = cur.blockIndex;
- }
- }
- },
- /**
- * Function called by self.events.onInputOver() when cursos is out of a valid rectangle
- */
- outHandler: () => {
- if (!self.control.hasClicked) {
- document.body.style.cursor = 'auto';
- if (gameMode === 'a') {
- for (let i in self.floor.list) {
- self.floor.list[i].fillColor = 'transparent';
- }
- self.floor.selectedIndex = undefined;
- } else {
- for (let i in self.stack.list) {
- self.stack.list[i].alpha = 1;
- if (showFractions) {
- self.stack.list[i].fraction.labels.forEach((lbl) => {
- if (lbl) lbl.alpha = 1;
- });
- }
- }
- self.stack.selectedIndex = undefined;
- }
- }
- },
- },
- events: {
- /**
- * Called by mouse click event
- *
- * @param {object} mouseEvent contains the mouse click coordinates
- */
- onInputDown: (mouseEvent) => {
- const x = game.math.getMouse(mouseEvent).x;
- const y = game.math.getMouse(mouseEvent).y;
- // click blocks
- const curSet = gameMode == 'a' ? self.floor : self.stack;
- for (let i in curSet.list) {
- if (game.math.isOverIcon(x, y, curSet.list[i])) {
- self.utils.clickHandler(+i, curSet);
- break;
- }
- }
- // Continue button
- if (self.control.showEndInfo) {
- if (game.math.isOverIcon(x, y, self.ui.continue.button)) {
- if (audioStatus) game.audio.popSound.play();
- self.utils.endLevel();
- }
- }
- navigation.onInputDown(x, y);
- game.render.all();
- },
- /**
- * Called by mouse move event
- *
- * @param {object} mouseEvent contains the mouse move coordinates
- */
- onInputOver: (mouseEvent) => {
- const x = game.math.getMouse(mouseEvent).x;
- const y = game.math.getMouse(mouseEvent).y;
- let isOverFloor = false;
- let isOverStack = false;
- if (gameMode === 'a') {
- self.floor.list.forEach((cur) => {
- // hover floor blocks
- if (game.math.isOverIcon(x, y, cur)) {
- isOverFloor = true;
- self.utils.overHandler(cur);
- }
- // move arrow
- if (
- !self.control.hasClicked &&
- !self.animation.animateEnding &&
- game.math.isOverIcon(x, self.default.y0, cur)
- ) {
- self.ui.arrow.x = x;
- }
- });
- if (!isOverFloor) self.utils.outHandler('a');
- }
- if (gameMode === 'b') {
- // hover stack blocks
- self.stack.list.forEach((cur) => {
- if (game.math.isOverIcon(x, y, cur)) {
- isOverStack = true;
- self.utils.overHandler(cur);
- }
- });
- if (!isOverStack) self.utils.outHandler('b');
- }
- // Continue button
- if (self.control.showEndInfo) {
- if (game.math.isOverIcon(x, y, self.ui.continue.button)) {
- // If pointer is over icon
- document.body.style.cursor = 'pointer';
- self.ui.continue.button.scale =
- self.ui.continue.button.initialScale * 1.1;
- self.ui.continue.text.style = textStyles.btnLg;
- } else {
- // If pointer is not over icon
- document.body.style.cursor = 'auto';
- self.ui.continue.button.scale =
- self.ui.continue.button.initialScale * 1;
- self.ui.continue.text.style = textStyles.btn;
- }
- }
- navigation.onInputOver(x, y);
- game.render.all();
- },
- },
- fetch: {
- /**
- * Saves players data after level ends - to be sent to database <br>
- *
- * Attention: the 'line_' prefix data table must be compatible to data table fields (MySQL server)
- *
- * @see /php/save.php
- */
- postScore: () => {
- // Creates string that is going to be sent to db
- const data =
- '&line_game=' +
- gameShape +
- '&line_mode=' +
- gameMode +
- '&line_oper=' +
- gameOperation +
- '&line_leve=' +
- gameDifficulty +
- '&line_posi=' +
- curMapPosition +
- '&line_resu=' +
- self.control.isCorrect +
- '&line_time=' +
- game.timer.elapsed +
- '&line_deta=' +
- 'numBlocks:' +
- self.stack.list.length +
- ', valBlocks: ' +
- self.control.divisorsList + // Ends in ','
- ' blockIndex: ' +
- self.stack.selectedIndex +
- ', floorIndex: ' +
- self.floor.selectedIndex;
- // FOR MOODLE
- sendToDatabase(data);
- },
- },
- };
|