Tictactoe Website

My first HTML5 website ever!

: javascript

Concepts Used

  • Html
  • Css
  • Javascript (vanilla)
  • Webfonts

Features

  • Dialog to ask names
  • Beautiful tiles
  • Banner to announce winner
  • Play again

Code Link


Intro

I had just gotten into the Infotech Co-Committe of the college, in my 2nd year. The funny thing was I got in, without actually knowing how to make websites, which will be my work there :P .

I was probably the first EXTC student to be accepted in the committee, and I was given a tough time for that too.

Anyways, I was pretty adamant that I will learn it and I thought the best way to do it would be using a project.

Working

I had already made the Tictactoe game in C , so I thought I could port it to Javascript, a language I did’nt know yet and make it look pretty.

I always had an obsession with making things usable and aesthetically pleasing. Not all eye candy, functional yet good to look at and experience.

The html5 part of the work was easy, I made it all from scratch, and so was css, which I kinda fell in love with. Its so much easier to style things like this. By easier, in the long run, in fixing tiny details, reusing code etc.

The javascript part was a bit tricky..

This language, in the beginning seemed like a miracle. I could not imagine how code could manipulate html at will, and the more I experimented , the more I appreciated how the 3 technologies, html, css and js work together.

Also, i was a bit behooved by how lawless this language seemed to be, there wasnt alot of “structure” to it, which I later understood to be a weakly typed language.

Coding the logic according to C logic seemed like overkill, and I could not get the Minimax algorithm working according to how I liked it to work. I dont remember where I was stuck, so I removed the player vs computer functionality.

From then, I simplified the logic to use an array of winning positions and checked if they matched after every move. Simple.

Thanks to js, the code was pretty simple to write and a breeze to execute with html changes.

Features

The website , on loading asks for the two player’s names so that it can be used later.

Then the player 1, by default gets to play first and gets the X marker.

Then the game can go on intuitively. The board layout is shown in the image above.

Once a player wins, in beautiful font on a lightbox the result is declared.

There is also an option to play the game again.

Conclusion

In the end, I made the site look as pretty and functionally usable as I could and made it live.

I was pretty happy to make this. Nothing boosts your confidence like getting an idea out of your head and into the real world.