currently i am working on javascript. Learning deep etc. So i decided to made my own tic tac toe game 4x4 without any tips. Then i stucked. If anyone can help me will be perfect. Game is playable right now. But i can't set the algorithm who win the game? What should i refer for winner? All winner positions to an array, or save the player moves and put it in the algorithm?

Game is on 4x4 table, 3 in a row(vertical, horizontal or diagonal) won the game.

I am adding jsfiddle right here. Thanks in advance.


    const PLAYER = "X";
    const COMPUTER = "O";
    let game_status = true;
    var emptyCells = [];
    var playerPos = [];
    var computerPos = [];

$('.col').click(function() {

    //Do Not Click Filled Div
    if ($(this).text().length !== 0) {

    //Save Player Moves
    playerPos.push([Number($(this).attr("data-x")), Number($(this).attr("data-y"))]);

    //Make Click

    //Clear Empty Cells To Fill Later!
    emptyCells = [];

    //Let Computer Move

function computerMove(){

    //Save Computer Moves

    //Add All Empty Cells To An Array
    for(let x=1; x<=4; x++){
        for (let y=1; y<=4; y++) {
            if ($('.col[data-x='+x+'][data-y='+y+']').text().length == 0) {

    //Click Random Empty Cell
    if (emptyCells.length > 0) {
    let computerChoice = emptyCells[Math.floor(Math.random() * emptyCells.length)];

function isGameOver($req) {


    //Vertical Check

    //Horizontal Check

    //Diagonal Check


This is the HTML codes:

    <div class="row">
    <div class="col" data-x="1" data-y="1"></div>
    <div class="col" data-x="1" data-y="2"></div>
    <div class="col" data-x="1" data-y="3"></div>
    <div class="col" data-x="1" data-y="4"></div>

<div class="row">
    <div class="col" data-x="2" data-y="1"></div>
    <div class="col" data-x="2" data-y="2"></div>
    <div class="col" data-x="2" data-y="3"></div>
    <div class="col" data-x="2" data-y="4"></div>

<div class="row">
    <div class="col" data-x="3" data-y="1"></div>
    <div class="col" data-x="3" data-y="2"></div>
    <div class="col" data-x="3" data-y="3"></div>
    <div class="col" data-x="3" data-y="4"></div>

<div class="row">
    <div class="col" data-x="4" data-y="1"></div>
    <div class="col" data-x="4" data-y="2"></div>
    <div class="col" data-x="4" data-y="3"></div>
    <div class="col" data-x="4" data-y="4"></div>


If i put all correct solutions, it works like charm. But i need dynamically improve my code. For example;

    const grid = [
[' ', ' ', ' ', ' '],
[' ', ' ', ' ', ' '],
[' ', ' ', ' ', ' '],
[' ', ' ', ' ', ' '],

const wonMoves = [
[[1,1], [2,2], [3,3]],
[[1,1], [1,2], [1,3]],


After a move. I can change grid[i][j]; then i can check if it matches the correct solutions.But what if tictactoe game 10x10 board? Now what? This should be dynamic. Thats what i need, that code improvement would be great. Thanks.


closed as off-topic by Toby Speight, yuri, 200_success, IEatBagels, Graipher May 30 at 21:16

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – Toby Speight, yuri, 200_success, IEatBagels
If this question can be reworded to fit the rules in the help center, please edit the question.

  • \$\begingroup\$ Welcom to code review. Unfortunately this post is off topic. On code review we only suggest improvements to working code. \$\endgroup\$ – Sandro4912 May 30 at 13:07
  • \$\begingroup\$ Actually its working when i made all correct solutions. Like this, i am editing question right now. \$\endgroup\$ – Ali Özen May 30 at 14:25