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 of game.html
Date: 2 years 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>