For live website click here
For GitHub repository click here
Connect four is a classic game that is not only fun to play but also required strategic thinking. Pokeball connects four uses Pokeball theme with this game. This is 2 player game and game board has 7 wide and 6 high grid cell where player put his coins. The first player who able to put four of his coins either in a straight row, column, or diagonal (without any other coins in between is the winner).
The main goal of the project is to develop a fun, exciting, and strategic game which can be played alone or with a friend. The game is designed mainly for kids of age 5+ years. The game can also be played by adults for brain triggers. This game is developed as a part of the "Interactive Front-End Development Milestone Project" with the use of front-end technologies such as HTML, CSS, and Javascript.
- This game is mainly meant to be used especially by kids which helps them to spend time while developing strategic thinking.
- This is 2 player game but can be played alone while the second player is a computer.
- Kids can play this game with parents and other friends.
- Of course, adults can play this game just to time pass when they want to relax and wanted some challenging task while relaxing.
- This game is not gendered specific and can be played by any gender. But in general, pokemon is more popular with boys than girls so mostly theme-wise this is more suitable for boys.
Goal for Kid
- Easy and fun game to play which also teaches to think strategically.
- Easy controls so that kids can play easily.
- Can be played alone (with the computer as 2nd player) or with a family member or friend.
- Simple understandable instructions about how to play the game.
- Audio interaction suitable for the game.
Goal for Parent
- Game which is easy to play but also will teach my kid about how to think logically.
- Interactive controls or with easy to understand function.
- Easily understandable and accessible instructions if required.
- Game which parent can able to play with kid and generate bond.
- Just game which will not divert kids with any unwanted advertisements.
To develop the game which has
- Shows developer's understanding of Interactive frontend development.
- Simple design which mainly suitable for kids can easily understandable and easy to play.
- Big buttons which are suitable for screen size.
- Dynamic grid design based on screen size.
General Player
A simple, fun game that can be played by anyone. While playing it can also challenge the brain and can teach strategic and logical thinking. The game shall be easy to play and avoid too many options and control.
As a kid (age 6+), I want
- Easy to use screen layout with fewer buttons
- Game where I can play with fewer controls
- Game which I can play alone and also with friends or with my parent
- Game which will teach me to think strategically
As a Parent, I want
- Easy and simple screen layout so that my kids can play the game easily
- Simple and minimal control
- No advertisement so that kids are not getting divert to unwanted stuff
- Learn to develop logical thinking ability while playing
- Able to play with my kid just for fun to generate parental bonding together
As an Adult, I want
- Some brain trigger while relaxing
- Able to play without any other distractions (advertisement)
- Able to play with friend or kids
- Colour Scheme
The main colors used are from got from pokemon theme colors which as mainly yellow, blue, and navy blue color. Color codes taken from this link
- Typography
Petrona font is mainly used throughout the website with a serif as a backup font in case of any reason the font isn't being imported into the site correctly. Petrona looks stylish but still clean font to read and correctly goes with a simple design. Fonts are imported using Google Fonts.
- Pages
The game has mainly 2 pages. Index.html page for choosing a second player and game.html page for main game page. Also, the error.html page is designed in case there is an error in the game.
-
Index Page: The main feature of the index page is to choose an opponent player and provide instruction about how to play the game. To justify Pokeball theme page has a background image from pokemon. Also, the page has animated red and yellow Pokeball. It is possible to choose a second player as another human or computer.
-
Game Page: The game page has 3 buttons - refresh, home, and music toggle. The main game board has 7 columns and 6 rows. One more of the top row is used to insert the coin. When the second player is computer yellow Pokeball coin will be played randomly.
-
Music on and off switch - which allows the users to switch on the music if they would like to.
-
If any player won or the game is drawn, further coin playing is not possible.
-
Choosing who will play first in case one of the players is a computer.
-
Possibility for the player to choose the Pokeball color.
-
Logical moves by the computer when one of the players is a computer.
-
More audio interaction to be added based on how the game is proceeding.
Languages Used
-
- The language used to give the site its main structure and all necessary features.
-
- The language used to give the application its visual effects including the font, color, and layout, etc.
-
- The language used to implement the site's interactive features, allows the users to be interactive and take actions during their visit.
Frameworks, Libraries & Programs Used
-
- Bootstrap library is used to create responsive design, beautiful buttons, modal templates.
-
- Jquery library used to create DOM elements, event handling, animation.
-
-
Github is used to create, store and maintain all codes in a repository.
-
Github is also used as the site hosting service for the final website to be published on.
-
-
- Git 2.30.1 for Mac is used for commit and push codes to Github.
-
- The font used for text is imported from google fonts.
-
- The icons used for this game are taken from fontawesome.
-
- The wireframes were created using Balsamiq.
-
- Google DevTools was extensively used throughout the project for various styling, testing, and debugging purposes.
-
- Am I responsive to create the mock-up image presented at the start of this document.
-
- W3C Markup Validation Service has been used to test the HTML codes.
-
- W3C CSS Validation Service has been used to test the CSS codes.
-
- The tools to minify and beautify JavaScript, CSS, and HTML codes.
Testing documentation can be found separately at TESTING.md
Deploy To GitHub Pages
-
Logged into Github account.
-
Select repository.
-
Select connectfour.
-
On the top right navigation click on settings.
-
Under the settings section, scroll down to the GitHub Pages section.
-
Select Main Branch from the source dropdown menu.
-
Click save.
-
Once clicked, this publishes the project to GitHub Pages and displays the site URL. Click on the URL to view the live site.
Making a clone or download zip to run locally
-
Log into GitHub account.
-
Select repository.
-
Select connectfour.
-
Click on the Code dropdown button next to the green Gitpod button.
-
Click on the clipboard icon to copy the clone URL.
-
Open Git Bash.
-
Change the current working directory to the location where you want the cloned directory.
-
Type "git clone" in the Command Line and then paste the URL copied in step 5.
-
Press enter to create your local clone.
-
Alternately, click on Download ZIP, unpack locally, and open with a local code editor.
Forking the GitHub Repository
-
Log into GitHub.
-
Select repository.
-
Select connectfour.
-
At the very top right corner click "fork".
-
You will have a copy of the original repository in your own GitHub account.
Connect four is a classic game and my kids love to play this game in their spare time. As my son used to play with Pokeball when I got an idea to make this game with a Pokeball theme. So would like to give credit to my kids for providing me an idea. All the codes are written by myself after learning from resources. The resources and the links I used to learn each concept are the following:
Code
-
- Jquery overall documentation used to understand concepts mainly for creating and updating DOM, animation, and event handler.
-
- MDS resources are used to understand concepts mainly for creating and updating DOM, animation, and event handler.
-
For continuous animation of Pokeball at Index.html page help is taken from this link
-
For rotation of Pokeball while falling help is taken from this link
-
Transfering opponent player information from index.html to game.html, help is taken from this link
Color
-
Color codes taken pokemon theme color palette at this link
-
Apart from the above color white and whitesmoke colors are used.
-
When all coins are filled in a particular column rgba(197, 192, 192, 0.9) color is used to indicate not possible to enter any coin.
Media
-
Index page background image taken from this link
-
Pokeball images extracted from the image found at this link
-
Music file while playing the game is downloaded from this link
-
Error page background image is taken from freepik website and image is downloaded from this link
I would like to thank:
-
My mentor Akshat Garg for his encouragement and valuable comments for this project. Thanks to his guidance and tips to improve my code.
-
Lessons from code institute helped. Used regularly to check if I am following the correct method of coding.
-
Help from in the Slack community.
-
Tutor support and student care team.
-
My kids because of whom I came up with the idea of this project.
Should you have any queries please reach me at rajendradanve@gmail.com.