view source

JavaScript

document.title = 'ふくびきをまわす ガラガラ抽選機 特賞/1等/2等/3等/4等/5等/';

$(function(){
  var w = document.body.clientWidth;
  var h = window.innerHeight;
  var cx = w/2;
  var cy = h/2;
  var r = Math.min(h,w)/2;
  var t= 0;
  var timer;
  var aryOrg = [];
  var ary = [];
  var seRole = new Audio('role.mp3');
  var seResult = new Audio('role-result.mp3');


  $demo = $('#demo');
  $area = $('<div>',{id:'area'});
  var $canvas = $('<canvas>',{width:w, height:h});
  $canvas[0].width = w;
  $canvas[0].height = h;
  var ctx = $canvas[0].getContext('2d');

  var $btn = $('<a>').addClass('btn').text('ふくびきをまわす/とめる');
  $area.on('click', function(){
    if($(this).hasClass('stop')){
      $area.removeClass('stop');
      role();
    } else if($(this).hasClass('slow')) {
    } else {
      $area.addClass('slow');
      stopRole();
    }
  });

  var $result = $('<p>').addClass('result').text('-');

  $demo
    .append($area);
  $area
    .append($canvas)
    .append($btn)
    .append($result);

  var prizes = [1,5,12,24,32,16];
  var colors = [
    '#e6b422',
    '#8f8f8f',
    '#015393',
    '#e3211f',
    '#279b15',
    '#333333',
  ];
  
  $h1 = $('<h1>').text(document.title);
  $form = $('<form>');
  $demo
    .append($form)
    .append($h1);
  colors.forEach(function(v,i){
    $label = $('<label>');
    $i = $('<i>').css({color:v}).text('●');
    $input = $('<input>', {type:'number',name:'p'+i}).val(prizes[i]);
    $label.append($i).append($input);
    $form.append($label);
    $input.on('change',  function(){
      var n = Number($(this).val());
      prizes[i] = n;
      initPrizes();
    });
  });


  function initPrizes(){
    aryOrg = [];
    prizes.forEach(function(max, ii){
      aryOrg = aryOrg.concat([...Array(max)].map((_, i) => ii));
    });
    ary = aryOrg.concat();
    console.log(ary);
    ary = shuffle(ary);
  }
  const shuffle = ([...array]) => {
    for (let i = array.length - 1; i >= 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }


  function toRad(deg){
    return deg * ( Math.PI / 180 ) ;
  }
  function drawPolygon(cx,cy,r,vertex,color,rad){
    ctx.beginPath();
    ctx.fillStyle = color || '#000';
    rad = rad || 0;
    var addDegree = Math.floor(rad);
    var addRadian = toRad(addDegree);
    for(var i=0;i<vertex;i++){
      var rad = Math.PI*2/vertex*i + addRadian;
      var x = cx + Math.cos(rad)*r;
      var y = cy + Math.sin(rad)*r;
      if(i===0){
        ctx.moveTo(x,y);
      } else {
        ctx.lineTo(x,y);
      }
    }
    ctx.fill();
    ctx.closePath();
  }
  function drawTri(x,y,w,h,color){
    ctx.beginPath();
    ctx.fillStyle = color || '#f00';
    ctx.moveTo(x-w/6,y);
    ctx.lineTo(x+w/6,y);
    var x2 = x+w/2;
    var x3 = x-w/2;
    ctx.lineTo(x2,y+h);
    ctx.lineTo(x3,y+h);
    ctx.fill();
    ctx.closePath();
  }
  function drawCircle(cx,cy,r,color){
    ctx.beginPath();
    ctx.fillStyle = color || '#f00';
    ctx.arc(cx, cy, r, 0, Math.PI * 2, true);
    ctx.fill();
    ctx.closePath();
  }
  function drawOut(cx,cy,r,vertex,color,rad){
    var addDegree = Math.floor(rad);
    var addRadian = toRad(addDegree);
    var rr = r/8;
    ctx.beginPath();
    ctx.fillStyle = color || '#f00';
    var rad = Math.PI*2/vertex*1.5 + addRadian;
    var x = cx + Math.cos(rad)*(r- rr);
    var y = cy + Math.sin(rad)*(r- rr);

    var x1 = x + Math.cos(rad+toRad(45))*rr;
    var y1 = y + Math.sin(rad+toRad(45))*rr;
    var x2 = x + Math.cos(rad+toRad(135))*rr;
    var y2 = y + Math.sin(rad+toRad(135))*rr;
    var x3 = x + Math.cos(rad+toRad(225))*rr;
    var y3 = y + Math.sin(rad+toRad(225))*rr;
    var x4 = x + Math.cos(rad+toRad(315))*rr;
    var y4 = y + Math.sin(rad+toRad(315))*rr;

    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.lineTo(x3,y3);
    ctx.lineTo(x4,y4);
    ctx.fill();
    //ctx.arc(x, y, r/12, 0, Math.PI * 2, true);
    ctx.closePath();
  }
  function createRoundRectPath(x, y, w, h, r) {
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.arc(x + w - r, y + r, r, Math.PI * (3/2), 0, false);
    ctx.lineTo(x + w, y + h - r);
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * (1/2), false);
    ctx.lineTo(x + r, y + h);       
    ctx.arc(x + r, y + h - r, r, Math.PI * (1/2), Math.PI, false);
    ctx.lineTo(x, y + r);
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * (3/2), false);
    ctx.closePath();
  }
  function fillRoundRect(x, y, w, h, r, color) {
    ctx.fillStyle = '#fff';
    createRoundRectPath(x, y, w, h, r);
    ctx.fill();
    ctx.fill();
  }

  function role(){
    $result.text('');
    seRole.currentTime = 0;
    seRole.play();
    timer = setInterval(function(){
      t++;
      var rad = t*13;
      ctx.clearRect(0,0,w,h);
      drawOut(cx,cy,r, 8, 'rgb(120,60,40)', rad);
      drawPolygon(cx,cy,r, 8, 'rgb(200,170,70)', rad);
      drawTri(cx,cy, r,r*16/15,'rgb(120,120,120)');
      drawCircle(cx,cy,r/6, 'rgb(120,120,120)');
    }, 7);
  }

  function stopRole(){
    seRole.pause();
    timer2 = setInterval(function(){
      var rad = t*13;
      var rad2 = rad%360;
      if( rad2 > 60 && rad2 < 80){
        clearInterval(timer);
        clearInterval(timer2);
        $area.removeClass('slow');
        $area.addClass('stop');
        seResult.play();
        setTimeout(function(){
          result()
        },9);
      }
    }, 7);
  }

  function result(){
    fillRoundRect(cx-r*3/4, cy-r/2, r*2*3/4, r, 12);
    var a = ary.pop();
    console.log(ary);
    console.log(a);
    var $i = $('<i>').text('●').css({color:colors[a]});
    if(a===0){
      $result.text('特賞!');
      $result.text('特賞!');
    } else {
      $result.text(a +'等!');
    }
    $result.append($i);
    $inputs = $('form input');
    $inputs.css({color:'#000'});
    
    $input = $inputs.filter('[name="p'+a+'"]');
    $input.css({color:'#f00'});
    var v = $input.val();
    var v = Number(v);
    v--;
    $input.val(v);
  }


  drawPolygon(cx,cy,cx/2, 8, '#000')
  initPrizes();
  role();


});
//https://soundeffect-lab.info/sound/various/various3.html

CSS

#demo{
  text-align:center;
  position:relative;
  left:0;
  top:0;
}
#area{
  position:relative;
  left:0;
  top:0;
  user-select:none;
}

.btn{
  display:inline-block;
  padding:20px;
  margin:8px;
  border:1px solid #333;
  border-radius:12px;
  text-decoration:none;
}
.result{
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  width:320px;
  height:160px;
  margin-top:-100px;
  margin-left:-160px;
  z-index:2;
  font-size:48px;
  font-weight:bold;
}
.result i{
  display:block;
  font-size:120px;
}
input{
  width:32px;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-fukubiki/

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。