JSFiddle - React, Tailwind, and code Playground

by zerrax

HTML

<script src="/raw.githubusercontent.com/clintbellanger/Karma-Slots/master/slots.js"></script>
<div style="width: 960px; position: relative;">
    <canvas id="canvas">
      Your browser does not support the HTML5 Canvas element.
    </canvas>
    <select id="select" style="position: absolute; top: 400px; right: 5px; font-size: 25px;">
     <option value="SYM1">Wild</option>
     <option value="SYM2">Strawberry</option>
     <option value="SYM3">Pineapple</option>
     <option value="SYM4">Lemon</option>
     <option value="SYM5">Watermelon</option>
     <option value="SYM6">Grape</option>
    </select>
  </div>

CSS

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  background-image: url("images/background.png");
  background-position: 20px 0px;
  background-repeat: no-repeat;
    width: 570px;
  margin: auto;
  padding: 5px;
  overflow: hidden;
  background-color: #333;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#666666), color-stop(.6, #333));
  border-radius: 10px;
}

#wrap {
  width: 300px;
  height: 240px;
  overflow: hidden;
}

#game {
  width: 200px;
  text-align: center;
}


button {
  font-size: 7pt;
}

#info {
  position: absolute;
  top: 20px;
  left: 200px;
  width: 100px;
  text-align: left;
  font-size: 9pt;
  font-family: arial, helvetica, sans-serif;
}

#credits {
  font-size: 10pt;
}

#log {
  color: #666666;
}

#attribution {
  text-align: right;
  width: 280px;
  font-size: 7pt;
  color: #666666;
  font-family: arial, helvetica, sans-serif;
  margin-top: 20px;
}

#attribution a {
  color: #6666ff;
}

JavaScript

"use strict";

document.addEventListener("DOMContentLoaded", function(){
  var gameArea = {
    SPIN_BUTTON_SRC : "./img/BTN_Spin_d.png",
    ACTIVE_BUTTON_SRC : "./img/BTN_Spin.png",
    BG_IMAGE_SRC : "url('./img/BG.png')",
    CANVAS_BORDER : "2px solid gray",
    JSON_URL : "https://api.myjson.com/bins/14ts7r",
    canvas : document.getElementById('canvas'),

    start : function() {    // Set canvas property
      this.canvas.width = 960;
      this.canvas.height = 536;
      this.context = this.canvas.getContext("2d");
      this.canvas.style.border = this.CANVAS_BORDER;
      this.canvas.style.backgroundImage = this.BG_IMAGE_SRC;
      this.frame();
      this.btn("inactive");
      this.loadJSON();
    },

    sound : function(name, callback){
      var effect = new Audio("./audio/" + name + ".mp3");
      effect.play();
      effect.addEventListener("ended", callback);
    },

    event : function(){   // Event for click on spin button
      var _this = this;
      _this.canvas.addEventListener("click", function clickOnBtn(e){
        var x = e.clientX;
        var y = e.clientY;
        if (Math.pow(x-884, 2) + Math.pow(y-278, 2) < Math.pow(50, 2)){
          _this.canvas.removeEventListener("click", clickOnBtn);
          _this.sound("lottery");
          _this.btn("inactive");
          _this.animateSymbols();
        }
      });
    },

    btn : function(type){   // Draw spin button
      var ctx = this.context;
      var button = new Image();
      if (type === "inactive"){
        button.src = this.SPIN_BUTTON_SRC;
      } else if (type === "active"){
        button.src = this.ACTIVE_BUTTON_SRC;
        gameArea.event();
      }
      button.onload = function() {
        ctx.drawImage(button, 824, 218);
      }
    },

    frame : function(){   // Draw middle frame
      var ctx = this.context;
      ctx.beginPath();
      ctx.lineWidth="4";
      ctx.strokeStyle="MidnightBlue";
      ctx.rect(307,187,241,161);
      ctx.stroke();
    },

   ...