File: game.html

Recommend this page to a friend!
  Classes of Developer CK  >  JavaScript Tic Tac Toe  >  game.html  >  Download  
File: game.html
Role: Documentation
Content type: text/plain
Description: Documentation
Class: JavaScript Tic Tac Toe
Show a Tic Tac Toe board and process player moves
Author: By
Last change: Update game.html
Update game.html
Date: 6 months ago
Size: 3,298 bytes
 

Contents

Class file image Download
<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>