Giter VIP home page Giter VIP logo

project2-blackjack's Introduction

DEMON BLACKJACK

This is a game of Black Jack against The Demon Computer!!!! Can you beat the Demon?

The goal of this game is to get as many points as possible but without going over 21 points, because then you will automatically lose the hand!

alt text

User stories

Users of this website will be able to play the game of Blackjack against the computer.

Website owner

Offer the puclic a free game, easy to use to enjoy a game of BlackJack.

Game Features

  • Game Play

    • Game area where the cards are displayed

    • Four Game buttons to Reset Game, Deal, Hit & Stay

    • Two information buttons, One for the game instructions and the other for the card values in the game

    • Clicking on the instruction button shows information on how to play the game

    • Clicking on the card value button shows information on the value of the cards in the game

    • Sounds are played when pressing the deal, hit, stay & reset game buttons

    • The game is over when you win or lose 5 games

    • When you win or lose an overlay screen will be shown indicating that the game is over and a sound is played.

alt text

alt text


Future Features

  • Add player name submission

Typography & Colour Scheme

  • Headlines are the Press Start 2P font
  • Body and Subheadings are the Work Sans font
  • The colour scheme is base background black #000 , h1 font #fff and outlined with rgb(238, 2, 2)

Wireframe

  • Game Page

alt text


Technology

  • HTML - for building the UI
  • CSS - for styling the UI
  • Javascript - for the the game play and interaction
  • Gitpod - for the game development
  • Github Pages - to host the game
  • Deck of Cards API - to create the cards and shuffle the decks

Testing

  • Lighthouse
    • The site has been tested with Lighthouse and is 100% Accessible, 100% Best Practices, 100% SEO & 97% Performance scores

alt text

  • Responsive design
    • The website was tested using Chrome developer tools and Mozilla Developer tools. The website was tested with Chrome, Mozilla, Safari and Edge browsers on both a Mac computer and a Windows computer, it was also tested for mobile on an iPhone 6, iPhone 11, iPhone 13 Pro, Pixel 4, Pixel 5 and Galaxy S10.

alt text


Testing Sequence

  • Game Play

    • Click the Deal button to start a game
    • 2 cards should be dealt to the player and the demon
    • The Demons first card should be turned over so it cannot be seen
    • Click the hit button to get a new players card
    • Click the stay button to stop playing
    • The demon should now play until he draws more than 17 or equal
    • If the demon gets more than 21 he busts and the player should win the round

    alt text

    • If the player gets more than 21 he busts and the demon should win the round

    alt text

    • If the player has a higher score but not over 21 the player should win the round

    alt text

    • If the score is equal then it's a tie and the voiceover should play "it's a tie"

    alt text

    • If the demon has a higher score then the player loses the round

    alt text

    • Click the reset game button to start a new game

    • The reset game warning should popup when the reset game button is clicked, this can be confirmed or cancelled

    alt text

    • The game is over if the player wins or loses 5 rounds

    alt text

    • The Game Over overlay can be clicked to reset the game

    alt text

  • Instructions

    • The instructions button should open the popup modal with the game instructions when clicked

    alt text

    • The card value button should open the card value instructions when clicked

    alt text

Validator Testing

  • HTML
    • No errors were returned when passing through the official W3C validator
  • CSS
    • No errors were found when passing through the official (Jigsaw) validator
  • JavaScript
    • Tested on JSHINT validator and no errors or warnings where found

Bugs

  • CSS
    • Found some issues with the reponsive CSS due to the game area having to be a certain size to be able to play the game.
    • Fixed the issues as best I could

Unfixed Bugs

None found at the moment.


Deployment

  • The game site was deployed to GitHub pages. The steps to deploy are as follows:
    • In the GitHub repository, navigate to the Settings tab, click the Pages button on the left menu
    • From the source section drop-down menu, select the Master Branch
    • Once the master branch has been selected and saved, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

alt text

  • The game site was developed on Gitpod.

The live link can be found here - https://artcuddy.github.io/project2-blackjack/


Credits

  • My Code Institute mentor Rohit Sharma for keeping me on track with the code

  • Content

  • Media and Libraries

    • Digital artwork of King Dice created by my son Alfie Cuddy (12 Years Old)
    • Inspiration for the game build from this tutorial by Ethan Jarrel on Hackernoon
    • Cards created with Deck of Cards API

project2-blackjack's People

Contributors

artcuddy avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.