Hey, I am developing a slot machine. Here is my Code. After Certain rotates they’ll stop so now I want to check if the three images in the block are equal than an alert should come.
.machineContainer{
background-color: #000;
padding: 5px 1px 5px 1px;
overflow: hidden;
height: 135px;
}
#casino .content:nth-child(1) {
text-align: center;
/*background: url('../img/machine.png') no-repeat 50% 80px;*/
height: 580px;
}
#casino .content > div {
clear:both;
padding-top: 200px;
width: 300px;
margin: 0 auto;
}
.slotMachine{
/*width: 32.333333%;*/
width: 38.333333%;
border: 5px solid #000;
height: 100px;
padding: 0px;
overflow: hidden;
display: inline-block;
text-align: center;
background-color: #ffffff;
margin-top: 40px;
}
.btn-group-casino {
margin-top: 150px;
margin-left: -32px;
border:none;
background-color: yellow;
color: red;
}
.machineResult{
color:#fff;
text-align:center;
font-weight: 900;
}
.noBorder{
border:none !important;
background: transparent !important;
}
.slotMachine .slot{
height:100px;
background-position-x: 55%;
background-repeat: no-repeat;
}
.slot1 {
background-image: url("../img/slot1.png");
}
.slot2 {
background-image: url("../img/slot2.png");
}
.slot3 {
background-image: url("../img/slot3.png");
}
.slot4 {
background-image: url("../img/slot4.png");
}
.slot5 {
background-image: url("../img/slot5.png");
}
.slot6 {
background-image: url("../img/slot6.png");
}
// HTML
<div class="container">
<div class="row">
<div id="casino" style="padding-top:50px;">
<div class="content">
<div>
<div id="casino1" class="slotMachine" style="margin-left: -65px;">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
<div id="casino2" class="slotMachine">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
<div id="casino3" class="slotMachine">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
<div id="randomButton" type="button" class="btn btn-group-justified btn-group-casino">Start!</div>
</div>
</div>
</div>
</div>
</div>