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();
  aryOrg.some(function(v, i){
    var r = Math.floor(Math.random() * tableAry.length);
    var n = tableAry.splice(r,1);
    if(i % 5 === 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廃止等で動かないページもあります。ご了承下さい。