For a long time, I have been waiting for the opportunity to do a project that implements Artificial Intelligence or Realtime programming using sockets. And recently, I got the opportunity to implement both of these at once.

The game I made is just similar to every other Tic Tac Toe game, however, you require 5 consecutive Xs or Os to win instead of 3. Additionally, you have the ability to play with other players over the internet. Check the game out from the link: http://fincoapps.com/tic-tac-toe-online-game-with-ai/.

Features include

✔ Ability to set AI difficulty.
✔ Realistic AI (It plays like a real human).
✔ Ability to play with other players online.

One issue I have is that sometimes, there would be 11 tiles in a row instead of 12 depending on the screen size. A solution to this would be greatly appreciated

In case this makes FP. . . .

I just played now, and with all my great skills - i was declared loser. I have attached the screenshot as evidence.

dhtml18:
I just played now, and with all my great skills - i was declared loser. I have attached the screenshot as evidence.

lol pele, see the quote

FincoApps:

One issue I have is that sometimes, there would be 11 tiles in a row instead of 12 depending on the screen size. A solution to this would be greatly appreciated

That was the issue in your case. Try to expand your browser window so the space on the right would not be there.

abeg nothing dey wrong with my browser window. I am using a 15in screen, what if i was using a mini laptop or an ipad?
I think what you need to do is to reduce the size of the boxes jor.

dhtml18:
abeg nothing dey wrong with my browser window. I am using a 15in screen, what if i was using a mini laptop or an ipad?
I think what you need to do is to reduce the size of the boxes jor.

No, I didn't say something is wrong with your browser window, It's actually a phone app so it works well on phones. Just try to make sure the height of your browser is longer than the width. I changed the iframe dimensions so try it now

I have solved the width bug, i had to first duplicate all the game on my localserver first.
I dont know what the total height is expected to be, but this my fix will make sure there are actually 12 columns no matter the resolution,
it solves the bug of why width = width/12; is not actually generating 12 columns - and it works irregardless of the size of your screen.

Here is how to solve it.

Step 1: Open your js/script.js and
Change below
var width = window.innerWidth;
into
var width = $('div.body').width();
inside arrangeTiles() and $(window).resize(function()

Step 2: Open your newAi.html and scroll to the bottom

add
setTimeout(function() {
$(window).trigger('resize');
},400);
after
arrangeTiles();

so that you now have:
<script type="text/javascript">
$(function() {
arrangeTiles();

setTimeout(function() {
$(window).trigger('resize');
},400);
});
</script>


Step 3:

Then add somewhere in the code - patch provided by dhtml18 (a nairaland troll)

I can see you have solved the problem yourself, that is good. So what did you change?

But wait o, that your fix is not really perfect because when you open the game directly into the browser it misbehaves. But my fix will work for all screen sizes, i have tested it out on various browsers already - even mobile browsers and it shows the 12 columns properly.

dhtml18:
I have solved the width bug, i had to first duplicate all the game on my localserver first.
I dont know what the total height is expected to be, but this my fix will make sure there are actually 12 columns no matter the resolution,
it solves the bug of why width = width/12; is not actually generating 12 columns - and it works irregardless of the size of your screen.

Here is how to solve it.

Step 1: Open your js/script.js and
Change below
var width = window.innerWidth;
into
var width = $('div.body').width();
inside arrangeTiles() and $(window).resize(function()

Step 2: Open your newAi.html and scroll to the bottom

add
setTimeout(function() {
$(window).trigger('resize');
},400);
after
arrangeTiles();

so that you now have:
<script type="text/javascript">
$(function() {
arrangeTiles();

setTimeout(function() {
$(window).trigger('resize');
},400);
});
</script>


Step 3:

Then add somewhere in the code - patch provided by dhtml18 (a nairaland troll)

Okay, thanks, but that didn't work. Like I said, the issue is caused by the scroll bar which is about 2px. So subtracting 2 from width/12 actually works, but like I said, it's for mobile and mobile browser scrollbars are negligible.

Wait, before i post. . .brb

Same thing on your server.

Here are the options, you can decide to show scrollbar always like i did in my screenshot.
On use jqueryscrollpane - http://jscrollpane.kelvinluck.com/ to handle scrollbars for you.

The cause of the problem is because the scrollbar was placed on auto previously - so that changes the width of the display erratically. I solved that the simply way by enabling the vertical scrollbar permanently insinde index.css. So no matter how you resize, the app will always fill the screen.

body {
overflow-x:hidden;
overflow-y: scroll !important;
}

dhtml18:
The cause of the problem is because the scrollbar was placed on auto previously - so that changes the width of the display erratically. I solved that the simply way by enabling the vertical scrollbar permanently insinde index.css. So no matter how you resize, the app will always fill the screen.

okay let me try it

dhtml18:
The cause of the problem is because the scrollbar was placed on auto previously - so that changes the width of the display erratically. I solved that the simply way by enabling the vertical scrollbar permanently insinde index.css. So no matter how you resize, the app will always fill the screen.

It worked, thanks mehn. I used both the Js and CSS solution

Wow, Lovely Game i must say... thumbs up FincoApps.. would love to do AI too when i grow up


I'd love if when Daddy plays, some kind of glow fades in and out for probably 2000ms on the played tile. This is to easily know Daddy's current move when the played tiles are many.

But I think the bug isn't fixed, on the site, yet...

FincoApps:

It worked, thanks mehn. I used both the Js and CSS solution

You are welcome. Next, you need to clean up the newAI.html.
You need to avoid duplication of javascript inserts.

Please refer the new version on my server. Then the setTimeout on the footer is not required anymore since we have solved that bug with CSS.

And when you are done let me know so that I can delete the scripts from my server.

Then cordova.js returns 404 error. You can create a temporary blank file to solve that, or remove it from your newAI.html totally.

Thanks dude . I just fixed it now, I won't make further updates to the web version

jacob05:
Wow, Lovely Game i must say... thumbs up FincoApps.. would love to do AI too when i grow up


I'd love if when Daddy plays, some kind of glow fades in and out for probably 2000ms on the played tile. This is to easily know Daddy's current move when the played tiles are many.

But I think the bug isn't fixed, on the site, yet...

I used setTimeout a lot, I'm not sure which of them you mean

dhtml18:

You are welcome. Next, you need to clean up the newAI.html.
You need to avoid duplication of javascript inserts.

Please refer the new version on my server. Then the setTimeout on the footer is not required anymore since we have solved that bug with CSS.

And when you are done let me know so that I can delete the scripts from my server.

And also, I will do highlighting the last move on the mobile version. It became confusing too when I was playing with someone

FincoApps:
Thanks dude . I just fixed it now, I won't make further updates to the web version

FincoApps:
Thanks dude . I just fixed it now, I won't make further updates to the web version

You're welcome... But why are you not considering us, the PC users... it's not FAIR oooo

FincoApps:
I used setTimeout a lot, I'm not sure which of them you mean

It was the one i introduced in one of my posts above. Anyway, it doesn't matter, just replace the newAI.html with the version on my server. That is all.

lol the features it has now is okay, on BlackBerry World, I wanna put some advanced features for only pro users. That's why

jacob05:


You're welcome... But why are you not considering us, the PC users... it's not FAIR oooo

Keep up the good work. I am mightily impressed by your efforts. I assume you got all the corrections because I have wiped it off my server and localhost. It is your original work and it should stay so.

Thanks dude. Yea, I got the corrections and I'm particularly happy about fixing the tile arrangement bug. Thanks once again

dhtml18:
Keep up the good work. I am mightily impressed by your efforts. I assume you got all the corrections because I have wiped it off my server and localhost. It is your original work and it should stay so.

FincoApps:
Thanks dude. Yea, I got the corrections and I'm particularly happy about fixing the tile arrangement bug. Thanks once again

You are welcome o. I am glad i was able to provide some support at least.

Suggestion. When the game loads, and your connection is slow or you have been disconnected from internet. When you play, you may not get sound or see a cross.
Suggestion: cache the images and sound in the browser so that they can be loaded on demand without necessarily going to the server.

lol ha you just want me to keep working on this web version o. I'll try

dhtml18:
Suggestion. When the game loads, and your connection is slow or you have been disconnected from internet. When you play, you may not get sound or see a cross.
Suggestion: cache the images and sound in the browser so that they can be loaded on demand without necessarily going to the server.

Nice ... More speed to your coding fingers.

I enjoyed playing the web version of the game.

Can't sleep, , so i decide to view your code... (was afraid before..lol... make person head no come turn...)

I observe you repeat similar try .... catch blocks which greatly increase the size of your code (bad) and causes a lot of duplication...

so I'd like to suggest this.. (Not Tested.... but should be of help.... i guess )


CheckWon

function checkWon(who,xy, a1,a2){
        var values = new Array(5);
        values[0] = table[xy[0]][xy[1]];
        values[1] = table[xy[0]+ a1[0]][xy[1] + a2[0]];
        values[2] = table[xy[0]+ a1[1]][xy[1] + a2[1]];
        values[3] = table[xy[0]+ a1[2]][xy[1] + a2[2]];
        values[4] = table[xy[0]+ a1[3]][xy[1] + a2[3]];
        console.log(values);
        if (document.getElementById(values[0]).getAttribute('played') == who && 
             document.getElementById(values[1]).getAttribute('played') == who && 
              document.getElementById(values[2]).getAttribute('played') == who && 
              document.getElementById(values[3]).getAttribute('played') == who  && 
             document.getElementById(values[4]).getAttribute('played') == who)//AI has an horizontal winning move
        {
            for(var x= 0; x < values.length; x++)
            {
                $('#'+values[x]).css('background', 'url(img/tile' + who + 'W.png)');
                $('#'+values[x]).css('background-size', '100%,100%');
                $('#'+values[x]).css('background-size', 'cover');
            }
            endGame(who);
            return;
        }

    }

Usage

try {
        //------Check tiles diagonally rightways-------
      
        checkWon(who,getXY(tileID), [1,2,3,4],[1,2,3,4]);
    } catch (e) {
    }

try {
        //------Check tiles vertically-------
       
        checkWon(who,getXY(tileID), [1,2,3,4],[0,0,0,0]);
    } catch (e) {
    }

try {
        //------Check tiles horizontally-------
        
        checkWon(who,getXY(tileID), [0,0,0,0],[1,2,3,4]);
    } catch (e) {
    }

try {
        //------Check tiles diagonally leftways-------
        
        checkWon(who,getXY(tileID), [1,2,3,4],[-1,-2,-3,-4]);
    } catch (e) {
    }

This Can also be tweaked to work for other functions like checkWinningMoveAI and the rest...

^^^joblessness at its peak!