Giter Club home page Giter Club logo

u1_hw_tic_tac_toe's Introduction

Tic Tac Toe

Tic Tac Toe

Overview

This week we have been learning about writing functions, working with loops, and writing conditionals. We also learned about HTML, CSS, and the DOM. We will be making a Tic Tac Toe game using all of these concepts. Remember to plan out your project before actually coding it out, since you'll want to think carefully about what functions and event listeners you'll need to pass data properly.

Objectives

  • Build a tic tac toe game in HTML, CSS, and vanilla JavaScript
  • Use best practices when writing code, DRY (Do Not Repeat Yourself) code is always a better option
  • Create a portfolio worthy project with your own personal style

What You'll Be Building

Feel free to implement your own style or theme when building your game, it might be something you want to put on a portfolio showing off your skills!

Getting Started

  • Fork and clone this repository.
  • Run open index.html to open your game in the browser (Mac).
    • cmd + option + i or ctrl + shift + i to open your dev tools in your browser.
  • You'll be working in the index.html file, app.js in the js folder, and style.css in the css folder.

Requirements

  • A user should be able to click on different squares to make a move.
  • Every click will alternate between marking an X and O
  • A cell should not be able to be replayed once marked.
  • You should not be able to click remaining empty cells after the game is over.
  • Add a reset button that will clear the contents of the board.
  • Display a message to indicate which turn is about to be played.
  • Detect draw conditions (ties/cat's game)
  • Detect winner: Stop game and declare the winner if one player ends up getting three in a row.
    • Hint: Determine a set of winning combinations. Check those combinations on the board contents after every move.

Have Fun - The best way to learn is by playing with code. Let creativity guide you and try some experiments with JS and CSS and see what you can do.

Bonuses

  • Implement your reset button without refreshing the whole page
  • Track player's wins over time
  • Add a simple AI to support one player vs computer mode. In this case, "simple" just means having the computer pick a random empty square.
  • Make your computer seem more human by adding a short time delay between your turn and the computer's turn.
  • Style it up! Get creative, or even make a theme!

Submission Guidelines

  • Pull Request must be submitted utilizing these guidelines: PR Guidelines

u1_hw_tic_tac_toe's People

Contributors

nobodyslackey avatar ahonore42 avatar rarebit3 avatar ben-manning avatar anpato 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.