Ifractions-web/js/squareOne.js

/*
    GAME LEVELS - SQUARE I & II: tractor level
    
    Name of game state : squareOne 
    Shape : square
    Character : tractor
    Theme : farm
    Concept : Player associates 'blocks carried by the tractor' and 'floor spaces to be filled by them'
    Represent fractions as : blocks

    # of different difficulties for each level : 3

    Levels can be : 'A' or 'B' (in variable 'levelType')

        A : Player can select # of 'floor blocks' (hole in the ground)
            Selects size of hole to be made in the ground (to fill with the blocks in front of the truck)
        B : Player can select # of 'stacked blocks' (in front of the truck)
            Selects number of blocks in front of the truck (to fill the hole on the ground)
    
    Sublevels can be : 'Plus' or 'Minus' (in variable 'sublevelType')
    
        Plus : addition of fractions
            Represented by : tractor going to the right (floor positions 0..8)
        Minus : subtraction of fractions
            Represented by: tractor going to the left (floor positions 8..0)
*/

const squareOne = {

    preload: function () {

        document.body.style.cursor = "auto";
        game.loop.stop();
        game.event.clear();
        game.animation.clear();

        self = this;

        // NOTHING TO LOAD HERE
        squareOne.create();

    },

    create: function () {

        game.render.clear();

        // CONTROL VARIABLES

        this.checkAnswer = false;   // When true allows game to run 'check answer' code in update
        this.animate = false;       // When true allows game to run 'tractor animation' code in update (turns animation of the moving tractor ON/OFF)
        this.animateEnding = false; // When true allows game to run 'tractor ending animation' code in update (turns 'ending' animation of the moving tractor ON/OFF)
        this.hasClicked = false;    // Checks if player 'clicked' on a block
        this.result = false;        // Checks player 'answer' 
        this.count = 0;             // An 'x' position counter used in the tractor animation        

        this.divisorsList = "";     // Hold the divisors for each fraction on stacked blocks (created for func_postScore)

        this.DIREC_LEVEL = (sublevelType == 'Minus') ? -1 : 1;    // Will be multiplied to values to easily change tractor direction when needed
        this.animationSpeed = 2 * this.DIREC_LEVEL;   // x distance in which the tractor moves in each iteration of the animation

        // GAME VARIABLES

        this.defaultBlockWidth = 80;   // Base block width
        this.defaultBlockHeight = 40;  // Base block height

        this.startX = (sublevelType == 'Minus') ? 730 : 170; // Initial 'x' coordinate for the tractor and stacked blocks



        // BACKGROUND

        // Add background image
        game.add.image(0, 0, 'bgimage');

        // Add clouds
        game.add.image(300, 100, 'cloud');
        game.add.image(660, 80, 'cloud');
        game.add.image(110, 85, 'cloud', 0.8);

        // Add floor of grass
        for (let i = 0; i < 9; i++) { game.add.image(i * 100, 501, 'floor'); }

        // Calls function that loads navigation icons
        navigationIcons.func_addIcons(
            true, true, true,   // left icons
            true, false,        // right icons
            difficultyScreen, this.func_viewHelp
        );

        // TRACTOR 

        this.tractor = game.add.sprite(this.startX, 445, 'tractor', 0, 0.8);

        if (sublevelType == 'Plus') {
            this.tractor.anchor(1, 0.5);
            this.tractor.animation = ["move", [0, 1, 2, 3, 4], 4];
        } else {
            this.tractor.anchor(0, 0.5);
            this.tractor.animation = ["move", [5, 6, 7, 8, 9], 4];
            this.tractor.curFrame = 5;
        }

        // STACKED BLOCKS variables

        this.stck = {

            blocks: [], // Group of 'stacked' block objects
            labels: [], // Group of fraction labels on the side of 'stacked' blocks

            index: undefined, // (levelType 'B') index of 'stacked' block selected by player

            // control variables for animation
            curIndex: 0, // (needs to be 0)
            curBlockEnd: undefined,

            // Correct values
            correctIndex: undefined, // (levelType 'B') index of the CORRECT 'stacked' block

        };

        // FLOOR BLOCKS variables

        this.floor = {

            blocks: [], // Group of 'floor' block objects

            index: undefined, // (levelType 'A') index of 'floor' block selected by player

            // control variables for animation
            curIndex: -1, // (needs to be -1)

            // Correct values
            correctIndex: undefined, // (levelType 'A') index of the CORRECT 'floor' block

            correctX: undefined,  // 'x' coordinate of CORRECT 'floor' block
            correctXA: undefined, // temporary variable 
            correctXB: undefined, // temporary variable

        };

        // CREATING STACKED BLOCKS

        const restart = this.func_createStckBlocks();

        // CREATING FLOOR BLOCKS

        this.func_createFloorBlocks();


        // SELECTION ARROW

        if (levelType == "A") {
            this.arrow = game.add.image(this.startX + this.defaultBlockWidth * this.DIREC_LEVEL, 480, 'arrow_down');
            this.arrow.anchor(0.5, 0.5);
            this.arrow.alpha = 0.5;
        }

        // help pointer
        this.help = game.add.image(0, 0, 'help_pointer', 0.5);
        this.help.anchor(0.5, 0);
        this.help.alpha = 0;



        if (restart) {
            squareOne.preload();
        } else {
            game.render.all();

            game.timer.start(); // Set a timer for the current level (used in func_postScore)

            game.event.add("click", squareOne.func_onInputDown);
            game.event.add("mousemove", squareOne.func_onInputOver);

            game.loop.start(this);
        }

    },

    update: function () {

        // AFTER PLAYER SELECTION

        // Starts tractor moving animation
        if (self.animate) {

            const stck = self.stck;
            const floor = self.floor;

            // MANAGE HORIZONTAL MOVEMENT

            // Move 'tractor'
            self.tractor.x += self.animationSpeed;

            // Move 'stacked blocks'
            for (let i in stck.blocks) {
                stck.blocks[i].x += self.animationSpeed;
            }


            // MANAGE BLOCKS AND FLOOR GAPS

            // if block is 1/n (not 1/1) there's an extra block space to go through before the start of next block
            const restOfCurBlock = (self.defaultBlockWidth - stck.blocks[stck.curIndex].width) * self.DIREC_LEVEL;

            // check if block falls
            if ((sublevelType == 'Plus' && stck.blocks[0].x >= (stck.curBlockEnd + restOfCurBlock)) ||
                (sublevelType == 'Minus' && stck.blocks[0].x <= (stck.curBlockEnd + restOfCurBlock))) {

                let lowerBlock = true;

                const curEnd = stck.blocks[0].x + stck.blocks[stck.curIndex].width * self.DIREC_LEVEL;

                // if current index is (A) last stacked index (correct index - fixed)
                // if current index is (B) selected stacked index
                if (stck.curIndex == stck.index) {

                    // floor.index : (A) selected floor index
                    // floor.index : (B) last floor index (correct index - fixed)
                    const selectedEnd = floor.blocks[floor.index].x + floor.blocks[0].width * self.DIREC_LEVEL;

                    // (A) last stacked block (fixed) doesnt fit selected gap AKA NOT ENOUGH FLOOR BLOCKS (DOESNT CHECK TOO MANY)
                    // (B) selected stacked index doesnt fit last floor gap (fixed) AKA TOO MANY STACKED BLOCKS (DOESNT CHECK NOT ENOUGH)
                    if ((sublevelType == 'Plus' && curEnd > selectedEnd) || (sublevelType == 'Minus' && curEnd < selectedEnd)) {
                        lowerBlock = false;
                    }

                } else {

                    // update to next block end
                    stck.curBlockEnd += stck.blocks[stck.curIndex + 1].width * self.DIREC_LEVEL;

                }

                // fill floor gap
                if (lowerBlock) {

                    // until (A) selected floor index
                    // until (B) last floor index (correct index - fixed)
                    // updates floor index to be equivalent to stacked index (and change alpha so floor appears to be filled)
                    for (let i = 0; i <= floor.index; i++) {

                        if ((sublevelType == 'Plus' && floor.blocks[i].x < curEnd) || (sublevelType == 'Minus' && floor.blocks[i].x > curEnd)) {
                            floor.blocks[i].alpha = 0.2;
                            floor.curIndex = i;
                        }

                    }

                    // lower
                    stck.blocks[stck.curIndex].alpha = 0;
                    stck.blocks.forEach(cur => { cur.y += self.defaultBlockHeight - 2; }); // Lower stacked blocks

                }

                stck.curIndex++;

            }



            // WHEN REACHED END POSITION

            if (stck.curIndex > stck.index || floor.curIndex == floor.index) {
                self.animate = false;
                self.checkAnswer = true;
            }

        }

        // When animation ends check answer
        if (self.checkAnswer) {

            game.timer.stop();

            game.animation.stop(self.tractor.animation[0]);

            if (levelType == 'A') {
                self.result = self.floor.index == self.floor.correctIndex;
            } else {
                self.result = self.stck.index == self.stck.correctIndex;
            }

            // Give feedback to player and turns on sprite animation
            if (self.result) { // Correct answer

                game.animation.play(self.tractor.animation[0]);

                // Displays feedback image and sound 
                game.add.image(defaultWidth / 2, defaultHeight / 2, 'ok').anchor(0.5, 0.5);
                if (audioStatus) game.audio.okSound.play();

                completedLevels++; // increases number os passed levels
                if (debugMode) console.log("completedLevels = " + completedLevels);

            } else { // Incorrect answer

                // Displays feedback image and sound
                game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5);
                if (audioStatus) game.audio.errorSound.play();

            }

            self.func_postScore();



            // AFTER CHECK ANSWER

            self.checkAnswer = false;
            self.animateEnding = true;

        }

        // Starts 'ending' tractor moving animation
        if (self.animateEnding) {

            // ANIMATE ENDING

            self.count++;

            // If CORRECT ANSWER runs final tractor animation (else tractor desn't move, just wait)
            if (self.result) self.tractor.x += self.animationSpeed;



            // WHEN REACHED END POSITION calls map state

            if (self.count >= 140) {

                // If CORRECT ANSWER, player goes to next level in map
                if (self.result) mapMove = true;
                else mapMove = false;

                mapScreen.preload();
            }

        }

        game.render.all();

    },



    /* EVENT HANDLER */

    func_onInputDown: function (mouseEvent) {

        const x = mouseEvent.offsetX;
        const y = mouseEvent.offsetY;

        if (levelType == 'A') {
            self.floor.blocks.forEach(cur => {

                const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
                    (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));

                if (valid) self.func_clickSquare(cur);
            });
        } else {
            self.stck.blocks.forEach(cur => {

                const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
                    (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));

                if (valid) self.func_clickSquare(cur);
            });
        }

        navigationIcons.func_onInputDown(x, y);

        game.render.all();

    },

    func_onInputOver: function (mouseEvent) {

        const x = mouseEvent.offsetX;
        const y = mouseEvent.offsetY;
        let flagA = false;
        let flagB = false;

        if (levelType == 'A') {

            // Make arrow follow mouse
            if (!self.hasClicked && !self.animateEnding) {
                if (game.math.distanceToPointer(self.arrow.x, x, self.arrow.y, y) > 8) {
                    self.arrow.x = (x < 250) ? 250 : x; // Limits the arrow left position to 250
                }
            }

            self.floor.blocks.forEach(cur => {

                const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
                    (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));

                if (valid) {
                    flagA = true;
                    self.func_overSquare(cur);
                }
            });

            if (!flagA) self.func_outSquare('A');

        }

        if (levelType == 'B') {

            self.stck.blocks.forEach(cur => {

                const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
                    (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));

                if (valid) {
                    flagB = true;
                    self.func_overSquare(cur);
                }
            });

            if (!flagB) self.func_outSquare('B');

        }



        navigationIcons.func_onInputOver(x, y);

        game.render.all();

    },



    /* CALLED BY EVENT HANDLER */

    func_overSquare: function (cur) {

        if (!self.hasClicked) {

            document.body.style.cursor = "pointer";

            // On leveltype A
            if (levelType == "A") {

                for (let i in self.floor.blocks) {
                    self.floor.blocks[i].alpha = (i <= cur.index) ? 1 : 0.5;
                }

                // Saves the index of the selected 'floor' block
                self.floor.index = cur.index;

                // On leveltype B
            } else {

                for (let i in self.stck.blocks) {
                    self.stck.blocks[i].alpha = (i <= cur.index) ? 0.5 : 0.2;
                }

                // Saves the index of the selected 'stack' block
                self.stck.index = cur.index;

            }

        }

    },

    func_outSquare: function () {

        if (!self.hasClicked) {

            document.body.style.cursor = "auto";

            //on level type A
            if (levelType == "A") {

                for (let i in self.floor.blocks) {
                    self.floor.blocks[i].alpha = 0.5; // back to normal
                }

                self.floor.index = -1;

                //on level type B
            } else {

                for (let i in self.stck.blocks) {
                    self.stck.blocks[i].alpha = 0.5; // back to normal
                }

                self.stck.index = -1;

            }

        }

    },

    func_clickSquare: function () {

        if (!self.hasClicked && !self.animateEnding) {

            document.body.style.cursor = "auto";

            // On leveltype A
            if (levelType == 'A') {

                // Turns selection arrow completely visible
                self.arrow.alpha = 1;

                // Make the unselected blocks invisible (look like there's only the ground)
                for (let i in self.floor.blocks) {
                    // (SELECTION : self.FLOOR.index)
                    if (i > self.floor.index) self.floor.blocks[i].alpha = 0; // Make unselected 'floor' blocks invisible
                }

                // (FIXED : self.STCK.index) save the 'stacked' blocks index
                self.stck.index = self.stck.blocks.length - 1;

                // On leveltype B
            } else {

                for (let i in self.stck.blocks) {
                    // (FIXED : self.STCK.index)
                    if (i > self.stck.index) self.stck.blocks[i].alpha = 0; // Make unselected 'stacked' blocks invisible
                }

                // (SELECTION : self.FLOOR.index) save the 'floor' blocks index to compare to the stacked index in update
                self.floor.index = self.floor.blocks.length - 1;

                // save the updated total stacked blocks to compare in update
                self.stck.blocks.length = self.stck.index + 1;

            }



            // Play beep sound
            if (audioStatus) game.audio.beepSound.play();

            // Hide labels
            if (fractionLabel) {
                self.stck.labels.forEach(cur => {
                    cur.forEach(cur => {
                        cur.alpha = 0;
                    });
                });
            }
            // Hide solution pointer
            if (self.help != undefined) self.help.alpha = 0;

            // Turn tractir animation on
            game.animation.play(self.tractor.animation[0]);

            self.hasClicked = true;
            self.animate = true;

        }

    },



    /* GAME FUNCTIONS */

    func_createStckBlocks: function () {

        let hasBaseDifficulty = false; // will be true after next for loop if level has at least one '1/difficulty' fraction (if false, restart)
        const max = (levelType == 'B') ? 10 : mapPosition + 4; // Maximum number of stacked blocks for the level

        const total = game.math.randomInRange(mapPosition + 2, max); // Current number of stacked blocks for the level

        self.floor.correctXA = self.startX + self.defaultBlockWidth * self.DIREC_LEVEL;

        for (let i = 0; i < total; i++) { // for each stacked block

            let divisor = game.math.randomInRange(1, gameDifficulty); // Set divisor for fraction
            if (divisor == gameDifficulty) hasBaseDifficulty = true;
            if (divisor == 3) divisor = 4; // Make sure valid divisors are 1, 2 and 4 (not 3)
            self.divisorsList += divisor + ","; // List of divisors (for func_postScore())

            const curBlockWidth = self.defaultBlockWidth / divisor; // current width is a fraction of the default

            self.floor.correctXA += curBlockWidth * self.DIREC_LEVEL;

            // Create stacked block (close to tractor)
            const lineColor = (sublevelType == 'Minus') ? colors.red : colors.darkBlue;
            const lineSize = 2;
            const block = game.add.graphic.rect(
                self.startX,
                462 - i * (self.defaultBlockHeight - lineSize),
                curBlockWidth - lineSize,
                self.defaultBlockHeight - lineSize,
                lineColor,
                lineSize,
                colors.lightBlue,
                1);
            const anchor = (sublevelType == 'Minus') ? 1 : 0;
            block.anchor(anchor, 0);

            // If game is type B, adding events to stacked blocks
            if (levelType == 'B') {
                block.alpha = 0.5;
                block.index = i;
            }

            self.stck.blocks.push(block);

            // If 'show fractions' is turned on, create labels that display the fractions on the side of each block
            if (fractionLabel) {

                const x = self.startX + (curBlockWidth + 15) * self.DIREC_LEVEL;
                const y = self.defaultBlockHeight - lineSize;

                const label = [];

                if (divisor == 1) {
                    label[0] = game.add.text(x, 488 - i * y, divisor, textStyles.valueLabelBlue1);
                } else {
                    label[0] = game.add.text(x, 479 - i * y + 16, divisor, textStyles.valueLabelBlue3);
                    label[1] = game.add.text(x, 479 - i * y, '1', textStyles.valueLabelBlue3);
                    label[2] = game.add.text(x, 479 - i * y, '_', textStyles.valueLabelBlue3);
                }

                // Add current label to group of labels
                self.stck.labels.push(label);
            }

        }



        // will be used as a counter in update, adding in the width of each stacked block to check if the end matches the floor selected position
        self.stck.curBlockEnd = self.startX + self.stck.blocks[0].width * self.DIREC_LEVEL;



        let restart = false;

        // check for errors (level too easy for its difficulty or end position out of bounds)
        if (!hasBaseDifficulty ||
            (sublevelType == 'Plus' && (self.floor.correctXA < (self.startX + self.defaultBlockWidth) ||
                self.floor.correctXA > (self.startX + 8 * self.defaultBlockWidth))) ||
            (sublevelType == 'Minus' && (self.floor.correctXA < (self.startX - (8 * self.defaultBlockWidth)) ||
                self.floor.correctXA > (self.startX - self.defaultBlockWidth)))
        ) {
            restart = true; // If any error is found restart the level
        }

        if (debugMode) console.log("Stacked blocks: " + total + " (min: " + (mapPosition + 2) + ", max: " + max + ")");

        return restart;

    },

    func_createFloorBlocks: function () { // for each floor block

        const divisor = (gameDifficulty == 3) ? 4 : gameDifficulty; // Make sure valid divisors are 1, 2 and 4 (not 3)

        let total = 8 * divisor; // Number of floor blocks

        const blockWidth = self.defaultBlockWidth / divisor; // Width of each floor block

        // If game is type B, selectiong a random floor x position
        if (levelType == 'B') {

            self.stck.correctIndex = game.math.randomInRange(0, (self.stck.blocks.length - 1)); // correct stacked index

            self.floor.correctXB = self.startX + self.defaultBlockWidth * self.DIREC_LEVEL;

            for (let i = 0; i <= self.stck.correctIndex; i++) {
                self.floor.correctXB += self.stck.blocks[i].width * self.DIREC_LEVEL; // equivalent x position on the floor
            }

        }



        let flag = true;

        for (let i = 0; i < total; i++) { // for each floor block

            // 'x' coordinate for floor block
            const x = self.startX + (self.defaultBlockWidth + i * blockWidth) * self.DIREC_LEVEL;

            if (flag && levelType == 'A') {
                if (
                    (sublevelType == 'Plus' && x >= self.floor.correctXA) ||
                    (sublevelType == 'Minus' && x <= self.floor.correctXA)
                ) {
                    self.floor.correctIndex = i - 1; // Set index of correct floor block
                    flag = false;
                }
            }

            if (levelType == 'B') {
                if (
                    (sublevelType == 'Plus' && x >= self.floor.correctXB) ||
                    (sublevelType == 'Minus' && x <= self.floor.correctXB)
                ) {
                    total = i;
                    break;
                }
            }

            // Create floor block
            const lineSize = 0.9;
            const block = game.add.graphic.rect(
                x,
                462 + self.defaultBlockHeight - lineSize,
                blockWidth - lineSize,
                self.defaultBlockHeight - lineSize,
                colors.blueBckg,
                lineSize,
                colors.blueBckgLevel,
                1);
            const anchor = (sublevelType == 'Minus') ? 1 : 0;
            block.anchor(anchor, 0);

            // If game is type A, adding events to floor blocks
            if (levelType == "A") {
                block.alpha = 0.5;
                block.index = i;
            }

            // Add current label to group of labels
            self.floor.blocks.push(block);

        }

        if (levelType == 'A') self.floor.correctX = self.floor.correctXA;
        else if (levelType == 'B') self.floor.correctX = self.floor.correctXB;

        // Creates labels on the floor to display the numbers
        for (let i = 1; i < 10; i++) {

            const x = self.startX + (i * self.defaultBlockWidth * self.DIREC_LEVEL);

            game.add.text(x, 462 + self.defaultBlockHeight + 58, i - 1, textStyles.valueLabelBlue1);

        }

    },

    func_viewHelp: function () {

        if (!self.hasClicked) {

            // On levelType A
            if (levelType == 'A') {
                const aux = self.floor.blocks[0];
                self.help.x = self.floor.correctX - aux.width / 2 * self.DIREC_LEVEL;
                self.help.y = 501;
                // On levelType B
            } else {
                const aux = self.stck.blocks[self.stck.correctIndex];
                self.help.x = aux.x + aux.width / 2 * self.DIREC_LEVEL;
                self.help.y = aux.y;
            }

            self.help.alpha = 0.7;

        }

    },



    /* METADATA FOR GAME */

    func_postScore: function () {

        // Create some variables we need to send to our PHP file
        const data = "&s_game=" + gameShape
            + "&s_mode=" + levelType
            + "&s_oper=" + sublevelType
            + "&s_leve=" + gameDifficulty
            + "&s_posi=" + mapPosition
            + "&s_resu=" + self.result
            + "&s_time=" + game.timer.elapsed
            + "&s_deta="
            + "numBlocks:" + self.stck.blocks.length
            + ", valBlocks: " + self.divisorsList // ends in ','
            + " blockIndex: " + self.stck.index
            + ", floorIndex: " + self.floor.index;

        postScore(data);

    },

};