Stream Two Project: User-Centric Frontend Development - Code Institute

Drinking game 0 5 10 15 20

This is a mini guessing game. - Drinking guessing game This is a drinking game in my country where the loosers have to drink one mouthful of beer if they loose. Basically, player need to guess the total number showed by hands. The game have total 4 hands, 2 for player and 2 for opponent.. First, plyear have to decide what number have to be show on player's hand. For each hand, player and opponent are only able to show either fist (0) , or hand (5). After that, player need to guess what will be the total sum for 4 hands. Once decided, player had to press "Confirm" button to confirm thier choices and opponent will show thier hands. If player guess it right, will be counted as win, elase will be counted as lose.

Index

The page will be direct to the main page. 

Help

Intro of the game and how to play the game. 

UX

Users

Expected users of the websites are those who are staying indoors for preventing coronavirus like me in Malalysia ;). This mini game are to be play with other person but currently are still in development. This game are just a guessing game and if are developed into online multiplyear stage , it will be time killing and would be more fun to play with. Please stay safe and keep yourself indoor and prevent spreeding of corona. All the best humans.

User Stories

In this pandemic of corona virus, users are told to be stay in doors to stop the spred of corona virus. Users are should be coporate so that we are contorling corona virus status from fast epidemic to slow pandemic. For more info, please take a look at this youtube ![clip] https://www.youtube.com/watch?v=BtN-goy9VOY Stay safe stay strong! ^_^

Design

• The name of the game is Drinking guessing game.
• Color theme : dark blue and light blue.

Mockups

The web game app is displayed in single page.

• Drinking guessing game

Features

Features planned, implement and for future development

Planned features

• Documentation - ReadMe File, Mockups

• Button for player to choose thier choices and confirm thier choises

• Bootstrap - HTML, CSS Framework, fontawesome,cloudflare, googlefonts - Grid System - Columns and Rows - Transitions - Hover animations - Highscore list - Warning of abandon remaining round of game. - Alert system on must fill in text column - Images, Maps locations

• Accessibility

• Git - Version Control System

• GitHub - Remote Repository

• Deployed - Hosted on Github Pages

• GPS of location of client & the service team.

• Game Mode: -Single player: - New game button. - Quit game button. - How to play guide. - Opponent and player hand image for player easy to get the whole ideal. - Buttons on player to make their decision on both hands and guess. - Play alone while opponent hand are randomly generated. - Games are set at 10 rounds of per game. - A sector show what player decisions, current score and final decision will be shown at "Summary Section". - Highscore is calculate base on the total count of player correctly guessed. - High score board until window is closed. - Player to insert thier names once they reach the highscore board. - Highscore board will record player win count.

  • Multiplayer: - All function at single is about the same the differnce will between highscore, win condition and opponent. - Opponent hand will be play by another hunam via internet. - Game rules on winning are different than Single player. - Player are counted as win if one of the player guess right. - Highscores are counted higest percentage of win base on how many rounds player select. - Both winner and looser name will be required and listed in the highscore over the net. - Enhance layout and design of game for multiplayer.

Existing Features

• Documentation - ReadMe File, Mockups

• Button for player to choose thier choices and confirm thier choises

• Bootstrap - HTML, CSS Framework, fontawesome,cloudflare, googlefonts - Grid System - Columns and Rows - Transitions - Hover animations - Highscore list - Warning of abandon remaining round of game. - Alert system on must fill in text column - Images, Maps locations

• Accessibility

• Git - Version Control System

• GitHub - Remote Repository

• Deployed - Hosted on Github Pages

• GPS of location of client & the service team.

• Game Mode: -Single player: - New game button. - Quit game button. - How to play guide. - Opponent and player hand image for player easy to get the whole ideal. - Buttons on player to make their decision on both hands and guess. - Play alone while opponent hand are randomly generated. - Games are set at 10 rounds of per game. - A sector show what player decisions, current score and final decision will be shown at "Summary Section". - Highscore is calculate base on the total count of player correctly guessed. - High score board until window is closed. - Player to insert thier names once they reach the highscore board. - Highscore board will record player win count.

Feature to implement

• Multiplayer: - All function at single is about the same the differnce will between highscore, win condition and opponent. - Opponent hand will be play by another hunam via internet. - Game rules on winning are different than Single player. - Player are counted as win if one of the player guess right. - Highscores are counted higest percentage of win base on how many rounds player select. - Both winner and looser name will be required and listed in the highscore over the net.

TECHNOLOGIES

This project use the technologies stated below:

• HTML - HTML for strucutre
• CSS - CSS for Styling
• JavaScript
• JQuery
• Google Chrome
  • Used for browser and dev tools
• Google
  • Google was used for research.
• Google Fonts
  • Font used on the web
• Bootstrap
  • HTML and CSS Framework from Bootstrap
• Color scheme designer
  • Designing theme for the web
• [Figma] (https://www.figma.com/file/GSkHofe6hlFxkglyxpgEY9/Grand-Cleaning-Service-Website-Design?node-id=0%3A1)
  • Designing the web
• [Fontawesome] (https://fontawesome.com/icons?d=gallery&m=free)
  • Icon used
• [Hover] (https://ianlunn.github.io/Hover/)
  • Hover transitions used
• Git
  • Version Control
• GitHub
  • Repository hosted on GitHub
• Github Pages
  • Website hosted on Github Pages
• Gitpod
  • bulding up the website.
• Am I Responsive
  • Testing responsiveness of the website
• Free Frontend
  • Font Animation ideal

Testing

The site was tested on different viewpoints - Galaxy S5 360 x 640 - Pixel 2 411 x 731 - iPhone 6/7/8 375 x 667 - iPhone 6/7/8 plus 414 x 736 - iPhone X 375 x 812 - iPad 768 x 1024 - iPad Pro 1024 x 1366

Tested on different browsers - Google Chrome - Internet Explorer - Firefox

Tested on functions on calculating the sum of total. Tested on game functions:

1. Player did not choose thier guesses.
2. Plyear did not choose thier hand.
3. Player make it into highscore.
4. Player press play and able to go to game page.
5. Player press retart when they finish thier round or did not finsih thier rounds.
6. Player press confirm after they finish thier 10 rounds of guessing.
7. Quit button to close the game tab.

Deployment

The project is hosted on GitHub Pages and deployed directly from master branch.

The root folder contains Readme.md,index.html and related files. The site is update automatically once there are new commits pushed to the master branch. The homepage of the deployed site in GitHub pages will be index.html

To run locally:

• Install git
• Open your chosen IDE (Cloud9, VS Code, etc.)
• Open a terminal in your root directory
• Type 'git clone ' followed by the code taken from github repository
  • git clone https://teoyangbin.github.io/2ndproject-minigame/
• The website can be run by opening one of the HTML files within a web browser

Credits

Ideal

The ideal of service is based on:

• [w3schools] (https://www.w3schools.com/)

Media

The images for the website are taken from:

• [Shutterstock] https://www.shutterstock.com/

Acknowledgments

Inspiration, motivation and direction from:

• Seun Owonikoko @seun_mentor (on project)
• Michael @michael_tutor (on Javascript debugging)
• George Low @friend of mine (on Javascript debugging)
• Dione Teo @Sister (on first sight design)
• Random Guy @a randum guys back to few years ago teach me how to play the game on the spot.
• kurzgesagt @ a youtube channel that talks about alot of things including coronavirus. https://www.youtube.com/results?search_query=kurzgesagt
• coronavirus @ giving me more time to spend on code institute learning progress from my daily busy life. (just a joke. hope this pandemic end soon.)