Show HN: pure client-side Connect Four AI with Web Workers, AngularJS, Firebase | Hacker News Reader

Show HN: pure client-side Connect Four AI with Web Workers, AngularJS, Firebase

jsbin.com

39 pointshieu13 comments

Seeing this reminds me of a similar project I had to do as an undergrad, though nowhere as fun/elegant as the submitter's. Also nice to see web workers implemented for the AI as it's a great usage example.

We were given the choice to alternatively implement a board game (pending approval) instead of taking a more formal final exam. The only catch was since it was a course focusing on Java, we had to use Swing (which if one has used Swing, the formal exam almost looks like the better option).

Figuring the game would be more fun, I ended up implementing connect four, thinking it would naively be easy enough to do the basics based on my previous GUI experience with Windows Forms and HTML/CSS and add to it if I had time. Boy, was I wrong.

Writing the game engine/logic was a great experience, but dealing with Swing took probably 70% of the time and had to ditch doing AI for a 2 player only approach. Just the quirky/unintuitive nature of the Swing GUI builders in comparison to Visual Studio Windows GUI Forms made it easier to just write out the GUI by hand (which was not that much better). The issue of it isn't even Swing itself causing headaches so much as the way the official Swing SDK written[1].

Code for it is on my Github still, but other than serving as a reference for anyone else (and warning in the readme), I think I would rather start over in a different language than contribute anymore to it :).

[1] A snippet of Qt Jambi and the same code written with the official Swing SDK (http://pastie.org/8324820)

Awesome work!

There's a bug in the UI: placing a token should start the game in the same way as clicking "OK, go". Currently, the game itself will work fine but the red arrows at the top don't appear, and the text "You will play first?" doesn't change.

Why was this posted again after one day? https://news.ycombinator.com/item?id=6376422

The AI is impressive, but it mostly fails when you just go for a horizontal four at the lowest row. I won 4 out of 3 games like that.

UI is good, gets the job done.

That is a VERY impressive record. I guess you really are a step ahead of the AI. ;-)

Very cool. Scanning the source code makes it look like you were using Alpha-Beta pruning[0], but I'm not totally sure why the function is named 'pvs'. Does anyone have a quick explanation?

[0]: http://en.wikipedia.org/wiki/Alpha%E2%80%93beta_pruning

Thanks! PVS (Principal Variation Search) is an improved version of AlphaBeta. How much improvement depends on the quality of your move ordering algorithm. http://chessprogramming.wikispaces.com/Principal+Variation+S...

This game is not fun to play.

The graphics and the UI are solid. And apparently, the AI is also solid.

Good work. How about a human vs human version?

My main goal in building this is to demonstrate that at this point (with HTML5 & V8) Javascript is not only good for UI but also for computationally intensive tasks like AI. Human vs human is also interesting, though.

Wow, great work. Does the AI play perfectly?

Edit: Looks like the answer is no, since I drew it while playing second. One option to improve the engine could be to give it an opening book (this is what they do with chess engines).

Thanks! No, it doesn't play optimally even though this game has been solved. That's not really fun, either. What it does is to try to think like human and at the same time as deeply as possible. If you click on the number, it will show more stats. The computer lost more than 20 games up to this point.

Filling in the first row from the center out beats the AI every time.... I'm sure the AI is a technical marvel - still needs some work though.

It's quite strong. Thanks for creating this.

Reply on news.ycombinator.com