Scratch

Lucario621 · 2012-09-10 21:49:56

Tic Tac Toe (Easy)
Tic Tac Toe (Medium)
Tic Tac Toe (Hard)
Tic Tac Toe (Expert) (unbeatable)

In some of my free time during the past months (especially the summer), I've been taking the time to learn javascript - a language used to make web pages interactive on your browser. The main resources I have used to learn the language are w3schools and Codecademy.

Although the language isn't that hard to learn in my opinion, there's quite a lot you can do with it. And so to practice my skills I decided to make a Tic Tac Toe game with it. Part of my inspiration for doing this was also this xkcd comic. I figured that if I wanted to try making game AIs, Tic Tac Toe would be the first game I should try.

It was overall quite a fun project to make. Once I got the buttons working, all there was left to do was code the main game logic. The AI was relatively easy to make, except for making sure it avoided certain types of "forks".

What do you guys think? Are you able to beat the different levels? tongue And have you ever tried coding in javascript? If you've found a bug or you're interested in how it works, feel free to ask. smile

p.s. Thanks to fg123 for some help with the coding.

Last edited by Lucario621 (2012-09-10 21:52:11)

adriangl · 2012-09-10 22:21:16

Pretty cool, been a while since I've seen one of your collaborations with fg123 tongue

fg123 · 2012-09-10 22:31:45

adriangl wrote:
Pretty cool, been a while since I've seen one of your collaborations with fg123

Not really a collab. I just helped him with pieces of code here and there, but hey.

And it's been a while since I've heard you! tongue

jji7skyline · 2012-09-10 22:36:48

I won unbeatable! This is very good smile

EDIT: I am learning Javascript also, with Codeacademy. I know the basics but I still want to learn how to use it on webpages smile

Last edited by jji7skyline (2012-09-10 22:37:30)

veggieman001 · 2012-09-10 22:38:53

I didn't see a difference whilst playing hard and veggie modes.

Lucario621 · 2012-09-10 22:46:19

jji7skyline wrote:
I won unbeatable! This is very good

EDIT: I am learning Javascript also, with Codeacademy. I know the basics but I still want to learn how to use it on webpages

Wow, really? Can you tell me how? xD I couldn't figure out how to beat it myself, but if there's a certain tactic that works, then consider it unintended. tongue

Wickimen · 2012-09-10 22:46:56

veggieman001 wrote:
I didn't see a difference whilst playing hard and veggie modes.

Hail the exprt!1 yikes

Last edited by Wickimen (2012-09-10 22:47:02)

kayybee · 2012-09-11 00:39:40

How to beat expert:
1. Center
2. If gone on side, restart. (it may be possible to beat it like this, but I don't have time yet to figure it out). If in corner, go in direct opposite corner.
3. If made 2 in a row, block. If not, go to the place to make a fork.
4. Win.

Does this work?

veggieman001 · 2012-09-11 00:50:15

kayybee wrote:
How to beat expert:
1. Center
2. If gone on side, restart. (it may be possible to beat it like this, but I don't have time yet to figure it out). If in corner, go in direct opposite corner.
3. If made 2 in a row, block. If not, go to the place to make a fork.
4. Win.

Does this work?

It does.

jji7skyline · 2012-09-11 01:18:19

It's only sometimes possible to win though, depending on the opponent's move. Otherwise, a draw is the best possible.

slinger · 2012-09-11 01:36:59

kayybee wrote:
How to beat expert:
1. Center
2. If gone on side, restart. (it may be possible to beat it like this, but I don't have time yet to figure it out). If in corner, go in direct opposite corner.
3. If made 2 in a row, block. If not, go to the place to make a fork.
4. Win.

Does this work?

Yup, it does.

Hardmath123 · 2012-09-11 07:51:51

kayybee wrote:
If gone on side, restart. (it may be possible to beat it like this, but I don't have time yet to figure it out)

3. Move in the corner next to the opponent's piece.
4. Opponent will try to avoid your win by placing in opposite corner
5. Place it on the side square which touches both your first and second moves.
6. Win.
wink

Hardmath123 · 2012-09-11 07:54:17

@Lucario: I made a perfect, truly unbeatable player: http://pastehtml.com/view/cb9pbi0gs.html
Check it out, it's quite fun. smile

Last edited by Hardmath123 (2012-09-11 07:57:46)

nathanprocks · 2012-09-11 08:05:41

This does not work in Internet Explorer (Chrome is broken).

mythbusteranimator · 2012-09-11 08:32:25

Who....cool!

ProgrammingPro01 · 2012-09-11 09:29:09

That's awesome, good job. big_smile

Lucario621 · 2012-09-11 15:37:02

kayybee wrote:
How to beat expert:
1. Center
2. If gone on side, restart. (it may be possible to beat it like this, but I don't have time yet to figure it out). If in corner, go in direct opposite corner.
3. If made 2 in a row, block. If not, go to the place to make a fork.
4. Win.

Does this work?

Ah, I never tested that! I'll try to fix that when I get a chance.

Hardmath123 wrote:
@Lucario: I made a perfect, truly unbeatable player: http://pastehtml.com/view/cb9pbi0gs.html
Check it out, it's quite fun.

Wow, that's awesome! I like how you made the buttons actually un-clickable once they are activated - something I was a bit too lazy to do. tongue I looked at your code, and although I'm unable see how all of it works (since I'm not that experienced), I can tell that there are some differences, like how you store the values (you use a multi-dimensional array, while I use an indexed array). If you're interested, my Tic Tac Toe program actually has some console logging scripts, which you can see with Firebug or something else like the Chrome Dev Tools.

nathanprocks wrote:
This does not work in Internet Explorer (Chrome is broken).

Hmm, I don't know how to help you with that. hmm I can't get it to work with my IE9 browser either, but I don't really know why.

evo12 · 2012-09-11 17:49:30

cool!

veggieman001 · 2012-09-11 18:40:33

Lucario621 wrote:
nathanprocks wrote:
This does not work in Internet Explorer (Chrome is broken).
Hmm, I don't know how to help you with that. I can't get it to work with my IE9 browser either, but I don't really know why.

Because Microsoft sucks at web standards??

Lucario621 · 2012-09-11 18:50:01

veggieman001 wrote:
Lucario621 wrote:
nathanprocks wrote:
This does not work in Internet Explorer (Chrome is broken).
Hmm, I don't know how to help you with that. I can't get it to work with my IE9 browser either, but I don't really know why.
Because Microsoft sucks at web standards??

I'm not sure about that, but IE does have some weird default settings for javascript, that's for sure...

soupoftomato · 2012-09-11 19:09:37

Lucario621 wrote:
veggieman001 wrote:
Lucario621 wrote:

Hmm, I don't know how to help you with that. I can't get it to work with my IE9 browser either, but I don't really know why.
Because Microsoft sucks at web standards??
I'm not sure about that, but IE does have some weird default settings for javascript, that's for sure...

Veggie is right. They just sort of
do what they feel

dvd4 · 2012-09-11 19:48:52

here is a "tic-tac-toe in javascript"

Hardmath123 · 2012-09-11 21:15:38

Lucario621 wrote:
kayybee wrote:
How to beat expert:
1. Center
2. If gone on side, restart. (it may be possible to beat it like this, but I don't have time yet to figure it out). If in corner, go in direct opposite corner.
3. If made 2 in a row, block. If not, go to the place to make a fork.
4. Win.

Does this work?
Ah, I never tested that! I'll try to fix that when I get a chance.

Hardmath123 wrote:
@Lucario: I made a perfect, truly unbeatable player: http://pastehtml.com/view/cb9pbi0gs.html
Check it out, it's quite fun.
Wow, that's awesome! I like how you made the buttons actually un-clickable once they are activated - something I was a bit too lazy to do. I looked at your code, and although I'm unable see how all of it works (since I'm not that experienced), I can tell that there are some differences, like how you store the values (you use a multi-dimensional array, while I use an indexed array). If you're interested, my Tic Tac Toe program actually has some console logging scripts, which you can see with Firebug or something else like the Chrome Dev Tools.

I set button.disabled to "disabled" (I think).

My code uses a true game tree — for the given position, I play all completions to the end, and select a move which leads to me winning in the end. http://wiki.scratch.mit.edu/wiki/Game_Tree smile

Lucario621 · 2012-09-11 21:59:46

Hardmath123 wrote:
My code uses a true game tree — for the given position, I play all completions to the end, and select a move which leads to me winning in the end. http://wiki.scratch.mit.edu/wiki/Game_Tree

That's interesting! I forgot we had a wiki article about that. tongue I guess that involves recursion, right?

thebriculator · 2012-09-11 22:07:36

It doesn't work for me.

but hardmath's does, although it is very slow

Scratch

archived forums

#1 2012-09-10 21:49:56

Tic Tac Toe in Javascript

#2 2012-09-10 22:21:16

Re: Tic Tac Toe in Javascript

#3 2012-09-10 22:31:45

Re: Tic Tac Toe in Javascript

adriangl wrote:

#4 2012-09-10 22:36:48

Re: Tic Tac Toe in Javascript

#5 2012-09-10 22:38:53

Re: Tic Tac Toe in Javascript

#6 2012-09-10 22:46:19

Re: Tic Tac Toe in Javascript

jji7skyline wrote:

#7 2012-09-10 22:46:56

Re: Tic Tac Toe in Javascript

veggieman001 wrote:

#8 2012-09-11 00:39:40

Re: Tic Tac Toe in Javascript

#9 2012-09-11 00:50:15

Re: Tic Tac Toe in Javascript

kayybee wrote:

#10 2012-09-11 01:18:19

Re: Tic Tac Toe in Javascript

#11 2012-09-11 01:36:59

Re: Tic Tac Toe in Javascript

kayybee wrote:

#12 2012-09-11 07:51:51

Re: Tic Tac Toe in Javascript

kayybee wrote:

#13 2012-09-11 07:54:17

Re: Tic Tac Toe in Javascript

#14 2012-09-11 08:05:41

Re: Tic Tac Toe in Javascript

#15 2012-09-11 08:32:25

Re: Tic Tac Toe in Javascript

#16 2012-09-11 09:29:09

Re: Tic Tac Toe in Javascript

#17 2012-09-11 15:37:02

Re: Tic Tac Toe in Javascript

kayybee wrote:

Hardmath123 wrote:

nathanprocks wrote:

#18 2012-09-11 17:49:30

Re: Tic Tac Toe in Javascript

#19 2012-09-11 18:40:33

Re: Tic Tac Toe in Javascript

Lucario621 wrote:

nathanprocks wrote:

#20 2012-09-11 18:50:01

Re: Tic Tac Toe in Javascript

veggieman001 wrote:

Lucario621 wrote:

nathanprocks wrote:

#21 2012-09-11 19:09:37

Re: Tic Tac Toe in Javascript

Lucario621 wrote:

veggieman001 wrote:

Lucario621 wrote:

#22 2012-09-11 19:48:52

Re: Tic Tac Toe in Javascript

#23 2012-09-11 21:15:38

Re: Tic Tac Toe in Javascript

Lucario621 wrote:

kayybee wrote:

Hardmath123 wrote:

#24 2012-09-11 21:59:46

Re: Tic Tac Toe in Javascript

Hardmath123 wrote:

#25 2012-09-11 22:07:36

Re: Tic Tac Toe in Javascript

Board footer