Giter VIP home page Giter VIP logo

tic-tac-toe's Introduction

PROJECT 1: TIC-TAC-TOE

This is a two player Tic Tac Toe game to be played on desktop.

This project was created with HTML, CSS, and Javascript. DOM manipulation was achieved using the JQUERY library.

APPROACH

To complete this project my approach was to create a working Javascript file to get the bare minimum of a working game of Tic-Tac-Toe. After that was completed I worked on creating a better looking interface using CSS, I was focused on making a clean looking, minimalist, user interface.

To make the game adaptable for future development I created the majority of HTML elements using JQUERY DOM manipulation. Game play is tracked by a matrix representing the board - thus storing the data in the Javascript-memory.

Separate functions were used to check for horizontal, vertical, and diagonal wins, however the diagonal win function is a little bit too hard coded for my taste, and will need a bit of work.

Getting into the CSS I wanted stick with a pretty minimal interface. CSS transitions were used to make the reset and win functions better looking and a bit more smooth, rather than the normally abrupt instant changes in state.

FUTURE DEVELOPMENT

  • I'd like to make the design responsive so that it can be played on any device.
  • A button in the top left corner or next to the score counters should be added to reset the scores to zero
  • I would like to change the functions to check for wins so that: ..* A win on board sizes greater than 3x3 can be checked for ..* The diagonal checker is less hard coded
  • Towards the end of writing this script some of the functions began to get a little bit hairy - it would be good to break these up into smaller, more specific, functions.
  • I had been initially thinking that on a tie event you could have the option to expand the board to 4x4 or even further to a connect-four board but ran out of time to get to that level of complexity.

tic-tac-toe's People

Contributors

zchryst avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.