Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Tic Tac Toe Coding Sample

    Enviado por

    Niharika Jain
    359 visualizações8 páginas
    This is sample of the code for running tic tac toe game along with the software requirements

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    This is sample of the code for running tic tac toe game along with the software requirements

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    359 visualizações8 páginas

    Tic Tac Toe Coding Sample

    Enviado por

    Niharika Jain
    This is sample of the code for running tic tac toe game along with the software requirements

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 8

    TIC TAC TOE GAME

    SOFTWARE REQUIREMENT SPECIFICATION


    Save the files as .html and .css and use it with Google chrome or Firefox.
    JavaScript should be enabled on your browser.

    SOURCE CODE
    HTML FILE
    Save the file as tic tac toe.html
    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="css3.css"/>
    <script type="text/javascript">

    //Global Variables
    var painted;
    var content;
    var winningCombinations;
    var turn = 0;
    var theCanvas;
    var c;
    var cxt;
    var squaresFilled = 0;
    var w;
    var y;

    //Create Arrays
    window.onload=function(){

    painted = new Array();


    content = new Array();
    winningCombinations =
    [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];

    for(var l = 0; l <= 8; l++){


    painted[l] = false;
    content[l]='';
    }
    }

    //Game methods
    function canvasClicked(canvasNumber){
    theCanvas = "canvas"+canvasNumber;
    c = document.getElementById(theCanvas);
    cxt = c.getContext("2d");

    if(painted[canvasNumber-1] ==false){
    if(turn%2==0){
    cxt.beginPath();
    cxt.moveTo(10,10);
    cxt.lineTo(40,40);
    cxt.moveTo(40,10);
    cxt.lineTo(10,40);
    cxt.stroke();

    cxt.closePath();
    content[canvasNumber-1] = 'X';
    }

    else{
    cxt.beginPath();
    cxt.arc(25,25,20,0,Math.PI*2,true);
    cxt.stroke();
    cxt.closePath();
    content[canvasNumber-1] = 'O';
    }

    turn++;
    painted[canvasNumber-1] = true;
    squaresFilled++;
    checkForWinners(content[canvasNumber-1]);

    if(squaresFilled==9){
    alert("THE GAME IS OVER!");
    location.reload(true);
    }

    }
    else{
    alert("THAT SPACE IS ALREADY USED!");
    }

    function checkForWinners(symbol){

    for(var a = 0; a < winningCombinations.length; a++){


    if(content[winningCombinations[a][0]]==symbol&&content[winningCombinations[a][1]]==
    symbol&&content[winningCombinations[a][2]]==symbol){
    alert(symbol+ " WON!");
    playAgain();
    }
    }

    function playAgain(){
    y=confirm("PLAY AGAIN?");
    if(y==true){
    alert("THE GAME IS RESET NOW");
    location.reload(true);
    }
    else{
    alert("GAME OVER");
    }

    </script>
    </head>
    <body>

    <div id ="box">
    <h1>THE</h1><h2>TIC TAC TOE GAME </h2>
    <canvas id = "canvas1" width="50" height="50" style="border:1px solid black"
    onclick="canvasClicked(1)"></canvas>
    <canvas id = "canvas2" width="50" height="50" style="border:1px solid black"
    onclick="canvasClicked(2)"></canvas>
    <canvas id = "canvas3" width="50" height="50" style="border:1px solid black"
    onclick="canvasClicked(3)"></canvas><br/>
    <canvas id = "canvas4" width="50" height="50" style="border:1px solid black"
    onclick="canvasClicked(4)"></canvas>
    <canvas id = "canvas5" width="50" height="50" style="border:1px solid black"
    onclick="canvasClicked(5)"></canvas>
    <canvas id = "canvas6" width="50" height="50" style="border:1px solid black"
    onclick="canvasClicked(6)"></canvas><br/>
    <canvas id = "canvas7" width="50" height="50" style="border:1px solid black"
    onclick="canvasClicked(7)"></canvas>
    <canvas id = "canvas8" width="50" height="50" style="border:1px solid black"
    onclick="canvasClicked(8)"></canvas>
    <canvas id = "canvas9" width="50" height="50" style="border:1px solid black"
    onclick="canvasClicked(9)"></canvas>
    </div>
    </body>
    </html> // for creating the layout for the game //

    CSS FILE
    Save the file as css3.css:

    body{

    text-align:center;

    .box{

    text-align:left;
    width:auto;
    height:auto;

    h3{

    position:relative;
    -webkit-animation:h3Animation 5s;

    h1{

    position:relative;
    -webkit-animation:h1Animation 5s;

    h2{

    position:relative;
    -webkit-animation:h2Animation 5s;

    canvas{

    position:relative;
    -webkit-animation:canvasAnimation 5s;

    @-webkit-keyframes canvasAnimation {

    0% {-webkit-transform:rotate(90deg);left:0px; top:0px;}

    @-webkit-keyframes h1Animation {

    0% {-webkit-transform:rotate(0deg)}
    25% {-webkit-transform:rotate(90deg)}
    50% {-webkit-transform:rotate(180deg)}
    75% {-webkit-transform:rotate(270deg)}
    100% { -webkit-transform:rotate(360deg)}

    @-webkit-keyframes h2Animation{

    0% {-webkit-transform: scale(1,2);}
    25% {-webkit-transform: scale(2,3);}
    50% {-webkit-transform: scale(3,4);}

    75% {-webkit-transform: scale(4,5);}


    100% { -webkit-transform: scale(0,0);}

    }
    @-webkit-keyframes h3Animation{

    0% {-webkit-transform: scale(0,0);}
    50% {-webkit-transform: scale(0,0);}
    100% {-webkit-transform: scale(100,100);}

    Você também pode gostar