bingo js

bingo 그리기 체크 기본 javascript (jquery)

by chodaeyun

HTML

빙고판 줄수 : <input type="text" id="num" value="5"><br>
<div >현재 빙고 수 :  <span class="cnt"></span></div>
<a href="javascript:void(0)" onclick="$.bingoJs.ready($('#num').val());return false;">빙고시작</a>

<div id="bingo"></div>

CSS

.b_table {
  display: table;
}

.b_table_row {
  display: table-row;
}

.b_table_cell {
  width:30px;
  height:30px;
  display: table-cell;
  border: 1px solid gray;
  cursor: pointer;
  vertical-align: middle;
  text-align:center;
}

JavaScript

;(function($) {
    var option = {
        size: 3,
        list: [],
        id: 'bingo'
    }
    var bingox = {}
    var bingoy = {}
    var bingoz = [0,0]
    var bingcnt = 0
    $.bingoJs = {
        reset:function(){
            bingox = {}
            bingoy = {}
            bingoz = [0,0]
            bingcnt = 0
            option = {
                size: 3,
                list: [],
                id: 'bingo'
            }
        },
        ready: function(s, id) {
            this.reset()
            if (s) option.size = parseInt(s)
            if (id) option.id = id
            for (var i = 1; i <= (option.size * option.size); i++) option.list.push(i)
            this.shuffle()
            //초기화
            $("#" + option.id).html("")
            //틀추가
            $("#" + option.id).append("<div class='b_table'></div>")
            var _row = ""
            for (var i = 0; i < (option.size * option.size); i++) {
                if (i % option.size === 0) {
                    _row += "<div class='b_table_row'>"
                }
                _row += "<div class='b_table_cell cell_" + i + "' onclick='$.bingoJs.clickcell(" + i + ")'  data-selected=false >" + option.list[i] + "</div>";
                if (i % option.size === (option.size - 1)) {
                    _row += "</div>"
                    $(".b_table").append(_row)
                    _row = ""
                }
            }
            this.chkbingocnt()
        },
        shuffle: function() {
            for (var j, x, i = option.list.length; i; j = parseInt(Math.random() * i), x = option.list[--i], option.list[i] = option.list[j], option.list[j] = x);
        },
        clickcell: function(s) {
            if($(".cell_"+s).get(0) && $(".cell_"+s).data("selected") === false ){
              var c = s + 1
              var x = (c % option.size === 0) ? option.size : c % option.size
              var y = Math.floor(((c + option.size) - 1) / option.size)

              if (!bingox[x])...