34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # BLACKJACK #
2 |
3 | ## ABOUT ##
4 |
5 | First attempt at Game Development with JS, HTML, and CSS using flex-box
6 |
7 | ## TECH STACK ##
8 | 1. HTML
9 | 2. CSS w/ flexbox
10 | 3. JavaScript
11 |
12 | ## FEATURES ##
13 |
14 | 1. Casino-stakes excitement at the leisure and recreation of your home--mobile device playable too!!
15 | 2. Won't actually lose your pants if you're a really terrible player
16 | 3. Safe to play from any location
17 |
18 |
19 | ## HOW TO USE ##
20 |
21 | 1. Gather round the table
22 | 2. Tap on the hit button
23 | 3. If you have too under 21 and don't think "hitting" again (asking for another card) will push you over 21, DO IT!
24 | 4. Goal of the game is to be highest at or under 21 sum from your card value, without going over
25 | 5. If dealer has 16 or less, he HAS to hit, so you should use this to your advantage
26 | 6. Reset the game and reshuffle the cards by pushing the refresh button (if it ain't broke, why fix it?! kidding... added functionality to be added in future editions. STAY TUNED!!)
27 |
28 |
29 | ## BUILD STEPS ##
30 |
31 | 1. Create a deck
32 | 2. Shuffle it
33 | 3. Deal cards to the dealer and the player
34 | 4. Hit / Deal extra card
35 | 5. Stay or Hold to evaluate and compare
36 | 6. Optimize/adjust value of ace from 11 to 1
37 | 7.
38 |
39 | ## Expansion Steps ##
40 | 1. Have Hidden Dealer Card
41 | 2. Keep running sum of each hand
42 | dealer forced hit option if under 16 (adjustable to 15 and 17)
43 | 3. If you get five cards without going over, you win
44 | 4. Betting option to bid and adjust value of bet for each hand
45 | 5. counting cards option (running counting cards option to maximize bet)
46 |
47 |
48 | ## VALUABLE LESSONS ##
49 | 1. Learning about special functions/methods like reduce to change the Ace from an 11 value card to a 1 if too many
50 | 2.
51 |
52 | ## RESOURCES & CREDITS ##
53 |
54 | * FIRST AND FOREMOST*
55 | * THE EXCELLENT TUTELAGE OF Colton Wright AND Abraham E. Tavarez ---SUPREME STUFF!! *
56 | *
57 | ** ADDITIONAL SUPPORT FROM **
58 |
59 | 1. (StepbyStep) https://scrimba.com/playlist/p3py7U7
60 |
61 | 2. (VIDEO) Code Blackjack with JavaScript HTML CSS
62 | Kenny Yip Coding
63 | https://www.youtube.com/watch?v=bMYCWccL-3U
64 |
65 |
66 | 3. https://www.thatsoftwaredude.com/content/6417/how-to-code-blackjack-using-javascript
67 |
68 | 4. https://math.hws.edu/eck/cs271/js-work/Blackjack.html
69 |
70 |
71 | 5. https://code-boxx.com/javascript-blackjack/
72 |
73 | I am Keith Andrew Martinez, a student developer learning to code, and hopefully, eventually, be able to teach and help others to do the same.
74 | Feel free to follow, star, or hit me up with suggestions or criticism as you like -- ALL are welcome!
75 | Cheers!
76 |
77 | https://github.com/keithandrewmartinez/
78 |
79 |
80 |
--------------------------------------------------------------------------------
/blackjack/README.md:
--------------------------------------------------------------------------------
1 | # BLACKJACK #
2 |
3 | ## ABOUT ##
4 |
5 | First attempt at Game Development with JS, HTML, and CSS using flex-box
6 |
7 | ## TECH STACK ##
8 | 1. HTML
9 | 2. CSS w/ flexbox
10 | 3. JavaScript
11 |
12 | ## FEATURES ##
13 |
14 | 1. Casino-stakes excitement at the leisure and recreation of your home--mobile device playable too!!
15 | 2. Won't actually lose your pants if you're a really terrible player
16 | 3. Safe to play from any location
17 |
18 |
19 | ## HOW TO USE ##
20 |
21 | 1. Gather round the table
22 | 2. Tap on the hit button
23 | 3. If you have too under 21 and don't think "hitting" again (asking for another card) will push you over 21, DO IT!
24 | 4. Goal of the game is to be highest at or under 21 sum from your card value, without going over
25 | 5. If dealer has 16 or less, he HAS to hit, so you should use this to your advantage
26 | 6. Reset the game and reshuffle the cards by pushing the refresh button (if it ain't broke, why fix it?! kidding... added functionality to be added in future editions. STAY TUNED!!)
27 |
28 |
29 | ## BUILD STEPS ##
30 |
31 | 1. Create a deck
32 | 2. Shuffle it
33 | 3. Deal cards to the dealer and the player
34 | 4. Hit / Deal extra card
35 | 5. Stay or Hold to evaluate and compare
36 | 6. Optimize/adjust value of ace from 11 to 1
37 | 7.
38 |
39 | ## Expansion Steps ##
40 | 1. Have Hidden Dealer Card
41 | 2. Keep running sum of each hand
42 | dealer forced hit option if under 16 (adjustable to 15 and 17)
43 | 3. If you get five cards without going over, you win
44 | 4. Betting option to bid and adjust value of bet for each hand
45 | 5. counting cards option (running counting cards option to maximize bet)
46 |
47 |
48 | ## VALUABLE LESSONS ##
49 | 1. Learning about special functions/methods like reduce to change the Ace from an 11 value card to a 1 if too many
50 | 2.
51 |
52 | ## RESOURCES & CREDITS ##
53 |
54 | * FIRST AND FOREMOST*
55 | * THE EXCELLENT TUTELAGE OF Colton Wright AND Abraham E. Tavarez ---SUPREME STUFF!! *
56 | *
57 | ** ADDITIONAL SUPPORT FROM **
58 |
59 | 1. (StepbyStep) https://scrimba.com/playlist/p3py7U7
60 |
61 | 2. (VIDEO) Code Blackjack with JavaScript HTML CSS
62 | Kenny Yip Coding
63 | https://www.youtube.com/watch?v=bMYCWccL-3U
64 |
65 |
66 | 3. https://www.thatsoftwaredude.com/content/6417/how-to-code-blackjack-using-javascript
67 |
68 | 4. https://math.hws.edu/eck/cs271/js-work/Blackjack.html
69 |
70 |
71 | 5. https://code-boxx.com/javascript-blackjack/
72 |
73 | I am Keith Andrew Martinez, a student developer learning to code, and hopefully, eventually, be able to teach and help others to do the same.
74 | Feel free to follow, star, or hit me up with suggestions or criticism as you like -- ALL are welcome!
75 | Cheers!
76 |
77 | https://github.com/keithandrewmartinez/
78 |
79 |
80 |
--------------------------------------------------------------------------------
/blackjack/blackjack.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | let dealerSum = 0;
4 | let player1Sum = 0;
5 |
6 | let dealerAceCount = 0;
7 | let player1AceCount = 0;
8 |
9 | let hidden;
10 | let deck;
11 |
12 | let canHit = true; // allows the player (you) to draw while playerSum <= 21
13 |
14 | window.onload = function(){
15 | buildDeck();
16 | shuffleDeck();
17 | startGame();
18 | }
19 |
20 |
21 |
22 | function buildDeck(){
23 | let rank = ["A", "2", "3", "4","5","6","7","8","9", "10", "J", "Q", "K"];
24 | let suit = ["C", "D", "H","S"];
25 | deck = [];
26 |
27 | for (let i = 0; i < suit.length; i++){
28 | for (let j = 0; j < rank.length; j++){
29 | deck.push(rank[j] + "-" + suit[i]); // A-C -> K-C, A-D -> K-D
30 | }
31 | }
32 | console.log(deck); // deck should be logged to console within statement of function buildDeck
33 | }
34 | //console.log(deck); // Remember that because of scope this will return as undefined in the console
35 |
36 |
37 |
38 |
39 |
40 |
41 | function shuffleDeck(){ // Randomization of deck with for-loop and Math.random method
42 | for (let i = 0; i < deck.length; i++) { // Random number between (0-1) * 52 => (0-51.999)
43 | let j = Math.floor(Math.random() * deck.length); // multiplied by 52 for accurate distribution of randomization
44 | let temp = deck[i];
45 | deck[i] = deck[j];
46 | deck[j] = temp;
47 | }
48 | // console.log(deck);
49 | }
50 |
51 | // console.log(deck);
52 | // console.log(shuffleDeck);
53 |
54 |
55 |
56 |
57 | function startGame(){
58 | hidden = deck.pop();
59 | dealerSum += getValue(hidden);
60 | dealerAceCount += checkAce(hidden);
61 | // console.log(hidden);
62 | // console.log(dealerSum);
63 |
64 | while (dealerSum < 17) { // create while loop to repeatedly evaluate if the dealer should "hit" for a new card
65 | // //
66 | let cardImg = document.createElement("img");
67 | let card = deck.pop();
68 | cardImg.src = "./cards/" + card + ".png";
69 | dealerSum += getValue(card);
70 | dealerAceCount += checkAce(card);
71 | document.getElementById("dealer-cards").append(cardImg);
72 | }
73 | console.log(dealerSum);
74 |
75 |
76 | for (let i = 0; i < 2; i++) {
77 | let cardImg = document.createElement("img");
78 | let card = deck.pop();
79 | cardImg.src = "./cards/" + card + ".png";
80 | player1Sum += getValue(card);
81 | player1AceCount += checkAce(card);
82 | document.getElementById("player-cards").append(cardImg);
83 |
84 | }
85 | console.log(player1Sum);
86 | document.getElementById("hit").addEventListener("click", hit);
87 | document.getElementById("stay").addEventListener("click", stay);
88 |
89 | }
90 |
91 |
92 |
93 | function hit() {
94 | if (!canHit) {
95 | return;
96 | }
97 | let cardImg = document.createElement("img");
98 | let card = deck.pop();
99 | cardImg.src = "./cards/" + card + ".png";
100 | player1Sum += getValue(card);
101 | player1AceCount += checkAce(card);
102 | document.getElementById("player-cards").append(cardImg);
103 |
104 | if(reduceAce(player1Sum, player1AceCount) > 21) { // A, J, 8 -> 1 +10 + 8
105 | canHit = false;
106 | }
107 | }
108 |
109 |
110 | function stay() {
111 | dealerSum = reduceAce(dealerSum, dealerAceCount);
112 | player1Sum = reduceAce(player1Sum, player1AceCount);
113 |
114 | canHit = false;
115 | document.getElementById("hidden").src = "./cards/" + hidden +
116 | ".png";
117 |
118 | let message = "";
119 | if (player1Sum > 21) {
120 | message = "You Lose!";
121 | }
122 | else if (dealerSum > 21) {
123 | message = "You win!";
124 | }
125 | // if both you and dealer <= 21 (after you've clicked stay)
126 | else if (player1Sum == dealerSum) {
127 | message = "Tie!";
128 | }
129 | else if (player1Sum > dealerSum) {
130 | message = "You Win!";
131 | }
132 | else if (player1Sum < dealerSum) {
133 | message = "You Lose!";
134 | }
135 | document.getElementById("dealer-sum").innerText = dealerSum;
136 | document.getElementById("player-sum").innerText = player1Sum;
137 | document.getElementById("results").innerText = message;
138 | }
139 |
140 |
141 |
142 | function getValue(card){
143 | let data = card.split("-"); // "4-C" -> ["4", "C"]
144 | let value = data[0];
145 |
146 | if (isNaN(value)) { //A J Q K // if value is of type Not a Number
147 | if (value == "A") { // But is of letter type A
148 | return 11; // Assign value of 11
149 | }
150 | return 10; // Otherwise, assign value of 10
151 | }
152 | return parseInt(value);
153 | }
154 |
155 |
156 | function checkAce(card) {
157 | if(card[0] == "A" ) {
158 | return 1;
159 | }
160 | return 0;
161 | }
162 |
163 |
164 | function reduceAce(playerSum, playerAceCount) {
165 | while (playerSum > 21 && playerAceCount > 0) {
166 | playerSum -= 10;
167 | playerAceCount -= 1;
168 | }
169 | return playerSum;
170 | }
171 |
172 |
--------------------------------------------------------------------------------
25 |
26 |