Brazilian Simon©

Welcome to my project Brazilian Simon. This is a new version of the superb game Simon, Simon was invented in 1978 by Ralph H. Baer and Howard J. Morrison, this is a electronic game of memory skill. I am Brazilian so I created a version of Simon in the flag of Brazil. I hope you enjoy it.

Happy Code! 👨‍💻 Happy days!

Content

UX 🎯
- Projects Goals
- User Goals
- Site's Owner Goals
- User Stories
- Design Choices 🎨
  - Fonts
  - Colours
  - Background
Wireframes 👨‍🔧
Features 🤖
Technologies Used 👀
Planning 📐
Testing 🔌
Bugs 🐞
Deployment 🛸
Running Locally 🏠
Credits 💳

UX (User Experience)

Project goals

The objective of this project is develop a new version of an old game Simon with the flag of Brazil. The user will have a great experience. With this I will show my skills in HTML5, CSS3 and JavaScript. Also in the framework Bootstrap.

User Goals

A website with a great user experience.
A website visually appealing.
Responsive, it should work on desktops, tablets and mobile phones.

Site's Owner Goals:

A game with a nice design and responsiveness.
A easy game that a kid can play and have fun.
a colorful game with a great user experience.

User Stories:

"As an user, I expect a game intuitive."
"As an user, I expect this game to be easy to play."
"As an user, I want a game to interact with."
"As an user, I want a game with an enjoyable experience."

Design Choices 🎨

This is a game with the theme inspired in Brazil, so I think in use the colours of the flag of Brazil also some images of green leafs everything to give a good user experience.

Fonts:

I chose to use the font Luckiest Guy because it is a funny font and I think it matches with the game.🎮🕹

Colours:

This Game🎮 was inspired in the flag of Brazil so I used the three colours plus white.

'Green Pigment' #009c3b: This colour symbolizes the Brazilian forests.
'Golden Yellow' #FFDF00: symbolizes the country's riches.
'St Patricks Blue' #002776: symbolizes the Brazilian sky and rivers.
'White' #FFFFFF: means the desire for peace.

Background:

The image that is fixed in the website's background was taken from FreePik. I manually resized the image using a tool called PhotoPea, having accurately sized images reduces the load time of the website.

Wireframes: 🔧

For this project, I created wireframes using Balsamiq Mockups and Proto Prototypes. I started by creating some basics wireframes for desktop/mobile on Balsamiq just to have an idea. After that, I built a prototype with more styling.

Check it out 🔍

Balsamiq: Desktop/ Mobile
Proto: Desktop/ Mobile

Features:

Easy navigation.
Trendy, intuitive design and user experience.
User interaction.

Technologies Used: 👨‍💻

Tools & Libraries:

Planning: 📐

I will follow the Wireframes that I created in order to get what was thought previously. I am also planning to create two columns beside the flag one on the right and another on the left, those columns will disappear in the mobile version. Doing some tests is part of the plan as well.

Testing: 🔌

Testing Stories:

I tried to use onclick event but the I realised that event listener would be better. I have also used querySelector that is newer feature. I tested some ways to get random numbers between 1 and 4 until get it. setInterval and clearInterval was a good method to set time.

Bugs: 🐞

I have a bug that I could not resolve that is in mobile version when users rotate their screen the footer goes to the middle of the screen.

Deployment: 🚀

When deploying Brazilian Simon using GitHub Pages the following steps were made:

Opened up GitHub in the browser.
Signed in using username and password.
Selected my repositories.
Navigated to '/alychinque/BrazilianSimon/'.
In the top navigation clicked 'settings'.
Scrolled down to the GitHub Pages area.
Selected 'Master Branch' from the 'Source' dropdown menu.
Clicked to confirm my selection.
Brazilian Simon Game now live on GitHub Pages.

Running Brazilian Simon Game Locally

Cloning Brazilian Simon Game from GitHub:

Navigate to '/alychinque//BrazilianSimon/'.
Click the green 'Clone or Download' button.
Copy the url in the dropdown box.
Using your favourite IDE open up your preferred terminal.
Navigate to your desired file location.
Copy the following code and input it into your terminal to clone Chinque Portfolio website.

 git clone https://github.com/alychinque/BrazilianSimon/

code-institute-submissions / braziliansimon Goto Github PK

braziliansimon's Introduction