Code Monkey home page Code Monkey logo

tic-tac-toe's Introduction

code differently

Tic-Tac-Toe

Make the game Tic-Tac-Toe using HTML, CSS, and JavaScript!

Instructions

  1. Fork and clone this repository.
  2. Fulfill the requirements below.

Requirements

Your goal is to build out a working version of Tic-Tac-Toe.

YOu will build this game in two phases. Each phase is defined below.

Phase 1: Player-scored Version

Build out a 3x3 grid with clickable squares. When a user clicks on a square, it should turn orange or blue (alternating with each click). Once a square has been clicked, a user should not be able to click it again and change it's color. Below your 3x3 grid, you should have a 'reset' button that will reset the game.

Bonus requirements:

  • Have a message somewhere in your UI to show who the current player is (i.e. orange's turn or blue's turn)

Phase 2: Dumbly-scored Version

The goal of this phase is to make it so that players don't have to manually score the game. Instead, you're going to write some code that will check the board with every turn:

  • If a player has won, display a message with which player won the game (i.e. orange or blue)
  • If all the squares are filled in and no player has won yet, display a message saying it's a tie
  • In both cases, the users should be able to reset the game

In games where there are a limited number of winning combinations, a great first-step to auto-calculating the winner is to hold those winning combinations in some format (maybe an array) and check the current game against those winning combinations. If one of the winning combinations matches the gameboard, then you know a player has won!

However, doing so requires modeling the current state of the gameboard in your code. So, in addition to updating your UI whenever a player makes a move, you'll also have to update some representation of the gameboard in your game code.

tic-tac-toe's People

Contributors

kimlai07 avatar demo-mrrogercampbell 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.