• (3 Pages)
  • +
  • 1
  • 2
  • 3

Simple Tic - Tac - Toe Using HTML5, CSS3 and Javascript Rate Topic: ***** 3 Votes

#16 Curtis Rutland  Icon User is offline

  • (╯□)╯︵ (~ .o.)~
  • member icon


Reputation: 4576
  • View blog
  • Posts: 8,018
  • Joined: 08-June 10

Posted 16 September 2011 - 11:14 PM

Okay, fromTheSprawl has sent me the files, and I've posted them on my web server. You can see the live demo here:

Please be kind to my bandwidth, and remember that if you browse any of the rest of my website, it's still completely a work in progress.


edit: I will no longer be able to host this. Sorry.

Quote

Why so? Is it the same dilemma as Java programmers relying on "System.out" to show stuff while debugging?


If you're interested in debugging statements, most modern browsers support javascript console statements, like console.log(whatever). It'll even deal with objects being logged. In, for example, Chrome, you can see the console by right-clicking, then clicking "Inspect Element", and clicking the second button from the left on the bottom (it looks like >≡).

If you're interested in outputting stuff to the user, I personally use JQuery to replace a div/textbox's text.
Was This Post Helpful? 2
  • +
  • -

#17 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,063
  • Joined: 28-December 10

Posted 17 September 2011 - 12:05 AM

People! When viewing the thing use Chrome! I haven't added the codes for other browsers on the CSS3 part! Thanks Curtis Rutland! I'm using Firebug for debugging the thing but it's nice to know they have a logging feature too... And I'd like to learn jquery one day ^^
Was This Post Helpful? 0
  • +
  • -

#18 Moshambi  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Posted 17 September 2011 - 02:34 AM

Thanks for showing the live demo, very very cool!
Was This Post Helpful? 0
  • +
  • -

#19 Tayacan  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 145
  • View blog
  • Posts: 275
  • Joined: 18-January 11

Posted 17 September 2011 - 06:41 AM

Why I'm against teaching beginners stuff like alert()? Because people tend to overuse and abuse it, and websites with dozens of little message boxes popping up all the time are annoying :P
Was This Post Helpful? 1
  • +
  • -

#20 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2876
  • View blog
  • Posts: 11,051
  • Joined: 15-July 08

Posted 17 September 2011 - 06:48 AM

Wow that animation was something. I wish that firefox suppported it right now, but since it's a webkit thing, I understand.
Was This Post Helpful? 0
  • +
  • -

#21 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Posted 17 September 2011 - 07:09 PM

Firefox does apparently support the CSS3 animation used there. It even uses the same syntax. Just change the vendor prefix to -moz and it should work fine.

This post has been edited by Atli: 17 September 2011 - 07:10 PM

Was This Post Helpful? 1
  • +
  • -

#22 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,063
  • Joined: 28-December 10

Posted 18 September 2011 - 05:10 PM

I left out Firefox, Safari and IE so to give everyone common ground. I'd hate to say it works on IE then someone uses a version that doesn't do HTML5. Thanks Atli for pointing that out. ^^
Was This Post Helpful? 0
  • +
  • -

#23 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 85
  • View blog
  • Posts: 431
  • Joined: 04-December 08

Posted 18 September 2011 - 09:10 PM

Really nice :) Good effort!
Was This Post Helpful? 0
  • +
  • -

#24 nml  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 14-October 11

Posted 14 October 2011 - 05:15 PM

Thanks for this tutorial my friend,
it's simple, explanatory and inspiring.
Cheers!
Was This Post Helpful? 0
  • +
  • -

#25 ATC3  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 54
  • Joined: 04-October 11

Posted 17 October 2011 - 08:55 AM

I really like your tutorial. IT really helped me to understand HTML5 Game developments.
Was This Post Helpful? 0
  • +
  • -

#26 JacksonD  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 215
  • Joined: 18-October 11

Posted 21 October 2011 - 07:59 PM

Some functions didn't work, but all-up a good code.
Was This Post Helpful? 0
  • +
  • -

#27 RetardedGenius  Icon User is offline

  • >>──(Knee)──►
  • member icon

Reputation: 126
  • View blog
  • Posts: 555
  • Joined: 30-October 10

Posted 21 January 2012 - 07:11 AM

View PostAtli, on 16 September 2011 - 02:40 AM, said:

Nice. The webkit animation stuff is particularily interesting. Looks like it could be very useful, if it gets picked up by the others.

fromTheSprawl said:

Questions? Violent reactions? Suggestions?

I've got a couple of comments :)

First, the <script language="Javascript"> attribute doesn't exist in HTML5 (nor does it exist in HTML4, for that matter). You should be using <script type="text/javascript">, which is a required attribute in HTML4. Not so sure if it's an actual requirement in HTML5, but at least highly advicable. - Most browsers default to Javascript if it's missing, which is why the version you posted doesn't break the code.

Second:

fromTheSprawl said:

Create "tictactoe.html" on your favorite word editor ...

Coding in word editors is nothing but trouble. You probably meant to say "text editor", right? ;)

And finally, and this is more of a personal preference rather than anything concrete, but I always feel it's a bit odd for real Javascript apps (as opposed to old-school "scripts" just used to modify the appearance) to bind events in the HTML itself, using the "onevent" attributes, rather than binding them in the code itself. - Code separation: structure vs logic, you know.

The type attribute for <script> tags is not necessary for valid HTML 5; it is assumed to be Javascript. You can get away with omitting it with HTML 4.01 as well, but it will cause your markup to fail the W3C's validation service.
Was This Post Helpful? 0
  • +
  • -

#28 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Posted 21 January 2012 - 07:28 AM

@RetardedGenius
That's the conclusion we came to as well, a few posts after the one you quoted ;)
Was This Post Helpful? 0
  • +
  • -

#29 Rakesh.krishna199  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-March 12

Posted 18 March 2012 - 10:11 PM

Can this basic tic-tac-toe be made a multiplayer game using database. I have tried by usig php but it is not working.
Can u please help me out
Was This Post Helpful? 0
  • +
  • -

#30 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,063
  • Joined: 28-December 10

Posted 18 April 2012 - 07:22 PM

Database? For storing the scores? Do you want this to be played with two different machines? Yes I think you can configure this to your liking to do that but I'm really not a web developer, so try asking someone else who's an expert. You'll find lot's of em here. :)
Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3