Крестики - нолики

by Qwerty_Wasd

HTML

<a href="\">На главную</a> | <a href="#" onclick="rulesShow()">Правила</a> | <a href="#" onclick="return start()">Начать сначала</a>
<div id="menu">
    <div id="xoPan">
        <label for="x">Играем крестиками: </label><input id="x" name="xo" type="radio" checked="checked" onclick="start()"/> |
        <label for="o">Играем ноликами: </label><input id="o" name="xo" type="radio" onclick="start()"/></div>

    <div id="fhod">
        <label for="first">Первый ход: </label><input id="first" name="first" type="checkbox" checked="checked" onclick="start()"/>
    </div>
</div>
<div id="area"></div>
<div id="blocking"></div>

CSS

html, body{
height:100%;
}
body{
overflow:auto;
}
.center{
text-align:center;
}
#area{
position:relative;
border:1px solid black;
}
.cell{
border: 1px solid #555;
position:absolute;
background-size: contain;
box-shadow: inset -2px -1px 1px #CCC;
font-size: 14pt;
font-family:Arial;
text-align:center;
cursor: pointer;
}
#score{
position:fixed;
max-width: 200px;
white-space:nowrap;
padding:10px;
top:0;
width:200px;
height:30px;
right:0;
text-align:center;
}
.x{
color: #FF0000;
}
.o{
color: #0000FF;
}
#text{
size: 20pt;
font-family:Arial;
}
#blocking{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:5;
display:none;
}
.disabled{
background:rgba(205,205,205,1)  !important;
}
.lineH{
background: linear-gradient(to bottom, rgba(205,205,205,1) 40%, rgba(0,0,0,1) 49%, rgba(205,205,205,1) 59%) !important;
}
.lineV{
background: linear-gradient(to right, rgba(205,205,205,1) 40%, rgba(0,0,0,1) 49%, rgba(205,205,205,1) 59%) !important;
}
.lineDL{
background-image: linear-gradient(-45deg, rgba(205,205,205,1) 40%, rgba(0,0,0,1) 49%, rgba(205,205,205,1) 59%) !important;
}
.lineDR{
background-image: linear-gradient(45deg, rgba(205,205,205,1) 40%, rgba(0,0,0,1) 49%, rgba(205,205,205,1) 59%) !important;
}

JavaScript

var matrix = [],
        wd = 20, //ширина доски
        hd = 20, //высота доски
        btwn = 0, //расстояние между клетками
        count = 5; //убираем по 5 элементов
        cw = 20, ch = 20, //размеры квадратов
        me =  true,
        hod = true;
 
    function blocking(b)
    {
        document.getElementById('blocking').display = b ? '' : 'block';
    }
 
    function add(target, dom)
    {
        if (!dom)
            target = document.getElementById('cell' + target);
 
        if (!target)
            return false;
 
        if (target.innerHTML !== '') return;
 
        var cn = target.className.replace(' x', '').replace(' o', '');
 
        if(hod)
        {
            target.innerHTML = 'X';
            cn = cn + ' x';
        }
        else
        {
            target.innerHTML = 'O';
            cn = cn + ' o';
        }
 
        target.className = cn;
 
        if (target.who>=0)
        {
            matrix[target.who]=hod;
        }
 
        var wins = checkWins();
        if (wins !== null)
            return gameOver(wins);
        else
            hod = !hod;
 
        return true;
    }
 
    function check(e)
    {
        if ((' ' + e.target.className + ' ').indexOf(' cell ') === -1)
            return;
        document.getElementById('menu').style.visibility = 'hidden';
        add(e.target, true);

    }
 
    function start()
    {
        matrix = [];
 
        document.getElementById('menu').style.visibility = 'visible';
        var x = document.getElementById("x"),
            first = document.getElementById('first'),
 
            area = document.getElementById("area"),
            w = document.body.offsetWidth,
            h = document.body.offsetHeight;
 
        removeEvent(area, check);
        removeChildNodes(area);
 
        var c = 0,
            left = Math.round(w/2-(cw*wd/2) - (btwn*wd/2)),
            top = Math.round(h/2-(ch*hd/2) - (btwn*hd/2)),
            fr = document.createDocumentFragment(),
           ...