Slot Machine: How do I validate whether all the 3 images are same in Slotmachine Block Javascript

JavaScript
1

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>
2

You forgot to post your JavaScript code that does the “rotate”. I’m guessing that would be the best place to do the conditional testing, but without seeing it, I don’t know.

3

Here’s an effective way. Get the images, and then create a set from them. Images that are the same will end up in the same set. A set with a size of 1 means that all of the images are the same.

const getStyle = (el, styleName) => window.getComputedStyle(el)[styleName];
const slotImage = (slot) => getStyle(slot, "backgroundImage");
const slotImages = (slots) => Array.from(slots).map(slotImage);
const createUniqueImageSet = (slots) => new Set(slotImages(slots))

const slots = document.querySelectorAll(".slotMachine .slot1");
const uniqueImages = createUniqueImageSet(slots);
if (uniqueImages.size === 1) {
  alert("You win!");
}
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.