Lottery Machine 2

Lottery ball simulator. Requires jQuery.

by the_voder

HTML

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>扭蛋机</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="css/main.css" rel="stylesheet">
  </head>

  <body>
    <div class="bg">
      <span id="message">点击抽奖</span>
      <div class="lotterybg">
        <div id="myCanvas"></div>
        <img src="https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/lighting.png" class="lighting" />
      </div>
    </div>
    <img src="https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/start-btn.png" id="start" />
    <div id="award"></div>
  </body>

</html>

CSS

body {
  margin: 0;
  padding: 0;
  border: none;
}

.bg {
  background: url(https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/bg.png) top no-repeat;
  background-size: 100%;
  overflow: hidden;
  position: absolute;
  width: 400px;
  height: 100%;
  margin-top: 0;
  margin-left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
}

#myCanvas {
  width: 85px;
  height: 170px;
  margin: 0;
  padding: 0;
}

#message {
  position: absolute;
  text-align: center;
  height: 25px;
  font-size: 22px;
  margin-top: 110px;
  margin-left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
}

.lotterybg {
  background: url(../img/lotterybg.png) top no-repeat;
  background-size: 100%;
  overflow: visible;
  width: 80%;
  height: 100%;
  margin-top: 160px;
  margin-left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
}

#myCanvas {
  position: absolute;
  border: none;
  width: 285px;
  height: 170px;
  margin-top: 15px;
  margin-left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
}

.lighting {
  display: block;
  max-width: 99%;
  margin-top: 0;
  margin-left: 0;
}

#start {
  position: absolute;
  z-index: 3;
  width: 202px;
  margin-top: 413px;
  margin-left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
}

#award {
  position: absolute;
  border: none;
  width: 60px;
  height: 200px;
  top: 470px;
 ...

JavaScript

$(document).ready(function() {

  /////////////////////////////////////////////////////////
  // DECLARE GLOBAL VARIABLES -----------------------------

  // Number of balls to create
  const ballCount = 4;

  // Minimum and maximum ball movement rate (px)
  const maxRate = 10;
  const minRate = 3;

  // Array of ball object instances
  let balls = [];

  // Container element (jQuery object)
  const containerElement = $('#myCanvas');

  // Element in which to display message when ball dispensed (jQuery object)
  const messageElement = $('#message');

  // Element to move ball to when dispensed (jQuery object)
  const awardElement = $('#award');

  // Messages to display when each ball is dispensed
  const ballMessages = ['紫球!', '绿球!', '黄球!', '红球!'];

  // Background images for ball elements
  const ballBackgrounds = [
    "https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/1.png",
    "https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/2.png",
    "https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/3.png",
    "https://chrischen0405.github.io/Demo/canvas/canvas%E6%89%AD%E8%9B%8B%E6%9C%BA%E6%95%88%E6%9E%9C/img/4.png"
  ];

  // Index of next ball to be dispensed
  let dispenseIndex = 0;

  // End variable declaration -----------------------------
  /////////////////////////////////////////////////////////

  /////////////////////////////////////////////////////////
  // DEFINE BALL OBJECT -----------------------------------

  ////////////////////////
  // Create ball object //
  ////////////////////////

  function Ball(id, container, message) {

    // Define ball object properties
    this.id = id;
    this.element = null;
    this.elementDiameter = 0;
    this.container = container;
    this.containerWidth = this.container.width();
    this.containerHeight = this.container.height();
    this.currentPos = {
      x:...