GithubHelp home page GithubHelp logo

tictactoe's Introduction

Tic Tac Toe

Table of Contents

Description

Do you often consider your own mortality, or perhaps listen to copious amounts of heavy metal? Do you also enjoy playing tic-tac-toe but think it might detract from your edginess? โœ–๏ธŽ vs ๐Ÿ’€ is a new version of the classic tic-tac-toe game built just for folks like you!

The goal for completing this project was to have a fully functioning tic-tac-toe game. The game should declare a winner, declare if there was a draw, show how many wins each player has and have a time-out at the end of each game to reset the board.

Installation

  1. Fork this repo
  2. Clone down to your machine
  3. Access cloned directory
  4. Run "index.html"

Walkthrough

This tic-tac-toe game can be played two different ways. You can click the cell you wish to play when it's your turn. Alternatively, use the tab key to move around the gameboard, hitting the space bar to select the cell with your token. Once a player acheives a win, all the cells are disabled, and the winner is declared. There is a 5 second hold before the game reloads and the winner's tally is updated.

screen capture of site

If there isn't a winner for the game, it's declared a draw. Again, there is a 5 second hold before the game resets.

screen capture of site

Reflections

I found this project to be very challenging. Once I was able to figure out how my classes would interact with my main.js file it clicked into place.

I wanted to make the game playable with the keyboard, so I opted to use inputs for HTML instead of divs, which made the styling somewhat more challenging. I also tried for a long time to try to figure out a way to get the winning boards to render on the page under each player, but wasn't able to solve it using the gameboard objects that I had built.

I originally tried to incorporate my "it's a draw" logic a different way, but for some reason it would never fire despite my best efforts with return and break statements. I finally figured out a way to make it work, and I like the logic there. The evaluateBoard method in my game class is giant. I worked for a while trying to refactor it, but I wasn't able to come up with a good way to break it apart and keep the functionality.

Author

Sarah Fitzsimons GH

S. Fitzsimons

Technologies

Functionality Structure Styling
javascript html css

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.