├── README.md
├── css
└── style.css
├── img
├── .DS_Store
├── barbie.png
├── bugChiron.png
├── junkCar.jpeg
├── lamborghini.png
├── maserati.png
├── mercedes.png
├── readme.jpg
└── tesla.png
├── index.html
└── js
└── main.js
/README.md:
--------------------------------------------------------------------------------
1 | Slot Machine
2 |
3 | This project is a simple slot machine with cars that allows the user to purchase tokens and use those tokens to bet on a spin of 3 cars. To win your money you put in have to stop the spin on the same car 2 out of 3 spins but if you get all three spins to match you win the pot if you do neither you lose.
4 |
5 | 
6 | Demo:https://rakimdevcraig.github.io/Slot-Machine/
7 |
8 | How It's Made:
9 |
10 | Tech used: Html, CSS, Jquery, Javascript
11 |
12 | This project was the hardest one i've completed due to the amount of features that went into it but I did this as part of a team so we were able to work together. First we needed to get the 3 cars or wheels to spin together to do that we put all of the cars into an array and linked them to a click event. Once getting the wheels to spin we had to get them to also
13 | stop we did that the same way as getting all of them to spin which was by tying them to a click event. After that we had to decide what form of payment users were going to play the game with, we decided to have small $1 and $2 bets. After deciding that we made sure that the user couldn't play the game if they didn't use any money we did that by adding a conditional and alerting the user if they didn't spend any money. After that we decided the winning conditions one which the user would get their money back if they match 2 out of 3 cars and the ultimate winning condition where they win the
14 | whole pot if they match up all 3 cars.
15 |
16 | Optimizations:
17 | At first we had one winning condition which was if all of the cars matched up you won the pot. After some testing and we realized users wouldn't win our game enough and therefore would be pushed away from. To combat this we slowed down the speed of the spins so it was a tad easier to match up all of the cars and we added a condition to win if you matched 2 cars because users were experiencing that alot.
18 |
19 | Lessons Learned:
20 | This was the hardest project i've completed to date. This one was tough because we not only had to get all 3 wheels spinning together at the same time which was our biggest challenge but we also had to stop them at the same time. I got some good work doing conditionals in this project also to decide multiple winning conditions. I also learned that even though I made something as fun as this there's still ways to learn numerous things all while enjoying myself this project didn't feel like work at all it was just a bunch of fun.
21 |
22 | Examples:
23 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | font-size: 20px;
8 | }
9 | header{
10 | text-align: center;
11 | }
12 | .slot{
13 | margin-top: 5%;
14 | height: 300px;
15 | width: 25%;
16 | float: left;
17 | border: 1px solid black;
18 | }
19 | .left{
20 | margin-left: 5%;
21 | margin-right: 3%;
22 | }
23 | .center{
24 | margin-left: 4%;
25 | margin-right: 4%;
26 | }
27 | .right{
28 | margin-left: 3%;
29 | margin-right: 5%;
30 | }
31 | .slot img{
32 | height: 250px;
33 | width: 100%;
34 | }
35 | .buttons, .playerPot, .gamePot{
36 | width: 33%;
37 | float: left;
38 | }
39 |
40 | .bet{
41 | width: 100%;
42 | clear: both;
43 | margin: 0 auto;
44 | }
45 |
--------------------------------------------------------------------------------
/img/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rakimdevcraig/Slot-Machine/405d712bb1d3302d9a20b41cc28f99bd3ea79417/img/.DS_Store
--------------------------------------------------------------------------------
/img/barbie.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rakimdevcraig/Slot-Machine/405d712bb1d3302d9a20b41cc28f99bd3ea79417/img/barbie.png
--------------------------------------------------------------------------------
/img/bugChiron.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rakimdevcraig/Slot-Machine/405d712bb1d3302d9a20b41cc28f99bd3ea79417/img/bugChiron.png
--------------------------------------------------------------------------------
/img/junkCar.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rakimdevcraig/Slot-Machine/405d712bb1d3302d9a20b41cc28f99bd3ea79417/img/junkCar.jpeg
--------------------------------------------------------------------------------
/img/lamborghini.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rakimdevcraig/Slot-Machine/405d712bb1d3302d9a20b41cc28f99bd3ea79417/img/lamborghini.png
--------------------------------------------------------------------------------
/img/maserati.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rakimdevcraig/Slot-Machine/405d712bb1d3302d9a20b41cc28f99bd3ea79417/img/maserati.png
--------------------------------------------------------------------------------
/img/mercedes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rakimdevcraig/Slot-Machine/405d712bb1d3302d9a20b41cc28f99bd3ea79417/img/mercedes.png
--------------------------------------------------------------------------------
/img/readme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rakimdevcraig/Slot-Machine/405d712bb1d3302d9a20b41cc28f99bd3ea79417/img/readme.jpg
--------------------------------------------------------------------------------
/img/tesla.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rakimdevcraig/Slot-Machine/405d712bb1d3302d9a20b41cc28f99bd3ea79417/img/tesla.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | House Hayden Slot Machine
6 |
7 |
8 |
9 |
10 |
11 |
Slot Machine
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | Pot
38 |
39 |
40 |
41 |
42 | Bank Account
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | //User gets to make a bet
2 | //User clicks on a button to start the reels
3 | //User clicks on each button to stop each individual reel
4 | //Displays win or lose (based off the matching images
5 | // 3 of a kind user wins big prize
6 | // Win, bet gets add to individual’s pot
7 | //Lose, bet gets subtracted to individual’s pot
8 | $(document).ready(function(){
9 | $("#money").keydown(function (e) {
10 | // Allow: backspace, delete, tab, escape, enter and .
11 | if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
12 | // Allow: Ctrl/cmd+A
13 | (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
14 | // Allow: Ctrl/cmd+C
15 | (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
16 | // Allow: Ctrl/cmd+X
17 | (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
18 | // Allow: home, end, left, right
19 | (e.keyCode >= 35 && e.keyCode <= 39)) {
20 | // let it happen, don't do anything
21 | return;
22 | }
23 | // Ensure that it is a number and stop the keypress
24 | if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
25 | e.preventDefault();
26 | }
27 | });
28 | //global Array
29 | var cars = ['img/tesla.png','img/maserati.png','img/mercedes.png','img/bugChiron.png','img/barbie.png','img/lamborghini.png','img/junkCar.jpeg'];
30 | var pot = 0;
31 | var min = 1;
32 | var max = 2;
33 | var bankAccount = 0;
34 | var intervalOne;
35 | var intervalTwo;
36 | var intervalThree;
37 | var rotateStopped1 = false;
38 | var rotateStopped2 = false;
39 | var rotateStopped3 = false;
40 |
41 | $('#pot').html(pot)
42 | $('#player').html(bankAccount)
43 |
44 | $("#money").keyup(function(event) {
45 | if (event.keyCode === 13) {
46 | $("#enter").click();
47 | }
48 | });
49 |
50 | //Event listener for amount of coins
51 | $('#enter').on('click',function(){
52 | var money = parseInt( $('#money').val() )
53 | bankAccount = money
54 | $('#player').html(bankAccount)
55 | $('#money').val('')
56 | });
57 |
58 | //Event listener for min bet
59 | $('#min').on('click',function(){
60 | if(bankAccount === 0){
61 | alert('Purchase tokens')
62 | }else{
63 | minBet()
64 | }
65 | });
66 | //Event listener for max bet
67 | $('#max').on('click',function(){
68 | if(bankAccount === 0){
69 | alert('Purchase tokens')
70 | }else if(bankAccount <= 1){
71 | alert('Purchase more tokens')
72 | }
73 | else{
74 | maxBet()
75 | }
76 | });
77 | function minBet(){
78 | //takes money from your bank account
79 | bankAccount = bankAccount - min;
80 | //add that money into the game pot
81 | pot += (min * 2);
82 | $('#pot').html(pot)
83 | $('#player').html(bankAccount)
84 | $('#results').html('')
85 | }
86 | function maxBet(){
87 | //takes money from your bank account
88 | bankAccount = bankAccount - max;
89 | //deducts that money into the game pot
90 | pot += (max * 2);
91 | $('#pot').html(pot)
92 | $('#player').html(bankAccount)
93 | $('#results').html('')
94 | }
95 | function rotate1() {
96 | var randomImage1 = cars[Math.floor(Math.random() * cars.length)];
97 | $('#firstSlot').attr('src',randomImage1);
98 | }
99 | function rotate2() {
100 | var randomImage2 = cars[Math.floor(Math.random() * cars.length)];
101 | $('#secondSlot').attr('src',randomImage2);
102 | }
103 | function rotate3() {
104 | var randomImage3 = cars[Math.floor(Math.random() * cars.length)];
105 | $('#thirdSlot').attr('src',randomImage3);
106 | }
107 | function beginRotation1(){
108 | intervalOne = setInterval(rotate1,200);
109 | rotateStopped1 = false
110 | }
111 | function beginRotation2(){
112 | intervalTwo = setInterval(rotate2,200);
113 | rotateStopped2 = false
114 | }
115 | function beginRotation3(){
116 | intervalThree = setInterval(rotate3,200);
117 | rotateStopped3 = false
118 | }
119 | //Event listener for spinning all 3 reels
120 | $('#start').on('click',function(){
121 | if(bankAccount === 0){
122 | alert('Purchase tokens')
123 | }else if(pot === 0){
124 | alert('Buy Tokens')
125 | }else{
126 | //starts a function that randomize the reel1
127 | beginRotation1()
128 | beginRotation2()
129 | beginRotation3()
130 | }
131 | });
132 | //Event listener to stop slot 1
133 | $('#stopOne').on('click',function(){
134 | stopRotation1()
135 | });
136 | //Event listener to stop slot 2
137 | $('#stopTwo').on('click',function(){
138 | stopRotation2()
139 | });
140 | //Event listener to stop slot 3
141 | $('#stopThree').on('click',function(){
142 | stopRotation3()
143 | });
144 | //Event listener to stop all 3 slots
145 | $('#stopAllThree').on('click',function(){
146 | stopRotation1()
147 | stopRotation2()
148 | stopRotation3()
149 | })
150 | //Key listener to stop all three slots
151 | // $("#stopAllThree").keyup(function(event) {
152 | // if (event.keyCode === 32) {
153 | // $("#stopOne").click();
154 | // $("#stopTwo").click();
155 | // $("#stopThree").click();
156 | // }
157 | // });
158 | function stopRotation1() {
159 | clearInterval(intervalOne);
160 | rotateStopped1 = true
161 | if(rotateStopped1 === rotateStopped2 && rotateStopped1 === rotateStopped3){
162 | winningCondition()
163 | }
164 | }
165 | function stopRotation2() {
166 | clearInterval(intervalTwo);
167 | rotateStopped2 = true
168 | if(rotateStopped1 === rotateStopped2 && rotateStopped1 === rotateStopped3){
169 | winningCondition()
170 | }
171 | }
172 | function stopRotation3() {
173 | clearInterval(intervalThree);
174 | rotateStopped3 = true
175 | if(rotateStopped1 === rotateStopped2 && rotateStopped1 === rotateStopped3){
176 | winningCondition()
177 | }
178 | }
179 | //Conditional function to compare the results from slot 1 , slot 2 and slot 3
180 | function winningCondition(){
181 |
182 | var slotOne = $('#firstSlot').attr('src')
183 | var slotTwo = $('#secondSlot').attr('src')
184 | var slotThree = $('#thirdSlot').attr('src')
185 |
186 | if(slotOne === slotTwo && slotTwo === slotThree && slotOne === slotThree){
187 | bankAccount += pot;
188 | $('#player').html(bankAccount)
189 | pot = 0;
190 | $('#pot').html(pot)
191 | $('#results').html('Winner! Winner! Chicken dinner!');
192 | }
193 | else if(slotOne === slotTwo || slotOne === slotThree || slotTwo === slotThree){
194 | bankAccount += (pot / 2)
195 | $('#player').html(bankAccount)
196 | pot = 0;
197 | $('#pot').html(pot)
198 | $('#results').html('You won your money back!')
199 | }
200 | else {
201 | pot = 0;
202 | $('#pot').html(pot)
203 | //display you lose
204 | $('#results').html('Keep Trying!')
205 | }
206 | }
207 | });
208 |
--------------------------------------------------------------------------------
15 |
16 |