Untitled

<html>
<head>
    <title>xio</title>
    <meta charset="utf8" />
    <script type="text/javascript">

        var xio = xio || {}

        ;(function(ns){

            // private data and functions

            var table = null,
                currentElem= null,
                current = Math.random() > 0.5 ? 'x' : 'o',
                fields = null,
                winlen = null;

            function strcp(n) { var i, r = ''; for(i=0;i<n; ++i) { r+=this; } return r;  }

            function frame() {
                if (this.innerHTML !== '')
                    return false;
                this.innerHTML = current;

                var w = iswin(this);
                if (w) {
                    var i; for (i=0;i<w.length; ++i) {
                        w[i].setAttribute("class", "redCell");
                        w[i].setAttribute("className", "redCell");
                    }
                    return undefined;
                }

                current = current === 'x' ? 'o' : 'x';
                printCurrent();
            }

            function indOf(child) {
                var i = 0;
                while( (child = child.previousSibling) != null ) i++;
                return i;
            }

            function celsByCoords(a) {
                var i, row, cell, r = [],
                    t = table.getElementsByTagName('tbody')[0];
                for (i=0; i<a.length; ++i) {
                    row = t.childNodes[a[i].y];
                    r.push(row.childNodes[a[i].x]);
                }

                return r;
            }

            function iswin(cell) {
                var lx = indOf(cell), ly = indOf(cell.parentNode);

                var verLen = fields[0].length;

                var i, j, winrow = [{x:lx, y:ly}];
                // horizontal left
                for (i=lx-1; i>0; --i) {
                    if (fields[i][ly] !== current) {
                        break;
                    }
                    winrow.push({ x:i, y:ly });
                    if (winrow.length >= winlen) { return celsByCoords(winrow); }
                }

                // horizontal right
                winrow = [{x:lx, y:ly}];
                for (i=lx+1; i<fields.length; ++i) {
                    if (fields[i][ly] !== current) {
                        break;
                    }
                    winrow.push({ x:i, y:ly });
                    if (winrow.length >= winlen) { return celsByCoords(winrow); }
                }

                // vertical top
                winrow = [{x:lx, y:ly}];
                for (i=ly-1; i>0; --i) {
                    if (fields[lx][i] !== current) {
                        break;
                    }
                    winrow.push({x:lx, y:i});
                    if (winrow.length >= winlen) { return celsByCoords(winrow); }
                }

                // vertical down
                winrow = [{x:lx, y:ly}];
                for (i=ly+1; i<verLen; ++i) {
                    if (fields[lx][i] !== current) {
                        break;
                    }
                    winrow.push({x:lx, y:i});
                    if (winrow.length >= winlen) { return celsByCoords(winrow); }
                }

                // left top
                winrow = [{x:lx, y:ly}];
                for (i=lx-1, j=ly-1; i>0 && j>0; --i, --j) {
                    if (fields[i][j] !== current) {
                        break;
                    }
                    winrow.push({x:i, y:j});
                    if (winrow.length >= winlen) { return celsByCoords(winrow); }
                }

                // left down
                winrow = [{x:lx, y:ly}];
                for (i=lx-1, j=ly+1; i>0 && j<verLen; --i, ++j) {
                    if (fields[i][j] !== current) {
                        break;
                    }
                    winrow.push({x:i, y:j});
                    if (winrow.length >= winlen) { return celsByCoords(winrow); }
                }

                // right top
                winrow = [{x:lx, y:ly}];
                for (i=lx+1, j=ly-1; i<fields.length && j>0; ++i, --j) {

                    if (fields[i][j] !== current) {
                        break;
                    }
                    winrow.push({x:i, y:j});
                    if (winrow.length >= winlen) { return celsByCoords(winrow); }
                }

                // right down
                winrow = [{x:lx, y:ly}];
                for (i=lx+1, j=ly+1; i<fields.length && j<verLen; ++i, ++j) {
                    if (fields[i][j] !== current) {
                        break;
                    }
                    winrow.push({x:i, y:j});
                    if (winrow.length >= winlen) { return celsByCoords(winrow); }

                }

                fields[lx][ly] = current;
                return false;
            };

            function printCurrent() {
                currentElem.innerHTML = "Сейчас ход: " + current.toUpperCase();
            }

            // api functions

            ns.setWinLen = function(t) { winlen = t; return this; }

            ns.setTable = function(t) { table = t; return this; }

            ns.setCurrent = function(t) {
                currentElem = t;
                printCurrent();
                return this;
            };

            ns.fillTable = function(w,h) {
                var row = strcp.apply("<td></td>", [w]);
                table.innerHTML = "<tbody>" + strcp.apply("<tr>" + row + "</tr>", [h]) + "</tbody>";
                fields = new Array(w);
                var i; for(i=0; i<h; ++i) { fields[i] = new Array(h); }
                return this;
            };

            ns.bindEvents = function() {
                var tbody = table.getElementsByTagName('tbody')[0],
                    rows = tbody.getElementsByTagName('tr'),
                    i, j, cols;

                for (i=0; i<rows.length; ++i) {
                    cols = rows[i].getElementsByTagName('td');
                    for (j=0; j<cols.length; ++j) {
                        cols[j].addEventListener('click', frame);
                    }
                }

            };

        })(xio)

        function load() {
            var d = document.getElementById('gameFields');
            var s = document.getElementById('current');
            xio.setWinLen(5).setTable(d).setCurrent(s).fillTable(10,10).bindEvents();
        }
    </script>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
        font-family: "MS Trebuchet", Arial, sans-serif;
    }
    #gameFields tr { height:30px; }
    #gameFields td { width:30px; border:1px gray solid; text-align: center; }
    #gameFields { border:1px red solid; margin: 20px 0px 0px 20px; }
    #current { margin: 20px 0px 20px 20px; }
    .redCell { background-color: #DD0000; color:white; }
    </style>
</head>
<body onload="load()">

    <div id="current"></div>

    <table id="gameFields"><thead></thead><tbody></tbody></table>

</body>
</html>