🎉 Unleash the Fun: Spin Wheel Game Coding Extravaganza with HTML, CSS, JS! 🚀✨

-

Welcome, fellow coders and thrill-seekers! Get ready to embark on a coding rollercoaster where HTML, CSS, and JS come together for the ultimate Spin Wheel Game adventure. 🌐🎮

Introduction: Dive into the geeky fun as we unravel the secrets behind crafting an electrifying Spin Wheel Game using HTML, CSS, and JavaScript. Join me on this hilarious coding escapade that promises not only to tickle your funny bone but also to elevate your coding game. Let the games begin! 🎉💻

HTML Setup: We're kicking off this party with HTML awesomeness! Check out the cool structure that sets the stage for our Spin Wheel spectacle. It's not just code; it's a canvas for your gaming dreams. 🎨🕹️

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Spin Wheel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--CSS LINK-->
    <link rel="stylesheet" href="main.css" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
 rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
 crossorigin="anonymous">
    <!--CSS LINK END-->

    <!--Playable Ads Require-->
    <meta name="ad.orientation" content="portrait" />
    <meta name="ad.size" content="width=320,height=480" />
    
    <script type="text/javascript">
      var clickTag = "#"; 
    </script>

    <!--Requirement END-->
   
    <!--SCRIPT LINK-->
    <script type="text/javascript" src="Winwheel.js"></script>

    <!--SCRIPT LINK END-->
    <style>
      .h {
        overflow: hidden;
      }
      .winn {
        margin-top: 55px;
        width: auto;
        height: 290px;
      }
      .win_txt {
        width: 190px;
      }
      .pdt {
        padding-top: 120px;
      }
      .mt_img{
        margin-top: -30px;
      }
      .w{
        max-width: 320px !important;
        max-height: 480px !important;
        overflow: hidden;
      }
    </style>
  </head>
  <body class="bg">
    <div class="mx-auto body_cover w" id="view">
      <div class="container-fluid m-0 p-0 w">
        <div class="header">
          <div class="">
            <div class="prize">
              <div class="align d-flex my-auto">
                <span class="counter_g my-auto" id="gem">0</span
                ><img src="resources/gem.png" alt="Gems" class="token_img" />
              </div>
              <div class="align d-flex my-auto">
                <span class="counter_c my-auto" id="coin">0</span
                ><img
                  src="resources/coin.png"
                  alt="Coins"
                  class="token_img"
                  style="margin-right: 9px"
                />
              </div>
            </div>
          </div>
        </div>
        <!--Flying Token-->
        <!-- <div id="fg" style="display: none;"><img src="resources/flygem.png" alt="Coins" id="fgem" class="token_img" /></div>
      <div id="fc" style="display: none;"><img src="resources/flycoin.png" alt="Coins" id="fcoin" class="token_img" /></div> -->
        <!--Flying Token End-->
        <div class="container">
          <span class="heading d-flex" style="height: 80px"
            ><img src="resources/text.svg" id="wintxt" class="win_txt mx-auto"
          style="margin-top: -20px;"/></span>
          <div class="canva_box">
            <span class="arrow"
              ><img src="resources/v.svg" class="dial"
            /></span>
            <div class="cover">
              <div class="contain" id="stumble">
                <canvas
                  id="canvas"
                  width="692"
                  height="692"
                  data-responsiveMinWidth="180"
                  data-responsiveScaleHeight="true"
                >
                  <p style="color: white" align="center">
                    Sorry, your browser doesn't support canvas. Please try
                    another.
                  </p>
                </canvas>
              </div>
            </div>
          </div>
          <div class="power_controls">
            <button
              id="spin_button"
              class="spn_btn spin pulse_spin d-flex"
              onClick="startSpin();"
            >
              <span class="text-align-center text_btn"
                >Spin</br><span class="spn" id="round">x3</span></span
              >
            </button>
          </div>

          <!-- Modal Coins-->
          <div class="modal h" id="coinsModal" tabindex="-1" onclick="Modal()">
            <div class="modal-dialog modal_padding">
              <div class="modal-content modal_bg bg-text">
                <div
                  class="modal-header"
                  style="border: none"
                  style="border: none"
                >
                  <h5 class="modal-title pd_t mx-auto" id="gemModalLabel">
                    <img src="resources/wow.png" alt="Wow" class="wow" />
                  </h5>
                </div>
                <div class="modal-body">
                  <div class="modal_blur">
                    <div class="img_box d-flex mx-auto">
                      <!-- <div id="m_fc" style="display: none;"><img src="resources/big.svg" alt="Coins" id="m_fcoin" class="token_img" /></div> -->
                      <img
                        src="resources/Tokens.png"
                        alt="Treasure"
                        id="mod_img"
                        class="modal_img won d-flex"
                      />
                    </div>
                  </div>

                  <div class="modal_blur1">
                    <h3 class="pulse_text d-flex justify-content-center">
                      x1000
                    </h3>
                  </div>
                </div>
                <div class="modal-footer" style="border: none"></div>
              </div>
            </div>
          </div>

          <!-- Modal Gems-->
          <div class="modal h" id="gemModal" tabindex="-1" onclick="Modal()">
            <div class="modal-dialog modal_padding">
              <div class="modal-content modal_bg bg-text">
                <div
                  class="modal-header"
                  style="border: none"
                  style="border: none"
                >
                  <h5 class="modal-title pd_t mx-auto" id="gemModalLabel">
                    <img src="resources/wow.png" alt="Wow" class="wow" />
                  </h5>
                </div>
                <div class="modal-body">
                  <div class="modal_blur">
                    <div class="img_box d-flex mx-auto">
                      <!-- <div id="m_fg" style="display: none;"><img src="resources/gemss.png" alt="Coins" id="m_fgem" class="token_img" /></div> -->
                      <img
                        src="resources/Gems.png"
                        alt="Gem Chest"
                        id="mod_img"
                        class="modal_img won d-flex"
                      />
                    </div>
                  </div>

                  <div class="modal_blur1">
                    <h3 class="pulse_text d-flex justify-content-center">
                      x10000
                    </h3>
                  </div>
                </div>
                <div class="modal-footer" style="border: none"></div>
              </div>
            </div>
          </div>
          <!-- Modal BattlePass-->
          <div class="modal h" id="battleModal" tabindex="-1">
            <div class="modal-dialog modal_padding">
              <div class="modal-content modal_bg">
                <div class="modal-header" style="border: none">
                  <h5 class="modal-title mx-auto" id="battleModalLabel">
                    <img src="resources/wow.png" alt="Wow" class="wow" />
                  </h5>
                </div>
                <div class="modal-body">
                  <div class="d-flex mx-auto">
                    <!-- <img src="resources/battlepass.png" alt="Treasure" id="mod_img" class="modal_img won d-flex mx-auto"> -->
                  </div>
                </div>
                <div class="modal-footer" style="border: none">
                  <button
                    type="button"
                    class="btn btn-guys"
                    id=""
                    onclick="Modal()"
                  >
                    <span class="get">Get</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal Emote-->
          <div class="modal h" id="emoteModal" tabindex="-1">
            <div class="modal-dialog modal_padding">
              <div class="modal-content modal_bg">
                <div class="modal-header" style="border: none">
                  <h5 class="modal-title mx-auto" id="emoteModalLabel">
                    <img src="resources/wow.png" alt="Wow" class="wow" />
                  </h5>
                </div>
                <div class="modal-body">
                  <div class="img_box d-flex mx-auto">
                    <!-- <img src="resources/emote.svg" alt="Emote" id="mod_img" class="modal_img won d-flex mx-auto"> -->
                  </div>
                </div>
                <div class="modal-footer" style="border: none">
                  <button
                    type="button"
                    class="btn btn-guys"
                    id=""
                    onclick="Modal()"
                  >
                    <span class="get">Get</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal Jackpot-->
          <div class="modal h" id="jackpotModal" tabindex="-1">
            <div class="modal-dialog modal_padding">
              <div class="modal-content modal_bg1">
                <div class="modal-header" style="border: none">
                  <h5
                    class="modal-title mx-auto"
                    id="jackpotModalLabel"
                    style="padding-top: 48px"
                  >
                    <img src="resources/group.png" alt="Wow" class="wow" />
                  </h5>
                </div>
                <div class="modal-body">
                  <div class="img_box d-flex mx-auto">
                    <img
                      src="resources/chestclose.png"
                      alt="Chest Close"
                      id="mod_img"
                      class="modal_img mt_img won_jackimg d-flex mx-auto"
                    />
                  </div>
                </div>
                <div
                  class="modal-footer"
                  style="border: none; margin-bottom: 10px;"
                >
                  <a
                    class="btn btn-guys"
                    href="javascript:window.open(window.clickTag)"
                     ><span class="get">Get</span></a
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- Modal Legend-->
          <div class="modal h" id="legendModal" tabindex="-1">
            <div class="modal-dialog modal_padding">
              <div class="modal-content modal_bg">
                <div class="modal-header" style="border: none">
                  <h5 class="modal-title mx-auto" id="legendModalLabel">
                    <img src="resources/wow.png" alt="Wow" class="wow" />
                  </h5>
                </div>
                <div class="modal-body">
                  <div class="img_box d-flex mx-auto">
                    <!-- <img src="resources/legend.png" alt="Legendary Skin" id="mod_img" class="modal_img skin d-flex mx-auto"> -->
                  </div>
                </div>
                <div class="modal-footer" style="border: none">
                  <button
                    type="button"
                    class="btn btn-guys"
                    id=""
                    onclick="Modal()"
                  >
                    <span class="get">Get</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal Epic-->
          <div class="modal h" id="epicModal" tabindex="-1">
            <div class="modal-dialog modal_padding">
              <div class="modal-content modal_bg">
                <div class="modal-header" style="border: none">
                  <h5 class="modal-title mx-auto" id="epicModalLabel">
                    <img src="resources/wow.png" alt="Wow" class="wow" />
                  </h5>
                </div>
                <div class="modal-body">
                  <div class="img_box d-flex mx-auto">
                    <!-- <img src="resources/epic.png" alt="Epic Skin" id="mod_img" class="modal_img skin epic d-flex mx-auto"> -->
                  </div>
                </div>
                <div class="modal-footer" style="border: none">
                  <button
                    type="button"
                    class="btn btn-guys"
                    id=""
                    onclick="Modal()"
                  >
                    <span class="get">Get</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal Special-->
          <div class="modal h" id="specialModal" tabindex="-1">
            <div class="modal-dialog modal_padding">
              <div class="modal-content modal_bg">
                <div class="modal-header" style="border: none">
                  <h5 class="modal-title mx-auto" id="specialModalLabel">
                    <img
                      src="resources/specialskin.png"
                      alt="Wow"
                      class="wow"
                    />
                  </h5>
                </div>
                <div class="modal-body">
                  <div class="img_box d-flex mx-auto">
                    <!-- <img src="resources/specil.png" alt="Special Skin" id="mod_img" class="modal_img skin special d-flex mx-auto"> -->
                  </div>
                </div>
                <div class="modal-footer" style="border: none">
                  <button
                    type="button"
                    class="btn btn-guys"
                    id=""
                    onclick="Modal()"
                  >
                    <span class="get">Get</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!--Modal End-->
        </div>
      </div>
    </div>

    <script>
      
    </script>

  </body>
</html>

Time to add some flair! Our CSS is not just about styling; it's about making the Spin Wheel look runway-ready. Watch out for those spins, darling! 💃✨

css
.bg {
  
  overflow: hidden;
}

.disable{
  pointer-events: none;
}

.body_cover{
  display: flex;
  position: relative;
  max-width: 320px;
  max-height: 480px;
  background: #9005da;
  background-image: url(resources/bg.png);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*Body Design End*/

.clickable {
  cursor: pointer;
}
.header {
  display: grid;
  box-sizing: border-box;
  height: 60px;
  left: 0px;
  right: 0px;
  top: 0px;
  background: #9005da;
  border-bottom: 5px solid #bb24ff;
  box-shadow: 0px 6px 9px rgba(187, 36, 255, 0.51);
  border-radius: 0px 0px 16px 16px;
}

.heading {
  position: relative;
}

.prize {
  margin-top: 15px;
  position: static;
  display: flex;
  justify-content: end;
}
.token_img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.modal-dialog {
  height: 480px;
}

/*Responsive Design Start*/
/* @media screen and (max-width: 720px) {
  .arrow {
    position: relative;
    top: -14px;
    margin-left: -28px;
    z-index: 999;
}
} */
.arrow {
  position: relative;
  top: -14px;
  margin-left: -28px;
  z-index: 999;
}

.canva_box {
  display: block;
  padding-top: 11px;
  margin-left: -11px;
  min-width: 320px;
  height: 480px;;
  overflow: hidden;
  margin-top: 6px;
}

#canvas{
  width: 100%;
}


@media screen and (max-width: 500px) {
 /*Important*/
  .body_cover{
    left: 0 !important;
    background-image: url(resources/bg.png);
    background-size: cover;
    position: relative;
    width: fit-content !important;
  }
  
  .modal-content {
    height: 100% !important;
  }
  .arrow {
    position: relative;
    z-index: 999;
    top: -7px !important;
    left: 24px !important;  
  }

  .canva_box {
    display: block;
    padding-top: 11px;
    margin-left: -11px;
    min-width: 320px;
    height: 480px;;
    overflow: hidden;
    margin-top: 6px;
  }

  .cover {
    border-radius: 50%;
    border: 16px solid #ffb220;
    position: relative;
    width: fit-content;
    display: flex;
    overflow: hidden;
    transition: 5s;
    margin-right: auto;
    margin-left: -73px !important;
  }

  .powerspin1 {
    width: 444px !important;
    height: 444px !important;
  }

  .powerspin2 {
    width: 444px !important;
    height: 444px !important;
  }

  .powerspin3 {
    width: 444px !important;
    height: 444px !important;
  }

  .contain {
    transform: rotate(15deg);
    width: 420px !important;
    height: 420px !important;
    background-color: #ffffff;
    border-radius: 50%;
    border: 5px solid #ffffff;
    position: relative;
    overflow: hidden;
    transition: 5s;
  }

  #canvas{
    width: 100%;
  }

  .dial {
    margin-right: auto;
    margin-left: auto;
    width: 45px;
    height: 50px;
    margin-left: 134px !important;
    position: relative;
  }

  .power_controls {
    position: relative;
  }
  .text_btn {
    padding: 12px !important;
    position: absolute;
    text-align: center;
    display: inline-grid;
  }

  /* .jack_color {
    color: #FF2929 !important;
    text-shadow: 3.32468px 3.32468px 8px rgb(255 41 41 / 65%) !important;
  } */
  #spin_button {
    z-index: 999;
    width: 108px !important;
    height: 108px !important;
    border: 6px solid #da0190 !important;
    background: radial-gradient(#fc81ff, #ff29b6);
    color: #ffffff;
    text-transform: uppercase;
    align-items: center;
    font-weight: 700;
    font-size: 24px !important;
    line-height: 1;
    text-shadow: 2px 2px 0px rgb(0 0 0 / 47%);
    box-shadow: 0 5px 20px #000;
    font-family: sans-serif;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    letter-spacing: 1px;
}

  .won {
    margin-left: 15px !important;
    margin-top: 0px !important;
    width: 256px !important;
    height: 130px !important;
  }

  .modal_bg1 {
    margin-top: 0 !important;
    background-color: #4016478c !important;
    background-image: url(resources/GoldenVect.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    animation: myJack 0.5s linear 2s;
    animation-fill-mode: forwards;
  }
  
.modal_padding {
  padding-bottom:0;
  height: 480px;
  background-size: cover;
  left: 0;
  right: 0;
  top: 0 !important;
  bottom: 0;
  margin: 0 !important;
}

.spn_btn{
  margin-top: -309px !important;
  margin-left: 88px !important;
  position: absolute;
}

.modal_blur {
  background-color: #ff000000;
  /* background-image: radial-gradient(farthest-side at 50% 40%, #ffffffab, #ffffff18, #ffffff05); */
}

.modal_blur1 {
  background-color: #ff000000;
  /* background-image: radial-gradient(farthest-side at 50% 40%, #ffffff42, #ffffff18, #ffffff05); */
}

.won_jackimg{
  width: auto;
  height: 170px !important;
  margin-top: -12px !important;
}

}


/*Responsive Design End*/


.cover {
  width: fit-content;
  border-radius: 50%;
  border: 16px solid #ffb220;
  overflow: hidden;
  transition: 5s;
  margin-top: -60px;
  margin-right: -75px;
  margin-left: -69px;
}
.contain {
  transform: rotate(15deg);
  width: 420px !important;
  height: 420px !important;
  background-color: #ffffff;
  border-radius: 50%;
  border: 5px solid #ffffff;
  position: relative;
  overflow: hidden;
  transition: 2s;
}

.powerspin1 {
  transform: rotate(1590deg);
    width: 420px !important;
    height: 420px !important;
    background-color: #ffffff;
    border-radius: 50%;
    border: 5px solid #ffffff;
    position: relative;
    overflow: hidden;
  transition-duration: 2s;
}

.powerspin2 {
  transform: rotate(2975deg);
  width: 420px !important;
  height: 420px !important;
  background-color: #ffffff;
  border-radius: 50%;
  border: 5px solid #ffffff;
  position: relative;
  overflow: hidden;
  transition: 2s;
}

.powerspin3 {
  transform: rotate(5760deg);
  width: 420px !important;
  height: 420px !important;
  background-color: #ffffff;
  border-radius: 50%;
  border: 5px solid #ffffff;
  position: relative;
  overflow: hidden;
  transition: 2s;
}

.dial {
  margin-right: auto;
  margin-left: auto;
  width: 45px;
  height: 50px;
  margin-left: 162px;
  position: relative;
}

.power_controls {
  position: relative;
}

.spn_btn{
  margin-top: -296px;
  margin-left: 108px;
  position: absolute;
}

#spin_button {
  z-index: 999;
  width: 80px;
  height: 80px;
  border: 4px solid #da0190;
  background: radial-gradient(#fc81ff, #ff29b6);
  color: #ffffff;
  text-transform: uppercase;
  align-items: center;
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
  text-shadow: 2px 2px 0px rgb(0 0 0 / 47%);
  box-shadow: 0 5px 20px #000;
  font-family: sans-serif;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  letter-spacing: 1px;
}

.spn {
  text-transform: lowercase;
}

.text_btn {
  padding: 4px;
  position: absolute;
  text-align: center;
  display: inline-grid;
}

.counter_g {
  position: relative;
  font-family: "General Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  padding: 1px;
  align-items: flex-end;
  text-align: right;
  margin-top: 12px;
  background: linear-gradient(180deg, #fff282 0%, #ffd12f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: countg 0.5s linear 0.2s;
  animation-fill-mode: forwards;
}

@keyframes countg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.counter_g:target {
  display: none;
}

.counter_c {
  position: relative;
  font-family: "General Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  padding: 1px;
  width: 30px;
  align-items: flex-end;
  text-align: right;
  margin-top: 12px;
  background: linear-gradient(180deg, #fff282 0%, #ffd12f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: countc 0.5s linear 0.2s;
  animation-fill-mode: forwards;
}

@keyframes countc {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.counter_c:target {
  display: none;
}

.modal_padding {
  max-width: 320px !important;
  max-height: 480px !important;
  background-size: cover;
  left: 0;
  right: 0;
  top: -25px;
  bottom: 0;
  overflow: hidden;
}


.bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  padding: 0;
  text-align: center;
}

.modal_blur {
  background-color: #ff000000;
  /* background-image: radial-gradient(farthest-side at 50% 40%, #ffffffab, #ffffff18, #ffffff05); */
}

.modal_blur1 {
  background-color: #ff000000;
  /* background-image: radial-gradient(farthest-side at 50% 40%, #ffffff45, #ffffff00, #ffffff00); */
}

.modal_bg {
  padding-bottom:40px;
  background-color: #4016478c !important;
  background-image: url(resources/Vector.png);
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  animation: myTok 0.3s linear 0.2s;
  animation-fill-mode: forwards;
}

@keyframes myTok {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.modal_bg1 {
  padding-bottom:40px;
  margin-top: 36px;
  background-color: #4016478c !important;
  background-image: url(resources/GoldenVect.png);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  animation: myJack 0.3s linear 2.1s;
  animation-fill-mode: forwards;
}

@keyframes myJack {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.modal_bg1:target {
  display: none;
}


.wow {
  width: 212px;
  height: auto;
}

.img_box {
  width: auto;
  height: 108px;
}

.won {
  margin-left: 65px;
  width: 169px;
  height: 123px;
}

.won_jackimg{
width: auto;
height: 170px;
}
.skin {
  width: 165px;
  height: auto;
  background: linear-gradient(180deg, #ffaa46 0%, #ffb800 100%);
  border-radius: 6px;
}

.epic {
  width: 150px;
}

.special {
  width: 145px;
}

.btn-guys {
  width: 100%;
  background: linear-gradient(180deg, #ff9900 0%, #f2bd00 100%);
  border: 7px solid #ffc01e !important;
  box-shadow: 0px 0px 49.6552px 9.45813px rgb(255 190 67 / 24%),
    inset -14.1872px 0px 11.8227px #ff8a00,
    inset 14.1872px 0px 11.8227px #ff8a00,
    inset 0px -14.1872px 23.6453px #ff8a00,
    inset 0px 14.1872px 11.8227px #ff8a00;
  border-radius: 30px !important;
}

.get {
  font-family: monospace;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  color: #ffffff;
  text-shadow: 1.72906px 2.72906px 1.72906px rgb(0 0 0 / 66%);
}

.modal_img {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

/*Flying Gem*/

@-webkit-keyframes flygem {
  0% {
    top: 20%;
    left: 48%;
  }
  75% {
    top: 10%;
    left: 48%;
  }
  100% {
    top: 5%;
    left: 90%;
  }
}

@keyframes flygem {
  0% {
    top: 20%;
    left: 48%;
  }
  75% {
    top: 10%;
    left: 48%;
  }
  100% {
    top: 5%;
    left: 90%;
  }
}

#fgem {
  position: absolute;
  width: 50px;
  height: auto;
  animation: flygem 5s linear 0s infinite;
  -webkit-animation: flygem 5s linear 0s infinite;
  -moz-animation: flygem 5s linear 0s infinite;
  --0-animation: flygem 5s linear 0s infinite;
  z-index: 1;
}

/*Flying Gem End*/
/*Flying Coin*/

@-webkit-keyframes flycoin {
  0% {
    top: 20%;
    left: 48%;
  }
  75% {
    top: 10%;
    left: 48%;
  }
  100% {
    top: 5%;
    left: 95%;
  }
}

@keyframes flycoin {
  0% {
    top: 20%;
    left: 48%;
  }
  75% {
    top: 10%;
    left: 48%;
  }
  100% {
    top: 5%;
    left: 95%;
  }
}

#fcoin {
  position: absolute;
  width: 50px;
  height: auto;
  animation: flycoin 0.5s linear 0s infinite;
  -webkit-animation: flycoin 5s linear 0s infinite;
  -moz-animation: flycoin 5s linear 0s infinite;
  --0-animation: flycoin 5s linear 0s infinite;
  z-index: 1;
}
/*Flying Coin End*/

/*Modal Flying Gem*/

@-webkit-keyframes m_flygem {
  0% {
    top: 20%;
    left: 48%;
  }
  75% {
    top: 10%;
    left: 48%;
  }
  100% {
    top: 0%;
    left: 48%;
  }
}

@keyframes m_flygem {
  0% {
    top: 20%;
    left: 48%;
  }
  75% {
    top: 10%;
    left: 48%;
  }
  100% {
    top: 0%;
    left: 48%;
  }
}

#m_fgem {
  position: absolute;
  width: 60px;
  height: auto;
  animation: m_flygem 0.5s linear 0s infinite;
  -webkit-animation: m_flygem 5s linear 0s infinite;
  -moz-animation: m_flygem 5s linear 0s infinite;
  --0-animation: m_flygem 5s linear 0s infinite;
  z-index: 1;
}

/*Flying Gem End*/
/*Modal Flying Coin*/

@-webkit-keyframes m_flycoin {
  0% {
    top: 20%;
    left: 48%;
  }
  75% {
    top: 10%;
    left: 48%;
  }
  100% {
    top: 0%;
    left: 48%;
  }
}

@keyframes m_flycoin {
  0% {
    top: 20%;
    left: 48%;
  }
  75% {
    top: 10%;
    left: 48%;
  }
  100% {
    top: 0%;
    left: 48%;
  }
}

#m_fcoin {
  position: absolute;
  width: 50px;
  height: auto;
  animation: m_flycoin 0.5s linear 0s infinite;
  -webkit-animation: m_flycoin 5s linear 0s infinite;
  -moz-animation: m_flycoin 5s linear 0s infinite;
  --0-animation: m_flycoin 5s linear 0s infinite;
  z-index: 1;
}
/*Flying Coin End*/

.pulse_text {
  padding: 12px;
  margin-top: 39px;
  font-family: monospace;
  color: #ffbf0b;
  text-shadow: 2px 2px #ff8f00;
  font-size: 55px;
  animation: pulse_t 1s infinite ease-out;
}

@keyframes pulse_t {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.pulse_spin {
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.9);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1);
  }
  70% {
    transform: scale(0.9);
  }
  80% {
    transform: scale(1);
  }
  90% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

JS Jamboree: Here's where the magic truly unfolds! Our JavaScript adds the brains to our Spin Wheel extravaganza. Get ready for some mind-blowing coding wizardry. ✨🧙

javascript
// Create new wheel object specifying the parameters at creation time.
      let theWheel = new Winwheel({
        numSegments: 12, // Specify number of segments.
        innerRadius: 200, // Set inner radius so wheel fits inside the background.
        drawMode: "image", // drawMode must be set to image.
        drawText: true, // Need to set this true if want code-drawn text on image wheels.
        textFontSize: 16, // Set text options as desired.
        textOrientation: "curved",
        textDirection: "reversed",
        textAlignment: "",
        textMargin: 90,
        textFontFamily: "monospace",
        textStrokeStyle: "black",
        textLineWidth: 3,
        textFillStyle: "white",
        responsive: true,
        // Define segments.
        segments: [
          { jack: "Jackpot" },
          { coin: "150" },
          { gem: "500" },
          { pass: "Battlepass ticket" },
          { gem: "2500" },
          { emo: "Emote" },
          { legend: "Legendary skin" },
          { gems: "10000" },
          { coin: "35" },
          { coins: "1000" },
          { epic: "Epic Skin" },
          { special: "Special Skin" },
        ],
        // Specify the animation to use.

        animation: {
          type: "spinToStop",
          duration: 3, // Duration in seconds.
          spins: 12, // Number of complete spins.
          callbackFinished: alertPrize,
          callbackSound: playSound, // Function to call when the tick sound is to be triggered.
          soundTrigger: "pin", // Specify pins are to trigger the sound, the other option is 'segment'.
        },
        // Turn pins on.
        pins: {
          number: 12,
          responsive: true,
          fillStyle: "#ffffff00",
          outerRadius: 0,
        },
      });

      // Loads the tick audio sound in to an audio object.
      let audio = new Audio("tick.mp3");

      // This function is called when the sound is to be played.
      function playSound() {
        // Stop and rewind the sound if it already happens to be playing.
        audio.pause();
        audio.currentTime = 0;

        // Play the sound.
        audio.play();
      }

      // Create new image object in memory.
      let loadedImg = new Image();

      // Create callback to execute once the image has finished loading.
      loadedImg.onload = function () {
        theWheel.wheelImage = loadedImg; // Make wheelImage equal the loaded image object.
        loadedImg.width = 702;
        loadedImg.height = 702;
        theWheel.draw(); // Also call draw function to render the wheel.
      };

      // Set the image source, once complete this will trigger the onLoad callback (above).
      loadedImg.src = "resources/Frame 88.jpg";

      // Vars used by the code in this page to do power controls.
      let wheelPower = 0;
      let wheelSpinning = false;
      let spinCount = 0;
      // -------------------------------------------------------
      // Function to handle the onClick on the power buttons.
      // -------------------------------------------------------
      function powerSelected(powerLevel) {
        // Ensure that power can't be changed while wheel is spinning.
        if (wheelSpinning == false) {
          // Reset all to grey incase this is not the first time the user has selected the power.
          document.getElementById("pw1").className = "";
          document.getElementById("pw2").className = "";
          document.getElementById("pw3").className = "";

          // Now light up all cells below-and-including the one selected by changing the class.
          if (powerLevel >= 1) {
            document.getElementById("pw1").className = "pw1";
          }

          if (powerLevel >= 2) {
            document.getElementById("pw2").className = "pw2";
          }

          if (powerLevel >= 3) {
            document.getElementById("pw3").className = "pw3";
          }

          // Set wheelPower var used when spin button is clicked.
          wheelPower = powerLevel;
        }
      }

      document.querySelector(".spin").addEventListener("click", spin_button);
      var out = document.getElementById("round");
      // -------------------------------------------------------
      // Click handler for spin button.
      // -------------------------------------------------------
      function startSpin() {
        
        document.getElementById("spin_button").classList.remove("pulse_spin");

        if (spinCount > 2) {
          alert("No more spins.");
          return false;
        }
        switch (spinCount) {
          case 0:
            out.innerHTML = "x2";
            document.getElementById("wintxt").style.display = "none";

            var element = document.getElementById("stumble");
            element.classList.remove("contain");
            element.classList.add("powerspin1");

            var puls = document.getElementById("spin_button");  
            puls.classList.remove("pulse_spin");


            var non = document.getElementById("spin_button");  
            non.classList.add("disable");
            setTimeout(function() {
              non.classList.remove("disable");
              document.getElementById("gemModal").style.display = "block";
            }, 2000);

            
            setTimeout(() => {
              var gem = 8999;
              var obj1 = document.getElementById("gem");
              var timerMy = setInterval(function () {
                gem++;
                obj1.innerHTML = gem;
                console.log(gem);
                if (gem == 10000) {
                  clearInterval(timerMy);
                }
              }, 0);
            }, 2000);
             

            // setTimeout(()=> {
            //   var timerMy = setInterval(function(){
            //   document.getElementById("gem").innerHTML = "10000";
            // }
            // ,4200);

            document.getElementById("coinsModal").style.display = "none";
            document.getElementById("jackpotModal").style.display = "none";
            document.getElementById("emoteModal").style.display = "none";
            document.getElementById("battleModal").style.display = "none";
            document.getElementById("legendModal").style.display = "none";
            document.getElementById("epicModal").style.display = "none";
            document.getElementById("specialModal").style.display = "none";
            break;

          case 1:
            out.innerHTML = "x1";
            document.getElementById("wintxt").style.display = "none";

            var element = document.getElementById("stumble");
            element.classList.remove("powerspin1");
            element.classList.add("powerspin2");

            var puls = document.getElementById("spin_button");  
            puls.classList.remove("pulse_spin");

            var non = document.getElementById("spin_button");  
            non.classList.add("disable");
            setTimeout(function() {
              non.classList.remove("disable");
            document.getElementById("coinsModal").style.display = "block";
            }, 2000);

            setTimeout(() => {
              var cnt = 099;
              var obj1 = document.getElementById("coin");
              // document.getElementById("coin").innerHTML = "1000";
              var timerMy = setInterval(function () {
                cnt++;
                obj1.innerHTML = cnt;
                console.log(cnt);
                if (cnt == 1000) {
                  clearInterval(timerMy);
                }
              }, 0);
            }, 2000);


            document.getElementById("gemModal").style.display = "none";
            document.getElementById("jackpotModal").style.display = "none";
            document.getElementById("emoteModal").style.display = "none";
            document.getElementById("battleModal").style.display = "none";
            document.getElementById("legendModal").style.display = "none";
            document.getElementById("epicModal").style.display = "none";
            document.getElementById("specialModal").style.display = "none";
            break;

          default:
            out.innerHTML = "";
            document.getElementById("wintxt").style.display = "none";
            document.getElementById("jackpotModal").style.display = "block";

            var element = document.getElementById("stumble");
            element.classList.remove("powerspin2");
            element.classList.add("powerspin3");

            var puls = document.getElementById("spin_button");  
            puls.classList.remove("pulse_spin");

            var non = document.getElementById("spin_button");  
            non.classList.add("disable");
            setTimeout(function() {
              non.classList.remove("disable");
              document.getElementById("jackpotModal").style.display = "block";
            }, 2000);

            document.getElementById("coinsModal").style.display = "none";
            document.getElementById("gemModal").style.display = "none";
            document.getElementById("emoteModal").style.display = "none";
            document.getElementById("battleModal").style.display = "none";
            document.getElementById("legendModal").style.display = "none";
            document.getElementById("epicModal").style.display = "none";
            document.getElementById("specialModal").style.display = "none";
            break;
        }

        // Ensure that spinning can't be clicked again while already running.
        if (wheelSpinning == false) {
          // Based on the power level selected adjust the number of spins for the wheel, the more times is has
          // to rotate with the duration of the animation the quicker the wheel spins.

          // Disable the spin button so can't click again while wheel is spinning.
          document.getElementById("spin_button").className =
            "spn_btn spin d-flex disable";

          // Begin the spin animation by calling startAnimation on the wheel object.

          // theWheel.startAnimation(); For Random Spin

          // Set to true so that power can't be changed and spin button re-enabled during
          // the current animation. The user will have to reset before spinning again.
          wheelSpinning = false;
        }
        spinCount++;
      }
        

      // -------------------------------------------------------
      // Function for reset button.
      // -------------------------------------------------------
      function resetWheel() {
        theWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
        theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
        theWheel.draw(); // Call draw to render changes to the wheel.

        document.getElementById("pw1").className = ""; // Remove all colours from the power level indicators.
        document.getElementById("pw2").className = "";
        document.getElementById("pw3").className = "";

        wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
      }

      // -------------------------------------------------------
      // Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters.
      // note the indicated segment is passed in as a parmeter as 99% of the time you will want to know this to inform the user of their prize.
      // -------------------------------------------------------
      function alertPrize(indicatedSegment) {
        // Do basic alert of the segment text. You would probably want to do something more interesting with this information.
        // if (indicatedSegment.coin) {
        //   document.getElementById("coin").innerText = indicatedSegment.coin;
        //   document.getElementById("fc").style.display = "block";
        //   document.getElementById("fg").style.display = "none";
        // }
        // if (indicatedSegment.coins) {
        //   document.getElementById("coin").innerText = indicatedSegment.coins;
        //   // document.getElementById("coinsModal").style.display = "block";
        //   document.getElementById("fc").style.display = "block";
        //   document.getElementById("fg").style.display = "none";
        //   document.getElementById("m_fc").style.display = "block";
        //   document.getElementById("m_fg").style.display = "none";
        // }
        // if (indicatedSegment.gem) {
        //   document.getElementById("gem").innerText = indicatedSegment.gem;
        //   document.getElementById("fg").style.display = "block";
        //   document.getElementById("fc").style.display = "none";
        // }
        // if (indicatedSegment.gems) {
        //   document.getElementById("gem").innerText = indicatedSegment.gems;
        //   // document.getElementById("gemModal").style.display = "block";
        //   document.getElementById("fg").style.display = "block";
        //   document.getElementById("fc").style.display = "none";
        //   document.getElementById("m_fg").style.display = "block";
        //   document.getElementById("m_fc").style.display = "none";
        // }
        // if(indicatedSegment.jack){
        //   // document.getElementById("jackpotModal").style.display = "block";
        //   document.getElementById("fc").style.display = "none";
        //   document.getElementById("fg").style.display = "none";
        // }
        // if(indicatedSegment.emo){
        //   // document.getElementById("emoteModal").style.display = "block";
        //   document.getElementById("fc").style.display = "none";
        //   document.getElementById("fg").style.display = "none";
        // }
        // if(indicatedSegment.pass){
        //   // document.getElementById("battleModal").style.display = "block";
        //   document.getElementById("fc").style.display = "none";
        //   document.getElementById("fg").style.display = "none";
        // }
        // if(indicatedSegment.legend){
        //   // document.getElementById("legendModal").style.display = "block";
        //   document.getElementById("fc").style.display = "none";
        //   document.getElementById("fg").style.display = "none";
        // }
        // if(indicatedSegment.epic){
        //   // document.getElementById("epicModal").style.display = "block";
        //   document.getElementById("fc").style.display = "none";
        //   document.getElementById("fg").style.display = "none";
        // }
        // if(indicatedSegment.special){
        //   // document.getElementById("specialModal").style.display = "block";
        //   document.getElementById("fc").style.display = "none";
        //   document.getElementById("fg").style.display = "none";
        // }
      }
    </script>

    <script>
      function Modal() {

        var puls = document.getElementById("spin_button"); 
        setTimeout(function() {
            puls.classList.add("pulse_spin");
            }, 1500);
          
            var non = document.getElementById("coinsModal");  
            non.classList.add("disable");
            setTimeout(function() {
              non.classList.remove("disable");
              document.getElementById("coinsModal").style.display = "none";
            }, 1500);

            var nong = document.getElementById("gemModal");  
            nong.classList.add("disable");
            setTimeout(function() {
              nong.classList.remove("disable");
              document.getElementById("gemModal").style.display = "none";
            }, 1500);  

        document.getElementById("wintxt").style.display = "block";
        document.getElementById("emoteModal").style.display = "none";
        document.getElementById("battleModal").style.display = "none";
        document.getElementById("legendModal").style.display = "none";
        document.getElementById("epicModal").style.display = "none";
        document.getElementById("specialModal").style.display = "none";
        // document.getElementById("mod_img").className = "frame";
        
      }

Conclusion - The Grand Finale: As the curtain falls on this coding fiesta, you've not only crafted a Spin Wheel Game but also infused it with your unique coding style. Share the laughter, spin your way to victory, and stay tuned for more coding extravaganzas! 🌟💻

#SpinWheelFiesta #HTMLHumor #CSSCraze #JSSpectacle #WebDevFun #CodeLikeItsHot 🚀🎭 

Location: Bengaluru, Karnataka, India

Comments

Post a Comment

Popular posts from this blog

🧟‍♂️ Zombie Shooting Galore: A Thrilling HTML, CSS, JS Game Tutorial! 🎮🚀

-
Image
Greetings, fellow code warriors and zombie hunters! Ready to unleash chaos with HTML, CSS, and JavaScript? Buckle up as we dive into the heart-pounding creation of a Zombie Shooting Game! 💻🔫 Introduction: In this spine-chilling tutorial, we'll walk through the process of crafting an immersive Zombie Shooting Game using the enchanting trio of HTML, CSS, and JavaScript. Prepare for a coding adventure filled with laughs, thrills, and the sweet taste of victory. Let the zombie apocalypse begin! 🧟‍♂️🚀 HTML Havoc: Our journey commences with HTML magic! Witness the creation of the game's foundation, setting the stage for an epic showdown between you and the undead. It's not just code; it's the blueprint of a zombie-infested battlefield. 💀🕹️ html <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" />  ...
Read more

Navigating the Digital Renaissance: Embracing Tech Trends in 2024

-
Image
In the ever-evolving landscape of technology, each year brings forth a digital renaissance, introducing us to groundbreaking trends that redefine the way we live, work, and connect. As we step into 2024, the tech horizon is ablaze with innovation. Let's embark on a journey through the hottest trends that are shaping our digital future. 1. Metaverse Mania: Beyond Reality The Metaverse is no longer a concept from science fiction; it's our present and future. From virtual reality escapades to immersive social experiences, the Metaverse is redefining the way we interact with digital spaces. Tech giants are investing billions to create interconnected virtual worlds, promising a paradigm shift in entertainment, education, and socialization. 2. AI's Evolution: From Smart to Genius Artificial Intelligence is no stranger to our lives, but 2024 marks a shift from smart to genius AI. Machine learning algorithms are becoming more sophisticated, allowing AI systems to comprehend, le...
Read more