<html>
<head>
<title>
Tic Toe
</title>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"> </script>
<script src="game.js">
</script>
<style type="text/css">
#contanier{ width:100%; height:100%; padding:10px; }
#gametable{ width:
60%; height:300px; border-right: 1px #ccc solid; float: left; }
#controls{
float: left; width: auto; text-align: center;height:300px; }
.table{ } .table tr td{
}
#overview{
clear:both;
}
fieldset{
border: 1px: #ccc solid;
}
legend{
color: #333;
font-weight:bold;
font-size:16px;
}
</style>
</head>
<body>
<p> Just click on start!</p>
<div id="container">
<div id="gametable">
</div>
<div id="controls">
<input type="button" value="Start" id="start" onclick="start();" />
<input type="button" value="Restart" id="restart" onclick="restart();"/>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#restart').hide();
});
function start(){
$('#start').hide();
$('#restart').show();
tt.init({"col":4,
"row":4,"bfn":function(){console.log('before move occurs')},"afn":function(){console.log('after move occurs')}});
}
function restart() {
window.location.reload();
};
</script>
<div id="overview">
<br>
<hr>
<h2>This is a tictoe game library.</h2>
<h3>You can expand it according to your use.</h3>
<p>Fucntion and properties are given below.</p>
<p>Jquery required!.</p>
<ul>
<li><h3>Properties</h3>
<ul>
<li><a href="#col" >col : No. of Column for table(Default:6)</a></li>
<li><a href="#row" >row: No. of Row for Table(Default:7)</a></li>
<li><a href="matchCount" >matchCount: on which user said to winner: (Default:4)</a></li>
<li><a href="#id" >id: id of div where you want to show your table.(Default:gametable)</a></li>
<li><a href="bfn" >bfn: You can pass a function that will execute before every move</a></li>
<li><a href="afn" >afn: You can pass a function that will execute after every move</a></li>
</ul>
</li>
<li><h3>Functions</h3>
<ul>
<li><a href="#init">init(): initialize tictoe</a></li>
<li><a href="#move">move(): when move happen </a></li>
</ul>
</li>
</ul>
<fieldset id="init">
<legend>init()</legend>
<pre>
tt.init(
{
"col":5,
"row":6,
'id':'gametable',
"matchCount":3,
"bfn":function(){alert('before move occurs')},
"afn":function(){alert('after move occurs')}
}
);
or
tt.init() for default;
</pre>
</fieldset>
<fieldset id="move">
<legend>move()</legend>
<pre>
tt.move(obj);
it takes current cell input element as an object
</pre>
</fieldset>
</div>
</body>
</html>
|
Download
