// MY GRID var list = [[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]]; // SIZE OF EACH BLOCK. PLEASE DON'T CHANGE THIS VALUE var bsize = 42; // CALLING THE VERIFICATION FUNCTION AT THE BOTTOM var t = setInterval(Verification, 1); // FORMATION OF GRID WHEN CLICKING THE START BUTTON function grid(){ var svg = document.getElementById("svg"); var button = document.getElementById("start"); button.style.display = "none"; var buttons = document.getElementById("buttons"); buttons.innerHTML += ""; for (var i = 0; i < bsize*8; i+=bsize){ svg.innerHTML += ""; svg.innerHTML += ""; } } // DECIDING THE HEIGHT AT WHICH THE BLOCK SHOULD BE PLACED var last = bsize*7; var y = [last, last, last, last, last, last, last, last]; var color = "red"; // MAIN FUNCTION, WHICH IS CALLING ALL THE IMPORTANT FUNCTIONS IN IT function func(xValue) { xValue = parseInt(xValue); var svg = document.getElementById("svg"); svg.innerHTML += ""; Verification(); list[y[parseInt(xValue)]/bsize][parseInt(xValue)] = (color=="red")?1:2; y[parseInt(xValue)] -= bsize; if (color == "red"){ color = "blue"; var comp = AI(xValue); func(comp); } else { color = "red"; } disabled(); } // VERIFICTAION FUNCTION ALREADY USED ABOVE // THIS FUNCTION IS TO VERIFY WHETHER A PLAYER WON OR NOT function Verification() { var body = document.getElementById("body"); for (var i = 0; i < 9; i++){ for (var j = 0; j < 8; j++){ if (list[i][j] !== 0){ try{ // CHECKING FOR 4 CONSECUTIVE BLOCKS IN ALL DIRECTIONS if ((list[i][j] === list[i][j+1] && list[i][j+1] === list[i][j+2] && list[i][j+2] === list[i][j+3]) || (list[i][j] === list[i-1][j+1] && list[i-1][j+1] === list[i-2][j+2] && list[i-2][j+2] === list[i-3][j+3]) || (list[i][j] === list[i+1][j] && list[i+1][j] === list[i+2][j] && list[i+2][j] === list[i+3][j]) || (list[i][j] === list[i+1][j+1] && list[i+1][j+1] === list[i+2][j+2] && list[i+2][j+2] === list[i+3][j+3])){ clearInterval(t); body.innerHTML = ""; // IF PLAYER 1 WINS THEN SHOW THE A PAGE FOR PLAYER 1 AND IF AI THEN THE SECOND PAGE IS SHOWN if (list[i][j] === 1){ body.innerHTML += "

YOU WON

"; } if (list[i][j] === 2){ body.innerHTML += "

AI WON

"; } // THERE IS AN H2 WITH ID RESULT BELOW THE HEADING OF THE WIN PAGE. WE ARE FILLING THAT var result = document.getElementById("result"); // SHOWING ALL THE ELEMENTS OF THE GRID result.innerHTML = "
"; for (let k = 0; k < 8; k++){ for (let l = 0; l < 8; l++){ result.innerHTML += "| " + list[k][l] + " "; } result.innerHTML += "|
"; } } } //IN CASE THERE IS AN INDEX ERROR THEN DO NOTHING catch(e){} } } } } // RESPONSIBLE FOR SHOWING AND HIDING THE RULES var c = 0; function showRules() { c++; var text = document.getElementById("rulestext"); var rules = document.getElementById("rules"); // C IS INCREASED EVERYTIME THE FUNCTION IS CALLED, WHEN THE BUTTON 'RULES' IS CLICKED IF IT IS DIVISIBLE BY 2 THEN DONT SHOW THE RULES ELSE SHOW RULES if (c%2 == 1){ text.innerHTML = "

PLOT4 is a game where in you have to make 4 consecutive boxes. They can be in any direction even diagonally also. This time, there's something special! Your match will be against the AI/computer. Your color will be red and computer's color will be blue.

There will be a grid of 8x8 purple boxes. The computer will take its turn instantly after you take your move. There will be 8 buttons at the top. You will have to click the button above the column you want to put your square in.
Due to gravity, the blocks will go to the bottom. And in this way, the blocks will be placed above each other until they reach the top. If the column is full then the respective button will get disabled.

Suggestion: Try to make diagonals! This is AI's weakness!

If any of the players wins then the result page is shown where the table is shown in the way- for all the blocks in the grid, if the block was empty, its placeholder will be '0' if the block was red then the placeholder will be '1' if blue then '2'.
Not suggested: If you don't want to play with AI then you can delete the line 41 and 42 of the js code. Then you will have to move on behalf of both the players.

ALL THE BEST!

"; rules.innerHTML = "Hide Rules"; } else{ text.innerHTML = ""; rules.innerHTML = "Show Rules"; } } // THIS IS THE MOST DIFFICULT FUNCTION I HAVE EVER MADE // THIS FUNCTION DECIDES THAT THE COMPUTER SHOULD TAKE WHICH STEP // THIS IS NOT AT ALL AN AI! IT IS SIMPLY MADE USING IF STATEMENTS ON THE LIST (REPRESENTING THE BLOCKS AND SHOWN AT THE LAST) function AI(xValue) { var lst = [xValue-1, xValue+1]; var random = Math.floor(Math.random() * lst.length); var comp = lst[random]; for (i = 1; i < 9; i++){ for (j = 0; j < 8; j++){ // VERTICAL 2 // CHECKING FOR 2 CONSECUTIVE BLOCKS if (i < 8 && list[i][j] === list[i+1][j] && list[i][j] === 1){ if (i > 1 && list[i-1][j] !== 0){ continue; } if (i > 1 && list[i][j+2] === 0 && list[i+1][j+2] === 0 && list[i-1][j] !== 0 && list[i-1][j+1] !== 0){ comp = j; break; } if (i > 1 && list[j][j-1] === 0 && list[i+1][j-1] === 0 && list[i-1][j] !== 0 && list[i-1][j+1] !== 0){ comp = j+1; break; } else { comp = xValue; } } } } for (i = 1; i < 9; i++){ for (j = 0; j < 8; j++){ // HORIZONTAL 2 // CHECKING FOR 2 CONSECUTIVE BLOCKS if (list[i][j] === list[i][j+1] && list[i][j+1] === 1){ if (list[i][j-1] === list[i][j+2] && list[i][j-1] === 2){ continue; } else if ((list[i][j+2] === 2 || j === 6) && (i === 7 || list[i+1][j-1] !== 0) && list[i][j-1] === 0){ comp = j-1; } else if ((j === 0 || list[i][j-1] === 2) && (i === 7 || list[i+1][j+2] !== 0) && list[i][j+2] === 0) { comp = j+2; } } } } for (i = 1; i < 9; i++){ for (j = 0; j < 8; j++){ // HORIZONTAL 1 // CHECKING FOR 3 CONSECUTIVE BLOCKS if (j <= 6 && list[i][j] === list[i][j+1] && list[i][j+1] === list[i][j+2] && list[i][j] === 1){ if (list[i][j-1] === list[i][j+3] && list[i][j-1] === 2){ continue; } if ((i === 8 || (i < 8 && list[i+1][j-1] !== 0)) && list[i][j-1] === 0){ comp = j-1; break; } if ((i === 8 || (i < 8 && list[i+1][j+3])) !== 0 && list[i][j+3] === 0){ comp = j+3; break; } if (list[i][j+3] === 2 && (i === 8 || list[i+1][j-1] !== 0)){ comp = j-1; break; } if (list[i][j-1] === 2 && (i === 8 || list[i+1][j+3] !== 0)){ comp = j+3; break; } if (list[i+1][j-1] === 0){ if (list[i][j+3] === 0 && list[i+1][j+3] !== 0){ comp = j+3; break; } else if (list[i][j+3] === 0 && list[i+1][j+3] === 0 && xValue === j+2 && i < 8 && list[i-1][j+2] === 0){ comp = xValue-1; break; } else if (i >= 7 && list[i][j-1] === 2) { comp = j+3; break; } } if (list[i+1][j+3] === 0){ if (list[i][j-1] === 0 && list[i+1][j-1] !== 0){ comp = j-1; break; } else if (list[i][j-1] === list[i+1][j-1] && list[i+1][j-1] === 0 && xValue === j && i < 8 && list[i-1][j] === 0) { comp = xValue+1; break; } else if (i >= 7 && list[i][j+3] === 2){ comp = j-1; break; } else if (xValue === j){ comp = xValue; } } } } } for (i = 1; i < 9; i++){ for (j = 0; j < 8; j++){ // CHECKING FOR ADVANCED HORIZONTAL // CHECKING FOR 1 1 - 1 OR 1 - 1 1 if (list[i][j] !== 0 && list[i][j] === list[i][j+1] && list[i][j+1] === list[i][j+3] && list[i+1][j+2] !== 0 && list[i][j+2] === 0){ comp = j+2; } else if (list[i][j] !== 0 && list[i][j] === list[i][j+2] && list[i][j+2] === list[i][j+3] && list[i][j+1] === 0 && list[i+1][j+1] !== 0){ comp = j+1; } } } for (i = 1; i < 9; i++){ for (j = 0; j < 8; j++){ // DIAGONAL MINOR CHECK // CHECKING FOR 3 CONSECUTIVE BLOCKS. DID NOT CHECK THE ADVANCED POSSIBILTIES if (i >= 2 && list[i][j] === 1 && list[i][j] === list[i-1][j-1] && list[i-1][j-1] === list[i-2][j-2] && list[i-2][j-3] !== 0 && list[i-3][j-3] === 0){ comp = j-3; } else if (i < 5 && list[i][j] === 1 && list[i][j] === list[i+1][j+1] && list[i+1][j+1] === list[i+2][j+2] && list[i+4][j+3] && list[i+3][j+3] === 0){ comp = j+3; } else if (i >= 2 && list[i][j] === 1 && list[i][j] === list[i-1][j+1] && list[i-1][j+1] === list[i-2][j+2] && list[i-2][j+3] !== 0 && list[i-3][j+3] === 0){ comp = j+3; } else if (i < 5 && list[i][j] === 1 && list[i][j] === list[i+1][j-1] && list[i+1][j-1] === list[i+2][j-2] && list[i+4][j-3] && list[i+3][j-3] === 0){ comp = j-3; } } } for (var i = 1; i < 9; i++){ for (var j = 0; j < 8; j++){ // VERTICAL 1 // CHECKING FOR 3 CONSECUTIVE BLOCKS if (i < 7 && list[i][j] === list[i+1][j] && list[i+1][j] === list[i+2][j] && list[i][j] === 1){ if (list[i-1][j] === 2){ continue; } else { comp = xValue; break; } } } } for (i = 1; i < 9; i++){ for (j = 0; j < 8; j++){ // ATTACK!! // IF THERE ARE ALREADY 3 CONSECUTIVE BLOCKS OF THE AI AND IF THE PLAYER DID NOT SEE THEN, THE COMPUTER WILL PLACE THE 4TH BLOCK if (list[i][j] === 2 && list[i][j] === list[i][j+1] && list[i][j+1] === list[i][j+2] && list[i+1][j+3] !== 0 && list[i][j+3] === 0){ comp = j+3; } else if (list[i][j] === 2 && list[i][j] === list[i][j+1] && list[i][j+1] === list[i][j+2] && list[i+1][j-1] !== 0 && list[i][j-1] === 0){ comp = j-1; } else if (list[i][j] === 2 && list[i][j] === list[i+1][j] && list[i+1][j] === list[i+2][j] && list[i-1][j] === 0){ comp = j; } else if (list[i][j] === 2 && list[i][j] === list[i][j+1] && list[i][j+1] === list[i][j+3] && list[i+1][j+2] !== 0 && list[i][j+2] === 0){ comp = j+2; } else if (list[i][j] === 2 && list[i][j] === list[i][j+2] && list[i][j+2] === list[i][j+3] && list[i+1][j+1] !== 0 && list[i][j+1] === 0){ comp = j+1; } else if (i >= 2 && list[i][j] === 2 && list[i][j] === list[i-1][j-1] && list[i-1][j-1] === list[i-2][j-2] && list[i-2][j-3] !== 0 && list[i-3][j-3] === 0){ comp = j-3; } else if (i >= 2 && j < 5 && list[i][j] === 2 && list[i][j] === list[i-1][j+1] && list[i-1][j+1] === list[i-2][j+2] && list[i-2][j+3] !== 0 && list[i-3][j+3] === 0){ comp = j+3; } } } // CONTROLLING THE VALUE OF COMP // IF COMP GOES TOO BIG THEN DECREASE IT IF TOO SMALL THEN IT IS INCREASED while (comp > 7){ comp--; } while (comp < 0){ comp++; } // IF THE COLUMN CHOSEN BY THE COMPUTER IS ALREADY FULL THEN IT WILL MOVE ON TO THE NEXT. // IF IT CANNOT FIND ANY EMPTY SPACE AFTER IT. IT WILL GO BACKWARDS var compChange = 1; while (y[comp] < 0){ if (comp >= 6){ compChange = -1; } if (comp === 0){ compChange = 1; } comp += compChange; } return comp; } // THIS IS A SIMPLE FUNCTION TO DISABLE THE RESPECTIVE BUTTON FOR THE COLUMN // IF THE COLUMN IS ALREADY FULL! function disabled() { for (var i = 0; i < y.length; i++){ if (y[i] < 0){ b = document.getElementById("b"+(i+1)) if (b !== null){ b.disabled = true; } } } } // THIS CODE CAN SHOW SOME ERRORS OR BUGS! IF YOU ARE ABLE TO SEE ANY ERROR IN THE GAME IN ANY CASE THEN PLEASE TELL ME! AS I HAVE CHECKED AND COULDN'T FIND ANY!

PLOT 4 GAME | YOU vs AI🔥💯 | v2.0