Code for designing and developing a very famous game- Tic Tac Toe or say Simply Cross- zero game with the help of JavaScript

In this blog i am going to share a very interesting thing. Yes, you are right i am going to show you how we could make a game very easily with the help of JavaScript.

                               All of us have heard about this game and in our childhood days almost almost all of us had played Tic-Tac-Toe game or in simple words Cross-zero game. But now we'll play it on our PC and that too developed by ourselves. So you seems excited to develop it. You don't require to take any stress just copy and paste the whole code and start playing... :)

  • First of all copy paste the whole JavaScript code inside the <head> tag given below ::

<script type="text/javascript">
    //Simple Tic Tac Toe Game:
    //board is a 3 by 3, two dimensional array of numbers.
board = new Array(new Array(0, 0, 0), new Array(0, 0, 0), new Array(0, 0, 0))

//integer points/values in board for user
var userSingle = 16         //each user's position is worth 16
var userDouble = 32         //two user positions in a run are 32
var usertriple = 48         //three user positions in a run is 48

//integer points/values in board for game
var gameSingle = 1         //each game's position is worth 1
var gameDouble = 2         //two game positions in a run is worth 2
var gametriple = 3         //three game positions in a run is worth 3
var lastMove = 0           //want to check last move user made on third move
var keepPlaying = false    //flag to stop user from adding to board when game is over

//points to rate and compare possible game moves                           
var toWin   = 9
var block   = 8
var twoWay  = 7
var run4   = 5
var run3   = 3
var run2   = 2                           

//assign an initial image to each marker - not really necessary here, see newGame()
var userMarker = "x.gif"
var gameMarker = "o.gif"

//clearBoard places a blank image in each square and sets each array value to 0
function clearBoard(){
   for (var row=0; row < board.length; row++){
      for (var col=0; col < board.length; col++){
        board[row][col] = 0
        document.images["i" + row + col].src = "blank.gif"
      }
   }
}

//starts a new game if userX, means the user gets X and goes first.
function newGame(userX){
   clearBoard()
   turn = 0
   keepPlaying = true
   if (userX){
      userMarker = "x.gif"
      gameMarker = "o.gif"
   }
   else{
      userMarker = "o.gif"
      gameMarker = "x.gif"
      gameMove(1, 1)
   }
}

//announce the end and set the keepPlaying flag to false
function gameOver(msg){
   keepPlaying = false
   alert(msg)
}

//return an array with all the runs that go through the row, col position
//each slot in the array holds the sum of points in that run ie in the three squares in that run.
function getruns(row, col){
   var runs = new Array()
   var slot = 0
   runs[slot++] = board[row][0] + board[row][1] + board[row][2]
   runs[slot++] = board[0][col] + board[1][col] + board[2][col]
   if (row == col){
      runs[slot++] = board[0][0] + board[1][1] + board[2][2]
   }
   if ((Math.abs(col - row) == 2) || (row == 1 && col == 1)){
      runs[slot++] = board[0][2] + board[1][1] + board[2][0]   
   }
   return runs
}

//See if the user has won the game. If not return the highest run value.
//This is needed for responding to the third move.
function evaluateUserMove(row, col){
   var maxValue = 0
   var runs = getruns(row, col)
   for (var i=0; i<runs.length; i++){
      if (runs[i] == usertriple) return usertriple
      if (runs[i] > maxValue) maxValue = runs[i]
   }
   return maxValue
}

//Look at all runs for a given open square. 
//Return a rating for this square.
//Note that on the third move a special rating is required.
function evaluateMove(row, col){
   var maxValue = 0
   var nSingles = 0
   var nUsers   = 0
   var runs = getruns(row,col)
   for (var i = 0; i < runs.length; i++){
      if (runs[i] == gameDouble) return toWin
      if (runs[i] == userDouble) maxValue = block
      if (runs[i] == gameSingle) nSingles++            
      if (runs[i] == userSingle) nUsers++
   }
   if (maxValue < block){
      if (nSingles > 1){
         maxValue = twoWay
      }
      else{
         maxValue = runs.length
         if ((turn == 3) && (runs.length == 2) && (lastMove == 33) && (board[1][1] == gameSingle)) maxValue = 4
         if ((turn == 3) && (nUsers == 2)) maxValue = 4
      }
   }
   return maxValue
}

function makeBestMove(){
   var value
   var maxValue = 0
   var maxRow
   var maxCol
   for (var row = 0; row < board.length; row++){
      for (var col = 0; col < board.length; col++){
         if (board[row][col] == 0){
            value = evaluateMove(row,col)
            if (value > maxValue){
               maxValue = value
               maxRow   = row
               maxCol   = col
            }
         }
      }
   }
   gameMove(maxRow, maxCol)
   if (maxValue == toWin){
      gameOver("You Lose!")
   }
   else{
      if (turn == 9){
         gameOver("Draw Game!")
      }
   }
}


function gameMove(row, col){
   board[row][col] = gameSingle
   document.images["i" + row + col].src = gameMarker
   turn++
}

function userMove(row, col){
   if (!keepPlaying){
      if (userMarker == "x.gif"){
         newGame(false)
         return
      }
      else{
         newGame(true)
         return
      }
   }
   if (board[row][col] != 0){
      alert("That square is already occupied.\nPlease choose another square.")
      return
   }
   board[row][col] = userSingle
   document.images["i" + row + col].src = userMarker 
   turn++
   lastMove = evaluateUserMove(row, col)
   if (usertriple == lastMove){
      gameOver("You Win!")
   }
   else{
      if (turn == 9){
         gameOver("Draw Game!")
      }
      else{
         makeBestMove()
      }
   }
}

</script>


  • Now paste the whole code inside the <body> tag given below ::
<table border="2" cellpadding="0" cellspacing="0" >
<tr>
  <td><a href="javascript:userMove(0,0)">
      <img src="blank.gif" name="i00" border="0" width="50" height="50"></a>
  </td>
  <td><a href="javascript:userMove(0,1)">
      <img src="blank.gif" name="i01" border="0" width="50" height="50"></a>
  </td>
  <td><a href="javascript:userMove(0,2)">
      <img src="blank.gif" name="i02" border="0" width="50" height="50"></a>
  </td>  
</tr>
<tr>
  <td><a href="javascript:userMove(1,0)">
      <img src="blank.gif" name="i10" border="0" width="50" height="50"></a>
  </td>
  <td><a href="javascript:userMove(1,1)">
      <img src="blank.gif" name="i11" border="0" width="50" height="50"></a>
  </td>
  <td><a href="javascript:userMove(1,2)">
      <img src="blank.gif" name="i12" border="0" width="50" height="50"></a>
  </td>  
</tr>
<tr>
  <td><a href="javascript:userMove(2,0)">
      <img src="blank.gif" name="i20" border="0" width="50" height="50"></a>
  </td>
  <td><a href="javascript:userMove(2,1)">
      <img src="blank.gif" name="i21" border="0" width="50" height="50"></a>
  </td>
  <td><a href="javascript:userMove(2,2)">
      <img src="blank.gif" name="i22" border="0" width="50" height="50"></a>
  </td>  
</tr>
<tr>
  <td colspan="3" align="center"><input type="button" value="Play O" onClick="newGame(false)"> <input type="button" value="Play X" onClick="newGame(true)" ></td>
</tr>
</table>



Comments

Post a Comment

Popular posts from this blog

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

Image
First of all add the following .js file, Link and the JavaScript to your <Head> tag :: <head runat="server">     <title></title>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/quicksearch.js"></script> <script type="text/javascript">     $(function () {         $('.search_textbox').each(function (i) {             $(this).quicksearch("[id*=gvDetails] tr:not(:has(th))", {                 'testQuery': function (query, txt, row) {                     return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;                 }             });         });     }); </script> </head> // This Script dynamically searches the GridView cells and filters out the unw
Read more

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

In this blog I have given a list of all StateCode and StatusCode of useful entities. Please refer MSDN for more details for any doubt if you have regarding any thing. I also have collected this through MSDN The following table shows default Microsoft CRM values for StateCode and StatusCode. Each StateCode has its own default StatusCode value. For example, if a Product StateCode is 0 (Active), the default StatusCode is 1 (Active(default)). If the Product StateCode is 1 (InActive), the default StatusCode is 2 (Inactive(default)). Microsoft CRM only accepts StatusCodes that are valid for a particular StateCode. Entity Status (statecode) Status Reason (statuscode) Account (account) 0 Active 1 Active 1 Inactive 2 Inactive Activity (activitypointer) 0 Open 1 Open 1 Completed 2 Completed 2 Canceled 3 Canceled 3 Scheduled
Read more

Dumps for Microsoft Dynamics CRM MB2-703 Practice Exam Questions Free

Dumps for Microsoft Dynamics CRM MB2-703 Practice Exam Questions Free...!!! After a lot of net surfing i got few questions for passing out the exam for certification in Microsoft Dynamics CRM MB2-703 Practice Exam Questions. I think you will find it helpful and please comment if it helped you. Although this is just a shortcut for passing exam but it really helps a lot to clear exam in short duration of time. Note:: Don't blame if question doesn't matches as i have only collected questions and provided all at a single place and there is no guaranty that this will definitely come in exam. Apart from this you should go through CRM 2011 MB2- 866 dumps also. Topics and their percentage share in MB2-703 Exam: Create and Customize Solutions (10-15 percent) Customize Entities and Entity Relationships (10-15 percent) Customize Fields (10-15 percent) Manage Forms (10-15 percent) Manage Views (10-15 percent) Create and Customize Charts and Dashboards (10-15 pe
Read more

How to import CSV files into DataTable in C#

Below is code the which you can use for converting a csv file into Data Table in C#. This method also handles comma values inside a double quoted value. 1. Provide the file path of your csv file: string sCsvFilePath = @"C:\Downloads\Sample.csv"; 2. Call Custom Method: DataTable  dtTable = ConvertCSVtoDataTable(sFilePath); 3. Copy and Paste below: public   static   DataTable  ConvertCSVtoDataTable( string  sCsvFilePath) {      DataTable  dtTable =  new   DataTable ();      Regex  CSVParser =  new   Regex ( ",(?=(?:[^\"]*\"[^\"]*\")*(?![^\"]*\"))" );      using  ( StreamReader  sr =  new   StreamReader (sCsvFilePath))     {          string [] headers = sr.ReadLine().Split( ',' );          foreach  ( string  header  in  headers)         {             dtTable.Columns.Add(header);         }          while  (!sr.EndOfStream)         {              string [] rows = CSVParser.Split(sr.ReadLine());              DataRow  
Read more

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

Image
In this blog i am going to show we could show enlarded image when hover on Link or an image like we see on any e-commerce website. First of all right click on your application >> Select Add New Folder and Give name as images >> Once folder created place some images in folder to show preview of images when hover on link using JQuery in asp.net. After completion of folder creation and insertion of images in folder write the following code in your aspx page :: Put the below code inside the <heaD> tag::  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <script type="text/javascript" language="javascript">     $(document).ready(function () {         ShowPreview();     });     // Configuration of the x and y offsets     function ShowPreview() {         xOffset = -20;         yOffset = 0;         $("a.preview").hover(funct
Read more
go to top image