123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317 |
- const circleOne = {
- ui: undefined,
- control: undefined,
- animation: undefined,
- road: undefined,
- circles: undefined,
- kid: undefined,
- kite: undefined,
- kite_line: undefined,
- walkedPath: undefined,
-
- create: function () {
- this.ui = {
- help: undefined,
- message: undefined,
- continue: {
-
- button: undefined,
- text: undefined,
- },
- };
- const roadMapper = () => {
- const _pointWidth = (game.sprite['map_place'].width / 2) * 0.45;
- const defaultX = 150;
- const defaultY =
- context.canvas.height - game.image['floor_grass'].width * 1.5;
- const defaultWidth = 1620;
-
- const x =
- gameOperation === 'minus'
- ? context.canvas.width - defaultX - _pointWidth / 2
- : defaultX + _pointWidth / 2;
- const y = defaultY;
- const width = defaultWidth - _pointWidth;
- const _divisions = 5;
- const _subdivisions = gameDifficulty === 3 ? 4 : gameDifficulty;
- const numberOfBlocks = _divisions * _subdivisions;
- return { x, y, width, numberOfBlocks, defaultX, defaultY, defaultWidth };
- };
- this.road = roadMapper();
- const blocksMapper = () => {
- let width = this.road.width / this.road.numberOfBlocks;
- if (gameOperation === 'minus') width = -width;
- const height = 50;
- return { width, height, list: [], cur: undefined };
- };
- this.blocks = blocksMapper();
- this.walkedPath = [];
- const pointWidth = (game.sprite['map_place'].width / 2) * 0.45;
- const distanceBetweenPoints =
- (context.canvas.width - this.road.defaultX * 2 - pointWidth) / 5;
- const y0 = this.road.defaultY + 20;
- const x0 = this.road.x;
- this.circles = {
- diameter: game.math.getRadiusFromCircunference(distanceBetweenPoints) * 2,
- cur: 0,
- list: [],
- };
- this.control = {
- directionModifier: gameOperation === 'minus' ? -1 : 1,
- correctX: x0,
- nextX: undefined,
- divisorsList: '',
- hasClicked: false,
- checkAnswer: false,
- isCorrect: false,
- showEndInfo: false,
- endSignX: undefined,
- curWalkedPath: 0,
-
- correctIndex: undefined,
- selectedIndex: -1,
- numberOfPlusFractions: undefined,
- };
- const walkOffsetX = 2;
- const walksPerDistanceBetweenPoints = distanceBetweenPoints / walkOffsetX;
- this.animation = {
- list: {
- left: undefined,
- right: undefined,
- },
- invertDirection: undefined,
- animateKid: false,
- animateBalloon: false,
- counter: undefined,
- walkOffsetX,
- angleOffset: 360 / walksPerDistanceBetweenPoints,
- };
- renderBackground('farmRoad');
-
-
- if (moodle) {
- navigation.add.right(['audio']);
- } else {
- navigation.add.left(['back', 'menu', 'show_answer'], 'customMenu');
- navigation.add.right(['audio']);
- }
- const validPath = { x0, y0, distanceBetweenPoints };
- this.utils.renderRoadBlocks();
- this.utils.renderRoad(validPath);
- const [restart, kiteX] = this.utils.renderCircles(validPath);
- this.restart = restart;
- this.utils.renderCharacters(validPath, kiteX);
- this.utils.renderMainUI();
- 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.animateKid) {
- self.utils.animateKidHandler();
- }
-
- if (self.control.checkAnswer) {
- self.utils.checkAnswerHandler();
- }
-
- if (self.animation.animateBalloon) {
- self.utils.animateBalloonHandler();
- }
- game.render.all();
- },
- utils: {
- renderRoadBlocks: function () {
- for (let i = 0; i < self.road.numberOfBlocks; i++) {
- const block = game.add.geom.rect(
- self.road.x + i * self.blocks.width,
- self.road.y,
- self.blocks.width,
- self.blocks.height,
- 'transparent',
- 0.5,
- colors.red,
- 2
- );
- block.info = { index: i };
- self.blocks.list.push(block);
- }
- },
-
- renderRoad: function (validPath) {
- const offset = 40;
- for (let i = 0; i <= 5; i++) {
-
- game.add
- .sprite(
- validPath.x0 +
- i *
- validPath.distanceBetweenPoints *
- self.control.directionModifier,
- validPath.y0,
- 'map_place',
- 0,
- 0.45
- )
- .anchor(0.5, 0.5);
-
- const curX =
- validPath.x0 +
- i * validPath.distanceBetweenPoints * self.control.directionModifier;
- game.add.geom
- .circle(
- curX,
- validPath.y0 + 60 + offset,
- 60,
- undefined,
- 0,
- colors.white,
- 0.8
- )
- .anchor(0, 0.25);
- game.add.geom.rect(
- curX,
- validPath.y0 + 60 - 28,
- 4,
- 25,
- colors.white,
- 0.8,
- undefined,
- 0
- );
-
- game.add.text(
- curX,
- validPath.y0 + 60 + offset,
- i * self.control.directionModifier,
- {
- ...textStyles.h2_,
- font: 'bold ' + textStyles.h2_.font,
- fill: gameOperation === 'minus' ? colors.red : colors.green,
- }
- );
- }
- self.utils.renderWalkedPath(
- validPath.x0 - 1,
- validPath.y0 - 5,
- gameOperation === 'minus' ? colors.red : colors.green
- );
- },
- renderWalkedPath: function (x, y, color) {
- const path = game.add.geom.rect(x, y, 1, 1, 'transparent', 1, color, 4);
- self.walkedPath.push(path);
- return path;
- },
- renderCircles: function (validPath) {
- let restart = false;
- let hasBaseDifficulty = false;
- let kiteX = context.canvas.width / 2;
- const fractionX =
- validPath.x0 -
- (self.circles.diameter - 10) * self.control.directionModifier;
- const font = {
- ...textStyles.h2_,
- font: 'bold ' + textStyles.h2_.font,
- };
-
- const max = gameOperation === 'mixed' ? 6 : curMapPosition + 1;
- const min =
- curMapPosition === 1 && (gameOperation === 'mixed' || gameMode === 'b')
- ? 2
- : curMapPosition;
- const total = game.math.randomInRange(min, max);
-
- self.control.numberOfPlusFractions = game.math.randomInRange(
- 1,
- total - 1
- );
- for (let i = 0; i < total; i++) {
- let curDirection = undefined;
- let curLineColor = undefined;
- let curFillColor = undefined;
- let curAngleDegree = undefined;
- let curIsCounterclockwise = undefined;
- let curFractionItems = undefined;
- let curCircle = undefined;
- const curCircleInfo = {
- direction: undefined,
- direc: undefined,
- distance: undefined,
- angle: undefined,
- fraction: {
- labels: [],
- nominator: undefined,
- denominator: undefined,
- },
- };
- let curDivisor = game.math.randomInRange(1, gameDifficulty);
- if (curDivisor === gameDifficulty) hasBaseDifficulty = true;
- curDivisor = curDivisor === 3 ? 4 : curDivisor;
- self.control.divisorsList += curDivisor + ',';
-
- switch (gameOperation) {
- case 'plus':
- curDirection = 'right';
- break;
- case 'minus':
- curDirection = 'left';
- break;
- case 'mixed':
- curDirection =
- i < self.control.numberOfPlusFractions ? 'right' : 'left';
- break;
- }
- curCircleInfo.direction = curDirection;
-
- if (curDirection === 'right') {
- curIsCounterclockwise = true;
- curLineColor = colors.green;
- curFillColor = colors.greenLight;
- curCircleInfo.direc = 1;
- } else {
- curIsCounterclockwise = false;
- curLineColor = colors.red;
- curFillColor = colors.redLight;
- curCircleInfo.direc = -1;
- }
- font.fill = curLineColor;
- const curCircleY =
- validPath.y0 -
- 5 -
- self.circles.diameter / 2 -
- i * self.circles.diameter;
-
- if (curDivisor === 1) {
- curAngleDegree = 360;
- curCircle = game.add.geom.circle(
- validPath.x0,
- curCircleY,
- self.circles.diameter,
- curLineColor,
- 3,
- curFillColor,
- 1
- );
- curCircle.counterclockwise = curIsCounterclockwise;
- curCircleInfo.angleDegree = curAngleDegree;
- curFractionItems = [
- {
- x: fractionX,
- y: curCircleY + 10,
- text: '1',
- },
- {
- x: fractionX - 25,
- y: curCircleY + 10,
- text: curDirection === 'left' ? '-' : '',
- },
- null,
- ];
- } else {
- curAngleDegree = 360 / curDivisor;
- if (curDirection === 'right') curAngleDegree = 360 - curAngleDegree;
- curCircle = game.add.geom.arc(
- validPath.x0,
- curCircleY,
- self.circles.diameter,
- 0,
- game.math.degreeToRad(curAngleDegree),
- curIsCounterclockwise,
- curLineColor,
- 3,
- curFillColor,
- 1
- );
- curCircleInfo.angleDegree = curAngleDegree;
- curFractionItems = [
- {
- x: fractionX,
- y: curCircleY - 2,
- text: `1\n${curDivisor}`,
- },
- {
- x: fractionX - 35,
- y: curCircleY + 15,
- text: curDirection === 'left' ? '-' : '',
- },
- {
- x0: fractionX,
- y0: curCircleY + 2,
- x1: fractionX + 25,
- y1: curCircleY + 2,
- lineWidth: 2,
- color: curLineColor,
- },
- ];
- }
- for (let i = 0; i < 2; i++) {
- const item = game.add.text(
- curFractionItems[i].x,
- curFractionItems[i].y,
- curFractionItems[i].text,
- font
- );
- item.lineHeight = 37;
- curCircleInfo.fraction.labels.push(item);
- }
- if (curFractionItems[2]) {
- const line = game.add.geom.line(
- curFractionItems[2].x0,
- curFractionItems[2].y0,
- curFractionItems[2].x1,
- curFractionItems[2].y1,
- curFractionItems[2].lineWidth,
- curFractionItems[2].color
- );
- line.anchor(0.5, 0);
- curCircleInfo.fraction.labels.push(line);
- } else {
- curCircleInfo.fraction.labels.push(null);
- }
- curCircleInfo.fraction.nominator = curCircleInfo.direc;
- curCircleInfo.fraction.denominator = curDivisor;
- if (!showFractions) {
- curCircleInfo.fraction.labels.forEach((label) => {
- if (label) label.alpha = 0;
- });
- }
- curCircle.rotate = 90;
-
- if (gameMode === 'b') {
- curCircle.index = i;
- }
- curCircleInfo.distance = Math.floor(
- validPath.distanceBetweenPoints / curDivisor
- );
-
- curCircle.info = curCircleInfo;
- self.circles.list.push(curCircle);
- self.control.correctX +=
- Math.floor(validPath.distanceBetweenPoints / curDivisor) *
- curCircle.info.direc;
- }
-
-
- if (!hasBaseDifficulty) {
- restart = true;
- }
-
- self.control.nextX =
- validPath.x0 +
- self.circles.list[0].info.distance * self.circles.list[0].info.direc;
- let isBeforeMin = (isAfterMax = false);
- let finalPosition = self.control.correctX;
-
-
- if (gameOperation === 'minus') {
- isBeforeMin = finalPosition > validPath.x0;
- isAfterMax =
- finalPosition < validPath.x0 - 5 * validPath.distanceBetweenPoints;
- } else {
- isBeforeMin = finalPosition < validPath.x0;
- isAfterMax =
- finalPosition > validPath.x0 + 5 * validPath.distanceBetweenPoints;
- }
- if (isBeforeMin || isAfterMax) restart = true;
- if (gameMode === 'b') {
-
- kiteX = validPath.x0;
- self.control.correctIndex = game.math.randomInRange(
- self.control.numberOfPlusFractions,
- self.circles.list.length
- );
- for (let i = 0; i < self.control.correctIndex; i++) {
- kiteX +=
- self.circles.list[i].info.distance *
- self.circles.list[i].info.direc;
- }
- finalPosition = kiteX;
- self.blocks.list.forEach((cur) => {
- self.utils.fillCurrentBlock(kiteX, cur.x, cur);
- if (self.utils.isOverBlock(kiteX, cur.x, cur.width, cur))
- self.blocks.cur = cur;
- });
-
-
- if (gameOperation === 'minus') {
- isBeforeMin = finalPosition > validPath.x0;
- isAfterMax =
- finalPosition < validPath.x0 - 5 * validPath.distanceBetweenPoints;
- } else {
- isBeforeMin = finalPosition < validPath.x0;
- isAfterMax =
- finalPosition > validPath.x0 + 5 * validPath.distanceBetweenPoints;
- }
- if (isBeforeMin || isAfterMax) restart = true;
- }
- return [restart, kiteX];
- },
- renderCharacters: function (validPath, kiteX) {
-
- self.kid = game.add.sprite(
- validPath.x0,
- validPath.y0 - 32 - self.circles.list.length * self.circles.diameter,
- 'kid_walking',
- 0,
- 1.2
- );
- self.kid.anchor(0.5, 0.8);
- self.animation.list.right = [
- 'right',
- [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
- 4,
- ];
- self.animation.list.left = [
- 'left',
- [23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12],
- 4,
- ];
- if (gameOperation === 'minus') {
- self.kid.animation = self.animation.list.left;
- self.kid.curFrame = 23;
- } else {
- self.kid.animation = self.animation.list.right;
- }
-
- self.kite = game.add.image(kiteX, validPath.y0 - 295, 'kite', 1.8, 0.5);
- self.kite.alpha = 0.5;
- self.kite.anchor(0, 0.5);
- self.kite_line = game.add.image(kiteX, validPath.y0 - 30, 'kite_line', 2);
- self.kite_line.alpha = 0.8;
- self.kite_line.anchor(0.5, 0);
- },
- renderMainUI: function () {
-
- self.ui.help = game.add.image(0, 0, 'pointer', 2, 0);
-
- const correctMessage =
- gameMode === 'a'
- ? game.lang.circleOne_intro_a
- : game.lang.circleOne_intro_b;
- const treatedMessage = correctMessage.split('\\n');
- self.ui.message = [];
- self.ui.message.push(
- game.add.text(
- context.canvas.width / 2,
- 170,
- treatedMessage[0] + '\n' + treatedMessage[1],
- textStyles.h1_
- )
- );
- },
- renderOperationUI: function () {
-
- const renderFloorFractions = (lastIndex) => {
- const divisor = gameDifficulty == 3 ? 4 : gameDifficulty;
- const operator = gameOperation === 'minus' ? '-' : '+';
- const index = lastIndex;
- const blocks = index + 1;
- const valueReal = blocks / divisor;
- const valueFloor = Math.floor(valueReal);
- const valueRest = valueReal - valueFloor;
- let fracNomin = (fracDenomin = fracLine = '');
-
- if (gameOperation === 'minus') {
- fracNomin += ' ';
- fracDenomin += ' ';
- fracLine += operator;
- }
-
- if (valueFloor) {
- fracNomin += ' ';
- fracDenomin += ' ';
- fracLine += valueFloor;
- }
-
- if (valueFloor && valueRest) {
- fracNomin += ' ';
- fracDenomin += ' ';
- fracLine += operator;
- }
-
- if (valueRest) {
- fracNomin += `${valueRest * divisor}`;
- fracDenomin += `${divisor}`;
- fracLine += '-';
- }
- return [fracNomin, fracDenomin, fracLine, valueReal];
- };
- const renderStackFractions = (lastIndex) => {
- const operator = gameOperation === 'minus' ? '-' : '+';
- const index = lastIndex;
- const blocks = index + 1;
- const nominators = [];
- const denominators = [];
- const values = [];
- let valueReal = 0;
- let fracNomin = (fracDenomin = fracLine = '');
- for (let i = 0; i < blocks; i++) {
- const m = self.circles.list[i].info.fraction.denominator || 1;
- const temp = self.circles.list[i].info.fraction.nominator || 0;
- const n = gameOperation === 'minus' ? -temp : +temp;
- const nm = n / m;
- nominators[i] = n + 0;
- denominators[i] = m + 0;
- values[i] = nm;
- valueReal += nm;
- }
- for (let i = 0; i < blocks; i++) {
- const valueReal = values[i];
- const valueFloor = Math.floor(valueReal);
- const valueRest = valueReal - valueFloor;
- if (i > 0 || gameOperation === 'minus') {
- fracNomin += ' ';
- fracDenomin += ' ';
- fracLine += operator;
- }
- if (valueFloor && !valueRest) {
- fracNomin += ' ';
- fracDenomin += ' ';
- fracLine += valueFloor;
- }
- if (valueRest) {
- fracNomin += `${nominators[i]}`;
- fracDenomin += `${denominators[i]}`;
- fracLine += '-';
- }
- }
- return [fracNomin, fracDenomin, fracLine, valueReal];
- };
-
- const font = textStyles.fraction;
- font.fill = colors.black;
- 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;
- const renderList = [];
-
- 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);
-
- const [floorNominators, floorDenominators, floorLines, floorValue] =
- renderFloorFractions(self.blocks.cur.info.index);
- const [stackNominators, stackDenominators, stackLines, stackValue] =
- renderStackFractions(self.circles.cur - 1);
- const renderFloorOperationLine = (x) => {
- font.fill = colors.black;
- const floorNom = game.add.text(
- x + offsetX / 2,
- y0,
- floorNominators,
- font,
- 60
- );
- const floorDenom = game.add.text(
- x + offsetX / 2,
- y0 + 70,
- floorDenominators,
- font,
- 60
- );
- const floorLin = game.add.text(
- x + offsetX / 2,
- y0 + 35,
- floorLines,
- font,
- 60
- );
- renderList.push(floorNom);
- renderList.push(floorDenom);
- renderList.push(floorLin);
- };
- const renderStackOperationLine = (x) => {
- font.fill = colors.black;
- const stackNom = game.add.text(
- x + offsetX / 2,
- y0,
- stackNominators,
- font,
- 60
- );
- const stackDenom = game.add.text(
- x + offsetX / 2,
- y0 + 70,
- stackDenominators,
- font,
- 60
- );
- const stackLin = game.add.text(
- x + offsetX / 2,
- y0 + 35,
- stackLines,
- font,
- 60
- );
- renderList.push(stackNom);
- renderList.push(stackDenom);
- renderList.push(stackLin);
- };
-
- if (gameMode === 'a') renderFloorOperationLine(x0);
- else renderStackOperationLine(x0);
- let curNominators = gameMode === 'a' ? floorNominators : stackNominators;
- nextX = x0 + (curNominators.length + 2) * widthOfChar;
-
- font.fill = colors.green;
- let comparisonSign = '=';
-
- if (floorValue != stackValue) {
- font.fill = colors.red;
- let leftSideIsLarger = floorValue > stackValue;
- if (gameMode === 'b') leftSideIsLarger = !leftSideIsLarger;
- if (gameOperation === 'minus') leftSideIsLarger = !leftSideIsLarger;
- comparisonSign = leftSideIsLarger ? '>' : '<';
- }
- renderList.push(game.add.text(nextX, y0 + 35, comparisonSign, font));
-
- if (gameMode === 'a') renderStackOperationLine(nextX);
- else renderFloorOperationLine(nextX);
- curNominators = gameMode === 'a' ? stackNominators : floorNominators;
- const resultWidth = (curNominators.length + 2) * widthOfChar;
- const cardWidth = nextX - x0 + resultWidth + padding * 2;
- card.width = cardWidth;
- const endSignX = (context.canvas.width - cardWidth) / 2 + cardWidth;
-
- moveList(renderList, (context.canvas.width - cardWidth) / 2, 0);
- self.fractionOperationUI = renderList;
- return endSignX;
- },
- renderEndUI: function () {
- let btnColor = colors.green;
- let btnText = game.lang.continue;
- if (!self.control.isCorrect) {
- btnColor = colors.red;
- btnText = game.lang.retry;
- }
-
- 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
- );
- },
-
- animateKidHandler: function () {
- let canLowerCircles = undefined;
- let curCircle = self.circles.list[self.circles.cur];
- let curDirec = curCircle.info.direc;
-
- self.circles.list.forEach((circle) => {
- circle.x += self.animation.walkOffsetX * curDirec;
- });
- self.kid.x += self.animation.walkOffsetX * curDirec;
- self.walkedPath[self.control.curWalkedPath].width +=
- self.animation.walkOffsetX * curDirec;
-
- curCircle.info.angleDegree += self.animation.angleOffset * curDirec;
- curCircle.angleEnd = game.math.degreeToRad(curCircle.info.angleDegree);
-
- if (curCircle.info.direction === 'right') {
- canLowerCircles = curCircle.x >= self.control.nextX;
- } else if (curCircle.info.direction === 'left') {
- canLowerCircles = curCircle.x <= self.control.nextX;
-
- if (
- self.animation.invertDirection === undefined &&
- self.circles.cur > 0 &&
- self.circles.list[self.circles.cur - 1].info.direction === 'right'
- ) {
- self.animation.invertDirection = true;
- }
- }
-
- if (self.animation.invertDirection) {
- self.animation.invertDirection = false;
- game.animation.stop(self.kid.animation[0]);
- self.kid.animation = self.animation.list.left;
- self.kid.curFrame = 23;
- game.animation.play('left');
- self.control.curWalkedPath = 1;
- self.utils.renderWalkedPath(
- curCircle.x,
- self.walkedPath[0].y + 8,
- colors.red
- );
- }
- if (canLowerCircles) {
-
- curCircle.alpha = 0;
-
- self.circles.list.forEach((circle) => {
- circle.y += self.circles.diameter;
- });
- self.kid.y += self.circles.diameter;
- self.circles.cur++;
- if (self.circles.list[self.circles.cur]) {
- curCircle = self.circles.list[self.circles.cur];
- curDirec = curCircle.info.direc;
- self.control.nextX += curCircle.info.distance * curDirec;
- }
- }
-
- if (
- self.circles.cur === self.circles.list.length ||
- curCircle.alpha === 0
- ) {
- self.animation.animateKid = false;
- self.control.checkAnswer = true;
- }
- },
- checkAnswerHandler: function () {
- game.timer.stop();
- game.animation.stop(self.kid.animation[0]);
- self.control.isCorrect = game.math.isOverlap(self.kite_line, self.kid);
- const x = self.utils.renderOperationUI();
- if (self.control.isCorrect) {
- completedLevels++;
- self.kid.curFrame = self.kid.curFrame < 12 ? 24 : 25;
- if (audioStatus) game.audio.okSound.play();
- 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.counter = 0;
- self.animation.animateBalloon = true;
- },
- animateBalloonHandler: function () {
- self.animation.counter++;
- self.kite.y -= 2;
- self.kite_line.y -= 2;
- if (self.control.isCorrect) self.kid.y -= 2;
- if (self.animation.counter === 100) {
- self.utils.renderEndUI();
- self.control.showEndInfo = true;
- if (self.control.isCorrect) canGoToNextMapPosition = true;
- else canGoToNextMapPosition = false;
- }
- },
- endLevel: function () {
- game.state.start('map');
- },
-
-
- showAnswer: function () {
- if (!self.control.hasClicked) {
-
- if (gameMode === 'a') {
- self.ui.help.x = self.control.correctX - 20;
- self.ui.help.y = self.road.defaultY;
-
- } else {
- self.ui.help.x = self.circles.list[self.control.correctIndex - 1].x;
- self.ui.help.y = self.circles.list[self.control.correctIndex - 1].y;
- }
- self.ui.help.alpha = 1;
- }
- },
-
-
- clickCircleHandler: function (cur) {
- if (!self.control.hasClicked) {
-
- if (gameMode === 'a') {
- self.kite.x = cur;
- self.kite_line.x = cur;
- }
-
- if (gameMode === 'b') {
- document.body.style.cursor = 'auto';
- for (let i in self.circles.list) {
- if (i <= cur.index) {
- self.circles.list[i].alpha = 1;
- self.control.selectedIndex = cur.index;
- } else {
- self.circles.list[i].alpha = 0;
- self.kid.y += self.circles.diameter;
- }
- }
- }
- if (audioStatus) game.audio.popSound.play();
-
- if (showFractions) {
- self.circles.list.forEach((circle) => {
- circle.info.fraction.labels.forEach((labelPart) => {
- if (labelPart) labelPart.alpha = 0;
- });
- });
- }
-
- if (self.ui.help != undefined) self.ui.help.alpha = 0;
- self.ui.message[0].alpha = 0;
- navigation.disableIcon(navigation.showAnswerIcon);
- self.kite.alpha = 1;
- self.kite_line.alpha = 1;
- self.walkedPath[self.control.curWalkedPath].alpha = 1;
- self.control.hasClicked = true;
- self.animation.animateKid = true;
- game.animation.play(self.kid.animation[0]);
- }
- },
-
- overCircleHandler: function (cur) {
- if (!self.control.hasClicked) {
- document.body.style.cursor = 'pointer';
- for (let i in self.circles.list) {
- const alpha = i <= cur.index ? 1 : 0.4;
- self.circles.list[i].alpha = alpha;
- if (showFractions) {
- self.circles.list[i].info.fraction.labels.forEach((lbl) => {
- if (lbl) lbl.alpha = alpha;
- });
- }
- }
- }
- },
-
- outCircleHandler: function () {
- if (!self.control.hasClicked) {
- document.body.style.cursor = 'auto';
- const alpha = 1;
- self.circles.list.forEach((circle) => {
- circle.alpha = alpha;
- if (showFractions) {
- circle.info.fraction.labels.forEach((lbl) => {
- if (lbl) lbl.alpha = alpha;
- });
- }
- });
- }
- },
-
- isOverBlock: function (x, blockX, blockWidth) {
- if (
- ((gameOperation === 'plus' || gameOperation === 'mixed') &&
- x >= blockX &&
- x < blockX + blockWidth) ||
- (gameOperation === 'minus' && x <= blockX && x > blockX + blockWidth)
- )
- return true;
- return false;
- },
-
- isOverRoad: function (x, y, roadX, roadWidth) {
- if (y > 150) {
- if (
- ((gameOperation === 'plus' || gameOperation === 'mixed') &&
- x >= roadX &&
- x < roadX + roadWidth) ||
- (gameOperation === 'minus' &&
- x <= roadX &&
- x > roadX + roadWidth * self.control.directionModifier)
- )
- return true;
- }
- return false;
- },
-
- fillCurrentBlock: function (x, blockX, block) {
- block.fillColor =
- ((gameOperation === 'plus' || gameOperation === 'mixed') &&
- x > blockX) ||
- (gameOperation === 'minus' && x < blockX)
- ? colors.red
- : 'transparent';
- },
- },
- events: {
-
- onInputDown: function (mouseEvent) {
- const x = game.math.getMouse(mouseEvent).x;
- const y = game.math.getMouse(mouseEvent).y;
-
- if (gameMode === 'a') {
- const isValidX = self.utils.isOverRoad(
- x,
- y,
- self.road.x,
- self.road.width
- );
- if (isValidX) {
- self.utils.clickCircleHandler(
- self.blocks.cur.x + self.blocks.cur.width
- );
- document.body.style.cursor = 'auto';
- }
- }
-
- if (gameMode === 'b') {
- self.circles.list.forEach((circle) => {
- const isValid =
- game.math.distanceToPointer(
- x,
- circle.xWithAnchor,
- y,
- circle.yWithAnchor
- ) <=
- (circle.diameter / 2) * circle.scale;
- if (isValid) self.utils.clickCircleHandler(circle);
- });
- }
-
- 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();
- },
-
- onInputOver: function (mouseEvent) {
- const x = game.math.getMouse(mouseEvent).x;
- const y = game.math.getMouse(mouseEvent).y;
- let isOverCircle = false;
- if (gameMode === 'a' && !self.control.hasClicked) {
- const isValidX = self.utils.isOverRoad(
- x,
- y,
- self.road.x,
- self.road.width
- );
- if (isValidX) {
-
- self.blocks.cur = self.blocks.list[0];
- self.blocks.list.forEach((cur) => {
- self.utils.fillCurrentBlock(x, cur.x, cur);
- if (self.utils.isOverBlock(x, cur.x, cur.width, cur))
- self.blocks.cur = cur;
- });
- const newX = self.blocks.cur.x + self.blocks.cur.width;
- self.kite.x = newX;
- self.kite_line.x = newX;
- document.body.style.cursor = 'pointer';
- } else {
- document.body.style.cursor = 'auto';
- }
- }
-
- if (gameMode === 'b' && !self.control.hasClicked) {
- self.circles.list.forEach((circle) => {
- const isValid =
- game.math.distanceToPointer(
- x,
- circle.xWithAnchor,
- y,
- circle.yWithAnchor
- ) <=
- (circle.diameter / 2) * circle.scale;
- if (isValid) {
- self.utils.overCircleHandler(circle);
- isOverCircle = true;
- }
- });
- if (!isOverCircle) self.utils.outCircleHandler();
- }
-
- if (self.control.showEndInfo) {
- if (game.math.isOverIcon(x, y, self.ui.continue.button)) {
-
- 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 {
-
- 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: {
-
- postScore: function () {
-
- 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=' +
- 'numCircles:' +
- self.circles.list.length +
- ', valCircles: ' +
- self.control.divisorsList +
- ' kiteX: ' +
- self.kite_line.x +
- ', selIndex: ' +
- self.control.selectedIndex;
-
- sendToDatabase(data);
- },
- },
- };
|