JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="wrapper">
  <canvas id="wall"></canvas>
  <div id="panel">
    <div id="count"></div>
    <div id="type" class="cnt"></div>
    <canvas id="selector" width="182" height="182"></canvas>
    <a href="javascript:;" id="btnSelector" title="発射モードを選択"></a>
    <a href="javascript:;" id="btnTrigger" title="発射">SHOOT</a>
    <a href="javascript:;" id="btnCaliber" title="口径を選択"></a>
  </div>
</div>

CSS

/**
 *  @charset    utf-8
 *  @modified    September 30, 2010
 *  @description  押したくなるボタン用
 *  @author      Tohl SMALLFIELD @ blades
 */
/*------------------------------------------------------------------------------

                リセット
                
------------------------------------------------------------------------------*/
html,
body,
p,
a,
canvas,
div,
iframe,
section{
  display: block;
  margin: 0;
  padding: 0;
  background: transparent none no-repeat scroll 0 0;
  border-style: none;
  outline: none;
}



/*------------------------------------------------------------------------------

                clearFix
                
------------------------------------------------------------------------------*/
div#count:after
{
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
  content: ".";
}



/*------------------------------------------------------------------------------

              テキスト画像代替
              
------------------------------------------------------------------------------*/
a
{
  display: block;
  margin: 0;
  padding: 0;
  border-style: none;
  text-indent: -10000px;
  text-decoration: none;
  text-align: left;
}



/*------------------------------------------------------------------------------

                
                
------------------------------------------------------------------------------*/
html,
body{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

body{
  background-position: center center;
}

div#wrapper{
  position: absolute;
  display: none;
}

canvas#wall,
iframe{
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

canvas#wall{
  background-position: center center;
}



/*------------------------------------------------------------------------------

              操作パネル
              
------------------------------------------------------------------------------*/
div#panel{
  position: absolute;
  display:...

JavaScript

// forked from Event's "Button" http://jsdo.it/Event/jam_session3
/**
 *  @charset    utf-8
 *  @modified    September 30, 2010
 *  @description  押したくなるボタン用
 *  @author      Tohl SMALLFIELD @ blades
 */
(function(){

var win = this,
  doc = win.document;
  
win.addEventListener("DOMContentLoaded", function(){
  
  //画像関係
  var loader     = new ImageLoader(),
    PANEL      = loader.add(DATA_URI_PANEL),
    HOLE       = loader.add(DATA_URI_HOLE),
    CRACK      = loader.add(DATA_URI_CRACK),
    SELECTOR   = loader.add(DATA_URI_SELECTOR),
    BACKGROUND = loader.add(DATA_URI_BACKGROUND);
  
  loader.addEventListener(ImageLoader.COMPLETE, function(){
    var win  = window,
      doc  = win.document,
      bdy  = doc.body,
      sto  = win.setTimeout,
      siv  = win.setInterval,
      
      //canvas関係
      cvsWall = doc.querySelector("#wall"),
      ctxWall = cvsWall.getContext("2d"),
      ctxSelector = doc.querySelector("#selector").getContext("2d"),
      
      //DOM要素
      dgt = doc.querySelector("#count"),
      ifr = doc.createElement("iframe"),
      typ = doc.querySelector("#type"),
      wpr = doc.querySelector("#wrapper"),
      
      //style
      styWpr = wpr.style,
      styPnl = doc.querySelector("#panel").style,
      
      //aタグ
      btnTrigger  = doc.querySelector("#btnTrigger"),
      btnSelector = doc.querySelector("#btnSelector"),
      btnCaliber  = doc.querySelector("#btnCaliber"),
      
      //サイズ関係
      PADDING = 40,//反動対策のパディング
      HALF_PADDING = PADDING >> 1,
      iw = win.innerWidth,
      ih = win.innerHeight,
      w  = iw  + PADDING,
      h  = ih  + PADDING,
      hw = w >> 1,
      hh = h >> 1,
      
      //表示モード変更用のクラス名
      DISP_TYPE_CNT  = "cnt",
      DISP_TYPE_MODE = "mode",
      DISP_TYPE_CAL  = "cal",
      
      //口径関係
      CALIBERS = [
        "cal_50",
        "cal_45",
        "cal_38",
        "cal_22"
      ],
      CALIBERS_LEN = CALIBERS.length,
      
      //セレクター関係
      MODES = [
       ...