googlebae / connect-four

A Pure JavaScript grid-based game

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

connect-four

A retro grid-based game in vanilla JavaScript, HTML and CSS

View the full walkthrough here

I have kept the styling at a bare miniumum for you to go wild and make it your own. Please tag me as I would LOVE to see your game!!!

Connect Four (also known as Four Up, Plot Four, Find Four, Four in a Row, Four in a Line, Drop Four, and Gravitrips (in Soviet Union)) is a two-player board game in which the players first choose a color and then take turns dropping one colored disc from the top into a seven-column, six-row vertically suspended grid. The pieces fall straight down, occupying the lowest available space within the column. The objective of the game is to be the first to form a horizontal, vertical, or diagonal line of four of one's own discs.

In this repo, I will be putting extra focus on for loops. If you want to learn how to use for loops effectively, please have a look at my code.

What inbuilt functions are we going to focus on?

  • for loops
  • addEventListener
  • setInterval
  • document.querySelector
  • arrow functions

Rules of Connect Four

  • You will start as player One
  • You will take your go as player One
  • You will not be allowed to go in squares that are not at the bottom of the grid, or do not have a taken square under it
  • Once your go is taken and you did not win, It will be player Two's go
  • The gamer will continue until a winning combination of four is reached by player One or player Two, or until the grid is full and no winning combination was found.

About

A Pure JavaScript grid-based game


Languages

Language:JavaScript 71.2%Language:HTML 23.7%Language:CSS 5.1%