Build a Tic Tac Toe Game feedback please

Build a Tic Tac Toe Game

I finished with this project. The design a bit been difficult but I don’t mind. I learned really a lot. I build my first usable class. I made a lot of positioning and DOM manipulations… Hopefully the AI also works well…
And at least I use vanilla javascript to boost my skill.

Codepen

Live page

1 Like

Hi
The game works on Codepen, I can make moves and the computer responds to avoid losing. But I can’t get the livepage to show anything (on firefox).

On codepen, I’m not sure if the display is as intended. Here’s the final position.
image.
The large letter is the chosen move, but I don’t like it visually.
Plus: there is no announcement of result and no next game button
The scoreboard keeps count of the results – at least as far as 1-0 since I can’t play twice without refreshing.

The game don’t work really well.
There are slots that are not rendering. The computer seem to have access to those non-rendered block, so you can’t win. (This is on your live version)

Hi,
Thank you for testing time. I found the bug. I use 9 carousel to spin in 3D the choosen symbol. These positioning are absolute. And because the carousels rendered dinamicaly by javascript must get unique ID. I created unique ID from the timestamp but as we see sometimes is not enough. If a carousel got the same ID rendered behind the previous one and was not visible. To fix this bug I changed the code at line 5 from

this.scene = {
            timestamp: Date.now(),
            ...
        }

to

this.scene = {
           timestamp: `${Date.now() - this.randNumber(0, 1000000)}`,
            ...
        }

I tested a few times and the rendering bug probable vanished …

Hi,
Till now I had no firefox but I installed right now … and just discovered how user-friendly browser is it at first look (and how many surprise still waiting for me…).
I downloaded the latest version and quickly test the page. I have no any error on console and the page rendered as I expected. The version is 72.0.1 (64-bit).
I also checked here how support firefox the newest web technology.
I use grid layout: it is fully supported from ver. 54 (released Jun. 2017)
… and also used flexbox: fully supported from ver. 28 (2014).
If your version over the ver. 54 must be work well, please test again.

No next game button: I try minimalise everything where is possible. So I did not use Yes/No button because the answer of user is clear. If he don’t want to continue playing close the window or go to another page… but if want to play another turn just simple have to click on the question sentence. I know this is a bit tricky but I tested this solutions with my wife and also with the child and them was not annoying at all. They knew what to do without helping…

That screenshot looks amazing, but I don’t see anything like it on the codepen screen. I don’t have anything to click to start a new game – I don’t see a question sentence. The page is mostly blank with no background picture. I have the board, a scoreboard (just text) and a link to the live version.

The ‘your turn’ text becomes ‘Draw!’ when the game is over, but I have to scroll down to see it and it isn’t clickable. I’ve even tried navigating through the page with the TAB button to find anything that’s clickable but hidden.

My FireFox is only one update behind the latest.
The page at http://cselko.offyoucode.co.uk/fcc/take_home/tic_tac_toe/ is still blank on my machine. The console is giving a CORS error.

Hi,
Yesterday my host server was crashed :frowning:
But today you can take a look to the live page. I dont’t know how to upload images to the codepen. Without images is not visible the design only the sceleton of the page… I also supplement the css. with media query. Now the design already responsive. On mobile works well.
And sorry for the inconvenience…