Wheel

by Alex Cowan

HTML

<link rel="stylesheet" href="main.css" type="text/css" />
        <script type="text/javascript" src="../../Winwheel.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
        
 <div align="center">
   <h1>Winwheel.js example wheel - wheel of fortune</h1>
   <p>Here is an example of a code-drawn Wheel of Fortune looking wheel which spins to a stop with the prize won alerted to the user.</p>
   <br />
   <p>
     With some additional coding it could be made so that the prize won is added to a total after each spin rather than
     just alerting the prize to make a proper wheel of fortune like game.
   </p>
   <br />
   <p>Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.</p>
   <br />
   <table cellpadding="0" cellspacing="0" border="0">
     <tr>
       <td>
         <div class="power_controls">
           <br />
           <br />
           <table class="power" cellpadding="10" cellspacing="0">
             <tr>
               <th align="center">Power</th>
             </tr>
             <tr>
               <td width="78" align="center" id="pw3" onClick="powerSelected(3);">High</td>
             </tr>
             <tr>
               <td align="center" id="pw2" onClick="powerSelected(2);">Med</td>
             </tr>
             <tr>
               <td align="center" id="pw1" onClick="powerSelected(1);">Low</td>
             </tr>
           </table>
           <br />
           <img id="spin_button" src="https://www.alexandercowan.com/wp-content/uploads/2020/09/spin_off.png" alt="Spin" onClick="startSpin();" />
           <br /><br />
           &nbsp;&nbsp;<a href="#" onClick="resetWheel(); return false;">Play Again</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(reset)
         </div>
       </td>
       <td width="438" height="582" class="the_wheel" align="center" valign="center">
         <canvas id="canvas" width="434" height="434">
         ...

CSS

/*
Description:
    Contains all the styles for the winning wheel page.
    
Verison History:
    2012-01-28, Douglas McKechie
    - Created based off earlier version.
    
    2015-09-26, Douglas McKechie
    - Minor updates for the 2.0 winwheel example.
*/

body
{
    font-family: arial;
}

/* Sets the background image for the wheel */
td.the_wheel
{
    background-image: url(https://www.alexandercowan.com/wp-content/uploads/2020/09/wheel_back.png);
    background-position: center;
    background-repeat: none;
}

/* Do some css reset on selected elements */
h1, p
{
    margin: 0;
}

div.power_controls
{
    margin-right:70px;
}

div.html5_logo
{
    margin-left:70px;
}

/* Styles for the power selection controls */
table.power
{
    background-color: #cccccc;
    cursor: pointer;
    border:1px solid #333333;
}

table.power th
{
    background-color: white;
    cursor: default;
}

td.pw1
{
    background-color: #6fe8f0;
}

td.pw2
{
    background-color: #86ef6f;
}

td.pw3
{
    background-color: #ef6f6f;
}

/* Style applied to the spin button once a power has been selected */
.clickable
{
    cursor: pointer;
}

/* Other misc styles */
.margin_bottom
{
    margin-bottom: 5px;
}

JavaScript

// Create new wheel object specifying the parameters at creation time.
 let theWheel = new Winwheel({
   'outerRadius': 212, // Set outer radius so wheel fits inside the background.
   'innerRadius': 75, // Make wheel hollow so segments don't go all way to center.
   'textFontSize': 24, // Set default font size for the segments.
   'textOrientation': 'vertical', // Make text vertial so goes down from the outside of wheel.
   'textAlignment': 'outer', // Align text to outside of wheel.
   'numSegments': 24, // Specify number of segments.
   'segments': // Define segments including colour and text.
     [ // font size and test colour overridden on backrupt segments.
       {
         'fillStyle': '#ee1c24',
         'text': '300'
       },
       {
         'fillStyle': '#3cb878',
         'text': '450'
       },
       {
         'fillStyle': '#f6989d',
         'text': '600'
       },
       {
         'fillStyle': '#00aef0',
         'text': '750'
       },
       {
         'fillStyle': '#f26522',
         'text': '500'
       },
       {
         'fillStyle': '#000000',
         'text': 'BANKRUPT',
         'textFontSize': 16,
         'textFillStyle': '#ffffff'
       },
       {
         'fillStyle': '#e70697',
         'text': '3000'
       },
       {
         'fillStyle': '#fff200',
         'text': '600'
       },
       {
         'fillStyle': '#f6989d',
         'text': '700'
       },
       {
         'fillStyle': '#ee1c24',
         'text': '350'
       },
       {
         'fillStyle': '#3cb878',
         'text': '500'
       },
       {
         'fillStyle': '#f26522',
         'text': '800'
       },
       {
         'fillStyle': '#a186be',
         'text': '300'
       },
       {
         'fillStyle': '#fff200',
         'text': '400'
       },
       {
         'fillStyle': '#00aef0',
         'text': '650'
       },
       {
         'fillStyle': '#ee1c24',
         'text': '1000'
       },
       {
         'fillStyle': '#f6989d',
        ...