Connect Four - jQuery

Question

I'm having serious problems with my jQuery homework (I'm a student and a JS beginner).

Basically the assignment is to create a Connect four game with jQuery using the MV(C) (we don't use the controller) schema.

The playing field is a 2D array and looks like this.

- , - , - , - , - , - , - 
- , - , - , - , - , - , - 
- , - , - , - , - , - , - 
- , - , - , - , - , - , - 
- , - , - , - , - , - , - 
- , - , - , - , - , - , - 

and the players play by pressing the columns (f.ex. Player 1 presses 3)

- , - , - , - , - , - , - 
- , - , - , - , - , - , - 
- , - , - , - , - , - , - 
- , - , - , - , - , - , - 
- , - , - , - , - , - , - 
- , - , x , - , - , - , - 

and the Player 2 presses 4

- , - , - , - , - , - , - 
- , - , - , - , - , - , - 
- , - , - , - , - , - , - 
- , - , - , - , - , - , - 
- , - , - , - , - , - , - 
- , - , x , o , - , - , - 

and so on.

When the game is over the winning four letter should change to uppercase.

I'm stuck and don't really know how to go on so I created a GitHub repository with all the code.

https://github.com/VeronicaLeeds/connectfour

Basically it initializes the playing field and you can press the numbers but then the play() method won't work.

I don't know any other way to call the function from View.

I tried View().play , View.play() , play() ... But there i always an error.

if (evt.which == 49) {
   View().play(1);
   return 1;
   console.log('1');
}

The play() function is in the View.js file.

Would be eternally grateful for any help.

Answer 1

A little heads up, you should work on renaming your files to something significant. It's hard to find the relevant code when the names of some files are as vague as js.js.

That aside, your function checkIfWon(arr) in js.js uses the method checkForFour(), which takes in an array as a parameter and returns true or false based on whether 4 pieces from the same player have been detected.

Since it would be redundant to iterate twice over the same array, you could make checkIfWon(arr) return an empty array if no connect-4 was detected, and column (with the winning streak in uppercase) if there was a connect-4 detected.

For instance:

// Horizontal
var tempArrayHorizontal = new Array(7);
for (var row = 0; row <= 5; row++) {
    for (var col = 0; col <= 6; col++) { 
        tempArrayHorizontal[col] = playFieldArray[col][row];
    }
    var result = checkForFour(tempArrayHorizontal);
    if (result !== []) {
        for (var col = 0; col <= 6; col++) { // we re-iterate the same way we did when you populated tempArrayHorizontal
            playFieldArray[col][row] = result[col];
        }
        return true;
    }
}

and your checkForFour function:

function checkForFour(input) {
    var count = 0;
    for (var i = 0; i < input.length; i++) {
        if (input[i] === currentPlayer) {
            count++;
            if (count === 4) {
                // replace the 4 previous column to uppercase
                input.splice(i-4, 4, currentPlayer.toUpperCase(), currentPlayer.toUpperCase(), currentPlayer.toUpperCase(), currentPlayer.toUpperCase());
                return input;
            }
        } else {
            count = 0;
        }
    }
    return [];
}

I haven't tested it, so you'll have to confirm on your end.

Good luck!