This project was developed in order to demonstrate some ability to code in Javascript, CSS and HTML.
This website have the unique purpose to present a very simple version of the famous game called BlackJack. The user will play against the computer and the project is called SimpleBJ.
- User Experience UX
- Features
- Technologies Used
- Testing
- Am i responsive?
- HTML / CSS Validator
- Browser Compatibility
- Lighthouse
- Bugs
- Deployment
- Credits
- Acknowledgements
The wireframes for this website were produced with Balsamiq. The final site varies slightly from the wireframes due to developments that occured during the creation process.
This is the final layout of the Game:
SimpleBJ Game website has ONE main page. The home page is the default loading page. When first loading, a box pops up. This Box allows the user to get to know about the objectives and rules of the Game :
After closing the Rules Box, the user can start playing!
The Game display is divided into 3 parts:
- Card's Player Area : left side
- Card's Computer Area : right side
- Result of the Game Area : in the middle
Before starting to code, I wanted to have a big picture of the programming structure :
** Beginning of the Game ** :
- 2 cards are revealed to both players, two options :
- Player 1 have more points than Player 2 (Computer) :
- Player 1 can continue with only 2 cards ("i-am-good" Click event)
- Function AddCard() for player 2 is called
- Function CheckResult() is called
- Function ShowResult() is called
- Function incrementScore('The winner') is called
- Function AddCard() for player 2 is called
- Player 1 ask for a new card ("new-card" Click event)
- Function AddCard() for player 1 is called
- Function CheckResult() is called
- If Player 1 have more points (and <= 21) than Player 2, Player 2 need a new card
- Function AddCard() for player 2 is called
- Function CheckResult() is called
- Function ShowResult() is called
- Function incrementScore('The winner') is called
- If Player 1 have more points (and <= 21) than Player 2, Player 2 need a new card
- Player 1 can continue with only 2 cards ("i-am-good" Click event)
- Player 1 have less points than Player 2 :
- Player 1 can only ask for a new card ("i-am-good" Click event is disabled)
- Function AddCard() for player 1 is called
- If Player 1 have more points (and <= 21) than Player 2, Player 2 need a new card
- Function AddCard() for player 2 is called
- Function CheckResult() is called
- Function ShowResult() is called
- Function incrementScore('The winner') is called
- If Player 1 have more points (and <= 21) than Player 2, Player 2 need a new card
- Function AddCard() for player 1 is called
- Player 1 can only ask for a new card ("i-am-good" Click event is disabled)
I also used Excalidraw to build up the main rules of the game before coding :
-
The font chosen were 'Delius' for all the content of the website. I have chosen to import the font directly from the .ttf file to avoid any problem of compatibility in the future.
-
The colour scheme chosen is blue, pink and purple. I got inspired by this following picture :
I decided to use this picture as a body background.
First Time Visitor Goals
- As a First Time Visitor, I want immediately to understand the main purpose of the site.
- I want to be able to quickly understand the game controls and mechanics in order to enjoy playing the game
- I want to be able to consult the game instructions as many time I want.
- I want to be able to see my score as I play the game.
- I would like to play a simple game, with a fairly short play time.
Considering that there is no possibility to login for the user, all users are considered as "first time visitor".
The website should have fun colors and is intended for users as an entertainment value.
The middle page is divided in 3 div(s) :
the Player area :
- 2 displayed cards and 1 undisplayed Card
- 2 buttons used for the game
- 1 Sound Button On/Off
- A score area
- 1 button "How to Play" instructions
A score Area And Result of the current Game :
- Score of Player for the current Game
- Score of Computer for the current Game
- Shown Result of the current Game with an Image (Win, Loose or Draw)
the Computer area :
- 3 displayed cards
- A score area
This area is dedicated to show the title of the game. Also this area is also used to :
- Show up a Loading Game Message to inform the player that a new game is about to pop up.
- Show up a Message when user is displaying a page that does not exist: Error 404.html file
The footer contains informations as copyright and Name of the game
I created a Table with all the names of each Card : (All images of cards are stored in assets/images/, Example 09-carreau.png, 011-carreau.png, 06-coeur.png).
Extra Info : I used cards starting by 00 as an undisplayed card.
To display a Card, I use :
- innerHTML Attribute to display the image
- Alt attribute to store the points of each Card
- The ID attribute with "ImageCard" as a base name + (1,2 or 3 means first, second or third Card) + "Player1" or "Player2"
So for example, we can reach the points of the third card of the Player 2 (Computer) like this : parseInt(document.getElementById('ImageCard3player2').alt
We generate a number between 0 and 3 to display a random card with selected Points -carreau, -coeur, -pique OR -trefle
- let SelectRandomCardWithSamePoints = Math.floor(Math.random() * 4);
There is nothing to do, it's auto -generated
After the Result of the game has been revealed, a new game is loading automatically :
When the current game is considerated as terminated, a popup appears up to the main window to show up that a new game is loading. I used the function setTimeout to wait 3 sec and then the function RunGame() is launched again :
It's a no ending Game, one new Game will be generated after revealing the result of current game. The score will be incremented (+1 point) to the winner of the current game and a new game is loading. So if you want to stop playing do the following :
- put the link of this game into your bookmark
- Then Click on "Done" Button
- Then close the brownser window
- To get back to the game
Easy, right? :-D
If the user is displaying a page that does not exist, we display a message and redirect to main page of the Game:
the HTML code for the reloading page is the following:
As a Future Features, I would like to developp a digital currency used in-game to be able to bet an selected amount of this currency for each game. For that, we will need to save the Player Portfolio and also create a Faucet function in case Player has no more currency to bet.
Also, it could be interesting for the user to choose himself the new card to pick up, as below :
- Javascript - provides game's functions and rules.
- HTML5 - provides the content and structure for the website.
- CSS - provides the styling.
- Balsamiq - used to create the wireframes.
- Gitpod - used to deploy the website.
- Github - used to host and edit the website.
Yes, I am!
-
The responsive design tests were carried out on Iphones, Samsung Galaxy S8+, Ipad Air,Surface Pro 7 and even Nest Hub Max with Google Chrome DevTools and also on Responsive design checker.
-
Responsive test from https://ui.dev/amiresponsive :
The HTML validator results is below:
- index.html :
-404.html :
The website site has been tested through the CSS Validator. No errors or warnings shows up as the picture below shows :
The website javascript's code has been tested through the JSHINT Validator. Some Warnings shows up but only concern ES6 as below :
My mentor says that i should not consider all warning mentionning ES6, but i am curious...
After some researchs, i found this as a solution :
I did it but cannot see the result because in jshint website, we copy the code to test and not the link of the project.
The website was tested on the following browsers with no visible issues for the user :
- Google Chrome
- Mozilla Firefox
- Safari
Appearance, functionality and responsiveness were consistent throughout for a range of device sizes and browsers.
The site was also tested using Google Lighthouse in Chrome Developer Tools to test each pages for:
- Performance - How the page performs while loading.
- Accessibility - Is the site acccessible for all users and how can it be improved.
- Best Practices - Site conforms to industry best practices.
- SEO - Search engine optimisation. Is the site optimised for search engine result rankings.
- Thanks Panda!
After reducing some images, we have the following result of Lighthouse:
To sum up :
- I confirm that this project is responsive, looks good and functions on all standard screen sizes.
- I confirm that the main content is readable and easy to understand.
- I confirm that the interaction with the user is responsive and efficient.
- The Layout in smaller screen as Iphone SE shows some issues showing the Game buttons.
I have been working hard with CSS screen queries to fix it.
- The Landscape positionning in some very small devices shows some problems of layout.
I ve Been working on soo many differents tests with screen queries but the best solution I found is to limit the access to the game in landscape positionning only for very small devices as iphone SE. From the beginning, i thought this solution was not so elegant, but then i realized that almost all applications available on Appstore or GooglePlay are displaying content only on Portrait version (Landscape not permitted).
For that I had to add a screen query into style.css file:
And a dynamic beating icon in index.html file :
For all bigger screens, landscape is available of course:
It looks like deploying the website on github gives a new Error :
-Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
But after some researching, I found that there is no solution for now:
The site was deployed to GitHub pages. The steps to deploy a site are as follows:
- In the GitHub repository, navigate to the Settings tab.
- Once in Settings, navigate to the Pages tab on the left hand side.
- Under Source, select the branch to master, then click save.
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here - Here
If you need to "FORK" a repository:
- Login in to GitHub and go to https://github.com/artontray/PROJECT2
- In the top right corner, click
Fork - The next page will be the forked version of https://github.com/artontray/PROJECT2 but in your own repository
The method from cloning a project from GitHub is below:
- Under the repository’s name, click on the code tab.
- In the Clone with HTTPS section, click on the clipboard icon to copy the given URL.
- In your IDE of choice, open Git Bash.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL copied from GitHub.
- Press enter and the local clone will be created.
- The font came from Google Fonts.
- Balsamiq was used to create the wireframes.
- VS STUDIO was used to edit the code.
- Chrome Dev Tools used for inspecting elements and fix layout issues or JavaScript bugs.
- Excalidraw to draw the structure of the game.
- Readme.so was used to write this readme File.
- Tiny PNG was used to compress images of the Website.
- Some Pictures came from Google Images.
- Some Icons came from Font Awesome.
- Background Image Free pik Images.
- Win Sound are coming from Youtube.
- Loose Sound are coming from Youtube.
- All Cards Images are coming from This Website.
To be honest, best parts of my learning progress are the following :
- Learning Javascript
- Learning how to access the DOM
- This function is my favorite one :
The site was completed as a Portfolio 2 Project for the Full Stack Software Developer Diploma at the Code Institute. As such I would like to thank the web in general for beeing such an open library for learning, the Slack community for the good vibes and my mentor Precious_Mentor for the support.
This material has been prepared for educational purposes only.
Damien B.