tic tac toe

dabblet.css

/**
 * tic tac toe
 */
 
 .new {
 	font:30px helvetica,sans-serif;
 	color: white;
	width: 308px;
	height: 100px;
	border-width: 1px;
	border-style: solid;
	border-color: #444;
	display: block;
	margin: 120px auto 0;
	padding: 0;
	background: #888; 
 }
 
 #grid {
	margin: 0 auto;
 }
 
 .new:hover {
	border-width: 5px;
	border-style: solid;
	border-color: #444;
	text-shadow: 0 0 0.2em #444;
}

.tile {
	font:30px helvetica,sans-serif;
	color: white;
	width: 100px;
	height: 100px;
	border-width: 1px;
	border-style: solid;
	border-color: #777;
	margin: 0;
	padding: 0;
	background: f00; 
}

.tile:hover {
	border-width: 5px;
	border-style: solid;
	border-color: #555;
}

dabblet.html

<div id="tic">
<input type="button" class="new" value="new game" onclick="restart()" />
<table name="f1" id="grid"> 
 <tr>  
  <td><input type="button" class="tile" id="b00" value=" " onclick="tileClicked(this);" /></td>  
  <td><input type="button" class="tile" id="b01" value=" " onclick="tileClicked(this);" /></td>  
  <td><input type="button" class="tile" id="b02" value=" " onclick="tileClicked(this);" /></td>  
 </tr>  
 <tr>  
  <td><input type="button" class="tile" id="b10" value=" " onclick="tileClicked(this);" /></td>  
  <td><input type="button" class="tile" id="b11" value=" " onclick="tileClicked(this);" /></td>  
  <td><input type="button" class="tile" id="b12" value=" " onclick="tileClicked(this);" /></td>
 </tr>
 <tr>
  <td><input type="button" class="tile" id="b20" value=" " onclick="tileClicked(this);" /></td>  
  <td><input type="button" class="tile" id="b21" value=" " onclick="tileClicked(this);" /></td>  
  <td><input type="button" class="tile" id="b22" value=" " onclick="tileClicked(this);" /></td>  
 </tr>
</table>
</div>

dabblet.js

window.symbol = "X";
window.count = 0;

window.tileClicked = function(tile) {
    if (tile.value == " ") {
        window.count++;
        tile.value = symbol;
        
        if (symbol == "X") {
            symbol = "O";
        } else {
            symbol = "X";
        }
    }
    
    if (isWinning("X")) {
        alert ("X wins!");
        return;
    } else if (isWinning("O")) {
        alert ("O wins!");
        return;
    } else if (count == 9) {
        alert("Draw!")
    }
}
window.isWinning = function(symbol) {
    if(document.getElementById('b00').value==symbol && document.getElementById('b01').value==symbol && document.getElementById('b02').value==symbol)
        return true;
    else if(document.getElementById('b10').value==symbol && document.getElementById('b11').value==symbol && document.getElementById('b12').value==symbol)
        return true;
    else if(document.getElementById('b20').value==symbol && document.getElementById('b21').value==symbol && document.getElementById('b22').value==symbol)
        return true;
    else if(document.getElementById('b00').value==symbol && document.getElementById('b10').value==symbol && document.getElementById('b20').value==symbol)
        return true;
    else if(document.getElementById('b01').value==symbol && document.getElementById('b11').value==symbol && document.getElementById('b21').value==symbol)
        return true;
    else if(document.getElementById('b02').value==symbol && document.getElementById('b12').value==symbol && document.getElementById('b22').value==symbol)
        return true;
    else if(document.getElementById('b00').value==symbol && document.getElementById('b11').value==symbol && document.getElementById('b22').value==symbol)
        return true;
    else if(document.getElementById('b02').value==symbol && document.getElementById('b11').value==symbol && document.getElementById('b20').value==symbol)
        return true;
}

window.restart = function() {
    window.symbol = "X";
    document.getElementById('b00').value=" ";
    document.getElementById('b01').value=" ";
    document.getElementById('b02').value=" ";
    document.getElementById('b10').value=" ";
    document.getElementById('b11').value=" ";
    document.getElementById('b12').value=" ";
    document.getElementById('b20').value=" ";
    document.getElementById('b21').value=" ";
    document.getElementById('b22').value=" ";
    count = 0;
}

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}