ビンゴゲームで遊ぶビンゴカード | ひまあそび-ミニゲーム


  view source
  JavaScript
  document.title = 'ビンゴゲームで遊ぶ ビンゴカード';
//https://ja.wikipedia.org/wiki/%E3%83%93%E3%83%B3%E3%82%B4
//ビンゴとは ルール

var getYYYYMMDD_HHNNSS = function(){
  var date = new Date();
  var yyyy = date.getFullYear();
  var mm = ('00' + (date.getMonth()+1)).slice(-2);
  var dd = ('00' + date.getDate()).slice(-2);
  var hh = ('00' + date.getHours()).slice(-2);
  var nn = ('00' + date.getMinutes()).slice(-2);
  var ss = ('00' + date.getSeconds()).slice(-2);
  var yyyymmdd = yyyy + '' + mm + '' + dd;
  var hhnnss = hh + '' + nn + '' + ss;
  var result = yyyymmdd +'-'+ hhnnss;
  return result;
}
 

var max = 75;
var match = location.search.match(/[\d\.]+/);
if(match){
  max = parseInt(match[0]);
  console.log(max);
}

var aryOrg = [...Array(max)].map((_, i) => i+1);
var ary = aryOrg.concat();
$(function(){
  var $demo = $('#demo');
  var $mode1 = $('<a>',{href:'?card'}).addClass('mode').text('参加者');
  var $mode2 = $('<a>',{href:'#'}).addClass('mode').text('企画者');
  var $h1 = $('<h1>').text(document.title);
  var $h2 = $('<h2>').text(' くじびき抽選　配列から重複しないランダム数値を取得する');
  var $p1 = $('<p>').text('参加者無制限 QRコードかURLでビンゴカードを配布してね');
  var $p2 = $('<p>').text(location.href + '?card');
  var $b = $('<b>').text(0);
  var $btn = $('<a>').addClass('btn').text('SPIN');
  var $hhnn = $('<p>').addClass('timestamp').text('----');
  var $textarea = $('<textarea>');
  var $img = $('<img>',{src:'qr-bingo.png'});
  var bingoCountBefore = 0;

  var hhnn = getYYYYMMDD_HHNNSS();
  $hhnn.text(hhnn).attr({title:'◆ビンゴカード取得時刻::'});

  var pi = new Audio('/mp3/pi.mp3');
  var correct1 = new Audio('/mp3/correct1.mp3');

  $mode1.on('click', function(){
    $mode1.remove();
    $mode2.remove();
    $('html,body').css({overflow:'hidden'});
    $demo.addClass('mode1');
    document.title = hhnn;
    document.body.requestFullscreen();
    return false;
  });
  $mode2.on('click', function(){
    $mode1.remove();
    $mode2.remove();
    $table.remove();
    $demo.addClass('mode2');
    return false;
  });

  $ul = $('<ul>');
  aryOrg.forEach(function(v){
    $li = $('<li>').text(v).addClass('n'+v);
    $ul.append($li);
  });

  //ビンゴカード
  $table = $('<table>');
  $tr = $('<tr>');
  var x = 0;
  var y = 0;
  var tableAry = aryOrg.concat();
  var rowTables = [
[...Array(15)].map((_, i) => i+1),
[...Array(15)].map((_, i) => i+16),
[...Array(15)].map((_, i) => i+31),
[...Array(15)].map((_, i) => i+46),
[...Array(15)].map((_, i) => i+61),
  ];
/*
ビンゴカードの数字の法則：
1列目 1～15
2列目 16～30
3列目 31～45
4列目 46～60
5列目 61～75
*/
  aryOrg.some(function(v, i){
    //var r = Math.floor(Math.random() * tableAry.length);
    //var n = tableAry.splice(r,1);
    var row = i % 5;
    var r = Math.floor(Math.random() * rowTables[row].length);
    var n = rowTables[row].splice(r,1);
    if(row === 0){
      $tr = $('<tr>');
      $table.append($tr);
      y++;
      x=0;
    }
    if(i === 12){
      n = 0;
    }
    if(i > 24){
      return true;
    }
    x++;
    $td = $('<td>')
      .text(n)
      .addClass('n'+n)
      .addClass('x'+x)
      .addClass('y'+y);
    if(n===0){
      $td.addClass('checked');
      $td.append($hhnn);
      
    }
    if(x===y){
      $td.addClass('cross1');
    }
    if(x===(6-y)){
      $td.addClass('cross2');
    }
    $tr.append($td);
    $td.on('click', function(){
      $(this).toggleClass('checked');
      $(this).removeClass('bingo');
      pi.play();
      checkLine();
    });
  });


  $btn.on('click', function(){
    var r = Math.floor(Math.random() * ary.length);
    var n = ary.splice(r,1);
    $b.text(n);
    $textarea.val( $textarea.val() + ',' + n);
    $('.n'+n).addClass('checked');
    checkLine();
    pi.play();
  });

  $demo
    .append($mode1)
    .append($mode2)
    .append($table)
    .append($btn)
    .append($b)
    .append($ul)
    .append($textarea)
    .append($h1)
    .append($h2)
    .append($p1)
    .append($p2)
    .append($img);

  if(location.search.match(/card/)){
    $mode1.trigger('click');
  }

  //列を確認
  var checkLine = function(){
    var bingoCount = 0;
    [1,2,3,4,5].forEach(function(v){
      var l = $('.x'+v).filter('.checked').length;
      if(l === 5){
        bingoCount++;
        console.log("lineX:"+v);
        $('.x'+v).addClass('bingo');
      }
    });
    [1,2,3,4,5].forEach(function(v){
      var l = $('.y'+v).filter('.checked').length;
      if(l === 5){
        bingoCount++;
        console.log("lineY:"+v);
        $('.y'+v).addClass('bingo');
      }
    });

    var checkCount = 0;
    [1,2].forEach(function(v){
      var l = $('.cross'+v).filter('.checked').length;
      if(l === 5){
        bingoCount++;
        console.log("cross:"+v);
        $('.cross'+v).addClass('bingo');
      }
    });

    if(bingoCount > bingoCountBefore){
      bingoCountBefore = bingoCount;
      $btn.text('BINGO!!');
      correct1.play();
    }
  }
});

  CSS
  #demo{
}

.mode{
  display:inline-block;
  border:1px solid #aaa;
  width:50%;
  text-align:center;
  font-size:12vmin;
  color:#000;
  text-decoration:none;
}
a,b,textare,table,h1,h2{
  box-sizing:border-box;
  overflow:hidden;
}

#demo a.btn{
  display:block;
  text-align:center;
  font-size:12vh;
  font-weight:bold;
  cursor:pointer;
  user-select:none;
  border:1px solid #aaa;
  background-color:#fefefe;
  border-radius:8px;
  margin:2px;
  line-height:1.1em;
  height:12vh;
}
b{
  display:block;
  text-align:center;
  height:20vh;
  font-size:18vh;
  font-weight:bold;
  line-height:1em;
}
textarea{
  width:99%;
}

ul{
  display:flex;
  margin:0 auto;
	flex-wrap: wrap;
  font-size:18px;
}

ul li{
  width:9%;
  margin:2px;
  padding:2px;
  font-size:2vw;
  text-align:center;
  border:1px solid #eee;
}


table{
  margin:0 auto;
  width:100%;
  border:8px solid #000;
}
td{
  height:20%;
  width:19%;
  font-size:6vw;
  font-weight:bold;
  border:4px solid #333;
  text-align:center;
  vertical-align: middle;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  left:0;
  bottom:0;
}

td:hover{
  background-color:#eee;
}

td .timestamp{
  position:absolute;
  right:0;
  bottom:0;
  font-size:9px;
  opacity:0.2;
}

.checked{
  background-color:#faa;
}
.checked:hover{
  background-color:#a00;
}
.bingo{
  background-color:#ffa;
}
#demo img{
  display:block;
  width:50vmin;
  margin:4vmin auto;
}

.mode1 table{
  height:100vh;
}
.mode2 b{
  height:50vh;
  font-size:48vh;
}
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-number-bingo/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。