search

Markyjay / inbetweens

0 stars 2 forks source link

readme

Inbetweens Card Game

responsiveness

Welcome to Inbetweens the Card Game! Test your luck by placing bets on whether the next card will be "inbetween"

Inbetween is a card game I played as a teenager, it’s a betting game usually played for money. The game will be adapted for the purposes of this project. In later years as a teacher, I adapted games like this to help my students to understand the concept of probability and chance and they found it very enjoyable and learned quickly to ascertain high and low probabilities and the highs and lows of risk-taking.

A live version of the site can be found here: https://markyjay.github.io/inbetweens/

Table of contents

User Experience

User stories

User Demographic

The game is aimed toward people who like to play card games and teachers who would like to use a game to help their students understand the concept of probability and chance variations through a simple game using cards. The game is simple, fast and designed to be engaging. The game involves gambling but offers no risk as it does not use money, the player converts one hundred credits in to 1000 credits to accomplish a win.

User Goals

The goal is to create a website that is Informational, enjoyable and challenging. The website takes a commonly known card game to teach chance and probability to students and for any user to have fun while challenging themselves to reach the winning objective of 1000 credits.

Design

The concept started as a practice project so that I could learn javaScript and in the process I came to realise that although it was a basic game it's rules provided many intricate details that really challenge my understanding of code. It began with the game only, three cards and buttons to initiate the deal, the bet and a reset. After about two weeks of painstaking learning, I realised that I had spent so much time trying to work out the intricacies that I would finish it a submit it for my second project for the Code Institute.

At this point I designed the rest of the site on figma.com and decided to make it a learning site for probability, as I am a maths teacher, I felt it appropriate.

Figma Design figma-design

The favicon was chosen from a generic set of playing card related icons. its a gif the flicks through each of the suits of cards.

Favicon https://www.favicon.cc/?action=icon&file_id=761394

Color Scheme

The colour scheme is various shades of green to depict the felt of casino tables and yellow and orange text to stand out clear from the background. There are also grey borders surrounding the cards and black writing for the listed points in the ante and betting instructions section.

Typography

I chose a generic font as other fonts did not seem to fit the theme of a nineties style casino card game site. I chose "Franklin Gothic Medium" for the heading of inbetweens and "Arial Narrow" Arial and sans-serif for the paragraphs and subheadings.

Images

The pictures of cards were downloaded from https://bicyclecards.com/. I took the clearest images of each card I could find and used windows Print 3d to crop the images to size. I name each image by its number value and the first letter of its suit. I also did the same the iconic back cover of a bicycle playing card. Having a choice of red or blue I went with blue.

blue card backing

Features

Header & Logo

The header plays on the word itself, placing the card between the word splitting Inbet and weens with the iconic blue card backing of the bicycle franchise. The user can click on this card taking them directly to the game. Otherwise they can use the navigation bar to go to the probability calculator or the game itself.

Inbetweens Heading

Navigation bar

I kept the navigation bar basic to stick with the nineties theme of a casino style card site. It was originally below the heading but I chose to place the navigation bar at the top of the site like the old style card game sites depicted.

Navigation Bar

Main Section

The main section it divided in to three sections and a footer below. An introduction section, the card ranking with game objective and a section focused on the ante and betting system for the user clarification.

The Introduction

Introduction

The Rank & Objective

Rank & Objective

The Ante & Bet

Ante & Bet

Calculator Page

This page is dedicated toward learning about the probability of a win or loss.

Probability Calculator

Game Page

Inbetweens Game

The Game

The dealer lays two random cards face up, side by side and in front of the player, so both dealer and player can see the value of each card, a third card is then laid face down in-between these cards and play begins.

Rank of Cards

Red Ace (High), K, Q, J, 10, 9, 8, 7, 6, 5, 4, 3, 2, Black Ace (Low)

Game objective

To reach 1000 credits.

The Ante

Once the first two cards are dealt the player chooses whether they wish to be dealt the hit card. For example, if the first two cards are consecutive then there is no card in-between and so the player passes and two more cards are dealt, the same if the first two cards are equal in value. For this reason, the player pays 5 credits only when the initial two cards are one or more values apart, this way the player has a chance but also cannot continue to hold their bet until they are dealt cards that guarantee a win. In short, the player pays 5 credits ante to the pot each time that a playable set of cards are dealt.

The Bet

The bet will then commence once a set of playable cards are dealt and the player puts 5 credits to the pot, then the hit card is placed face down and the player chooses whether to either pass, double, triple, quadruple etc players bet on the premise that the hit card value is in-between the dealer cards values. The player can only bet with the credits they have.

If the hit card is not between the dealers cards, then the player loses the bet. If the hit card is the same value as either of the dealers cards then again the player loses the bet as it is not in-between. If the card is in-between, then the player wins the pot and play continues from the beginning. The player wins the game outright if they reach 1000 credits.

Adaptations for project purposes

  1. The game can be played with multiple players but as this is my first time creating a game using JavaScript I will keep it to a single player and the dealer. It may be something to expand upon once I improve my skills in coding.
  2. The winner is usually the player with the most amount of chips at the end of the game or the game can end when the player loses everything to the dealer.
  3. If the two dealer cards that are laid are consecutive then the dealer must lay two new cards as the player has zero chance of a card being in-between. If the dealer cards are the same in value, then the player can say "split" and the dealer must lay a card on the first card on which the player can choose to bet or pass, and then lay another card on the second card where the player can choose to bet or pass. (This rule will be removed due to technical difficulties but may be able to be applied in future iterations of the game)
  4. The betting is usually done by choosing a specific amount to bet, if the player gets a red ace and a black ace, they usually bet the pot as it’s the highest chance of a win. If either of the remaining aces are played for their hit card they lose and so, lose the amount of credits equal to the pot. If the card is in-between the aces, then the player wins everything in the pot.

Footer

The footer contains the copyright logo, with a sentence "A Probability game: Inbetweens by Mark Young 2023" Also contained in the footer are href access to my linkedIn and Github account.

Footer

Technologies Used

Languages Used

Testing

Please see TESTING.md for all testing performed

Future iterations

When I gain more knowledge by completing the code institute course there are some functions and features I would like to implement in future iterations of this game.

  1. High Score System - I would very much like to learn the correct method to apply a scoring system that records a players score locally or on a server so that the user may return to the site to improve their score.
  2. Multiplayer – In reality, the game can be played with multiple players and would be an advanced feature but enjoyable to think I would be capable of learning to do such a feat. I would very much like to implement a multiplayer option in the future.
  3. Calculator design - For teaching purposes I would like to implement a feature that would allow the user to move a dial from 0 to 100 to pick what they believe to be the probability of a certain scenario. They can gain credits to play by getting each attempt correct.
  4. Gain credit system - Using the feature in #3 the calculator could be used to gain credits to play the game of Inbetweens.
  5. More card games - I would like to be able to code many card games and delve into the intricacies of casino type game design. Maybe create a website containing many card games that friends and family can play against one another.

Deployment

The development platform used for this project was GitPod. To track the development stage and handle version control regular commits and pushes to GitHub has been conducted. The GitPod environment was created using a template provided by Code Institute. The live version of the project is deployed at GitHub pages. The procedure for deployment followed the "Creating your site" steps provided in GitHub Docs.

The live deployed link can be found here: https://markyjay.github.io/inbetweens/

Media Sources

https://cdnjs.com/libraries/font-awesome

https://www.bicycle.com/

This site was recommended by code institute and used to portray the responsivity of the project.

https://ui.dev/amiresponsive

Other Sources

Acknowledgements

For inspiration in general, for code, design help and advice, I'd like to give thanks to;