Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container" id="hauptcontainer">
       
    <div class="row text-center">
    
    <h1> T-700 TIC TAC TOE</h1>
        
        
    
    </div>
    
    <div class="row text-center">
    
        <div class="col-xs-4" id="hi_container">
        
        </div>
        
        <div class="col-xs-4">
           
            <div id="reset_container">
            
               <button class ="reset" id="reset_button">Reset</button>
                
            </div>
            
        </div>
        
        <div class="col-xs-4" id="ai_container">
        
        </div> 
    
    </div>
    
    <div id="dialog_1"></div>
    
    
    
    <div class="row text-center">
    
        <div class="col-xs-4 cell kasten_oben" data-pos="0">
        
        </div>
        
        <div class="col-xs-4 cell kasten_oben" data-pos="1">
        
        </div>
        
        <div class="col-xs-4 cell kasten_oben" data-pos="2">
        
        </div>
    
    
    
    
   </div>
    
    
    
        <div class="row text-center">
    
        <div class="col-xs-4 cell kasten_mitte" data-pos="3">
        
        </div>
        
        <div class="col-xs-4 cell kasten_mitte" data-pos="4">
        
        </div>
        
        <div class="col-xs-4 cell kasten_mitte" data-pos="5">
        
        </div>
    
    
    </div>

    
    
           <div class="row text-center">
    
        <div class="col-xs-4 cell kasten_unten" data-pos="6">
        
        </div>
        
        <div class="col-xs-4 cell kasten_unten" data-pos="7">
        
        </div>
        
        <div class="col-xs-4 cell kasten_unten" data-pos="8">
        
        </div>
    
    
    
    
    </div>

        
    
    
    <p id="test1"></p>
     <div id="test2"></div>
    <p id="test3">AI turn counter</p>
    
</div>
    
              
            
!

CSS

              
                body{
    background-color:#FFFFFF;
}

#hauptcontainer{
    max-width: 501px;
   padding-left:0; 
    
    
  
}


.kasten_oben {
    
    border-top: 1px solid black;
    
    
   
}

.kasten_mitte {

    border: 1px solid black;
}

.kasten_unten {

    border: 1px solid black;
}



#board_container{
    max-width: 501px;
    
}

.cell{
    font-size:100px;
    line-height: 167px;
    height:167px;
    background-color:darkseagreen;
    border: 1px solid black; 
}

/* popups */

.no-close .ui-dialog-titlebar-close {
  display: none;
}

/*.reset{
    cursor:default;
    
}*/

.reset_cursor{
    cursor:default;
}

.click_now{
    cursor:pointer;
}

#reset_container{
    padding-bottom: 10px;
}

#reset_button{
    font-size:24px;
    justify-content: center;
    
}

#hi_turn{
    
    font-size:27px;
    background-color:aqua;
    
    
    
}

p{
    

}

#hi_container{
    
}

#ai_turn{
    font-size:27px;
    background-color:aqua;
    
}




              
            
!

JS

              
                 $(document).ready(function(){
   
        var game = { 
                     ai_is_x : null,
                     ai_starts: null,
                     status: "not running",
                     turn: null,
                     board : [],
                     init_board: function(){
                        for (var i = 0; i <= 8; i++){
                            this.board.push("E");    }   
                                           },
                     empty_cells: [],
                     get_empty_cells: function(){
                         this.empty_cells = [];
                         for (var z = 0; z < this.board.length; z++){
                             if (this.board[z] === "E"){
                                 this.empty_cells.push(z);
                             }
                         }
                     },
                     winning_cells:[],
                     ai_turns: 0    
            
                    };
        
        //set board on empty
        game.init_board();
        
    
     
     function init_game (xis, starter){
         
         //update game status 
         game.status = "running";
         
         //check who´s turn it is
         if (game.turn === "HI"){
             init_hi_turn();
         }else{
             init_ai_turn();
         }
         
         
         
     }   
        
        
        
    //init hi turn    
    function init_hi_turn(){
        
        //change cursor
        $(".cell").addClass("click_now");
        
        //show hi turn
        $("#hi_container").append("<div id=\"hi_turn\"><p>Your Turn!</p></div>");
        
        //update turn
        game.turn = "HI";
        
        //get HI choice
        $(".cell").click(function(){
            
            if (game.turn === "HI" && game.status === "running"){
            
                    var position = Number($(this).attr("data-pos"));

                    $(".cell").removeClass("click_now");

                    //add x or o on ui and board
                    if (game.ai_is_x){
                        $(this).text("O");
                        game.board[position] = "O";
                        advance_turn();

                    }else {
                        $(this).text("X");
                        game.board[position] = "X";
                        advance_turn();
                    }

                                    }
            
            
            
        });
        
    }
        
        
        
    //init ai turn    
    function init_ai_turn(){
        
        //show ai turn
        $("#ai_container").append("<div id=\"ai_turn\"><p>AI´s Turn!</p></div>");
        
        //update turn
        game.turn = "AI";
        
        //update turn counter
        game.ai_turns = game.ai_turns + 1;
        
        $("#test3").text(game.ai_turns);
        
        //ai do random move
        //get random free cell
        var free_cell = ai_random_move();
        
       
        //get the chosen cell
        var whole_board = $(".cell");
      
        
        if (game.ai_is_x){
            $(whole_board[free_cell]).text("X");
            

            
            game.board[free_cell] = "X";
            
            advance_turn();
        }
            else{
                $(whole_board[free_cell]).text("O");
                
          
                game.board[free_cell] = "O";
                
                advance_turn();
            }
        
    }
        
        
        
        
    //advance turn
    function advance_turn(){
        
        //remove ui turn
        $("#hi_container").empty();
        $("#ai_container").empty();
        
        //check if game is over
        if (check_endstate(true)){
            show_endstate();
        }
            else {
                if (game.turn === "HI"){
                    init_ai_turn();
                }
                else {
                        init_hi_turn();
                    }
            }
    }      
        
        
        
    //ai random move
    function ai_random_move(){
        
        //get empty cells
        game.get_empty_cells();
        
        //get number of empty cells
        var emp_leng = game.empty_cells.length;
        
        //choose random entry of the empty cell array
        var rdm_cell = Math.floor(Math.random() * emp_leng);
 
        
        //return the random empty cell
        return game.empty_cells[rdm_cell];
        
    }    
        
        
        
        
        
        
        
        
        
   
       
    
    //check if endstate is true    
    function check_endstate(from_advance){
        
        var Bo = game.board;
        
        //rows
        for (var i = 0; i <= 6; i = i + 3){
            if (Bo[i] !== "E" && Bo[i] === Bo[i + 1] && Bo[i + 1] === Bo[i + 2]){
                
                //update status
                game.status = Bo[i] + " won";
                
                //save winning cells for effect, if invoked from advance and not ai
                if (from_advance){
                    game.winning_cells.push(i , i + 1, i + 2);
                }
                
                return true; 
                
            }
        }
        
        //colums
        for(var i = 0; i <= 2 ; i++){
            if (Bo[i] !== "E" && Bo[i] === Bo[i + 3] && Bo[i + 3] === Bo[i + 6]){
                
                //update status
                game.status = Bo[i] + " won";
                
                //save winning cells for effect, if invoked from advance and not ai
                if (from_advance){
                    game.winning_cells.push(i , i + 3, i + 6);
                }
                
                return true;
            }
        }
        
        //diagonal
        if (Bo[4] !== "E"){
            if((Bo[0] === Bo[4] && Bo[4] === Bo[8]) || (Bo[2] === Bo[4] && Bo[4] === Bo[6])){
                game.status = Bo[4] + " won";
                return true
            }
        }
        
        //check for draw   
        //get empty cells
        game.get_empty_cells();
        
        if (game.empty_cells.length > 0){
            return false;
        }
            else {
                game.status = "draw";
                return true;
            }
    
    }   
        
    //show a endstate at ui
    function show_endstate(){
        
    }    
        
        

        
        
        
        
        
        // choose x or o
      
        function choose_x_or_o () {
            
             $( "#dialog_1" ).dialog({
                            dialogClass: "no-close",
                            draggable: false,
                             open: function () {
                                                    var markup = "Do you want X or O ? ";
                                                    $(this).html(markup);
                                                },
                            buttons: { OK: function() {$(this).dialog("close");}    },
                          //  title: "Do you want X or O ? ",
                           // position: { }
                            buttons: {
                                        'X': function() {
                                           
                                            game.ai_is_x = false;
               
                                           $(this).dialog('close');
                                            
                                           who_starts(); 
                                        },
                                        'O': function() {
                                            
                                            game.ai_is_x = true;
   
                                           $(this).dialog('close');
                                            
                                            who_starts(); 
                                        }
                                      }
            });
            
          
        }
        
        choose_x_or_o (); 
      
        
        //choose who begins
        
      function who_starts (){
          
             $( "#dialog_1" ).dialog({
                            dialogClass: "no-close",
                            draggable: false,
                             open: function () {
                                                    var markup = "Do u want to start? ";
                                                    $(this).html(markup);
                                                },
                            buttons: { OK: function() {$(this).dialog("close");}    },
                          //  title: "Do you want X or O ? ",
                           // position: { }
                            buttons: {
                                        'Yes': function() {
                                           
                                            game.ai_starts = false;
                                            game.turn = "HI";
               
                                           $(this).dialog('close');
                                            
                                           init_game (game.ai_is_x , game.ai_starts); 
                                        },
                                        'NO': function() {
                                            
                                            game.ai_starts = true;
                                            game.turn = "AI"
   
                                           $(this).dialog('close');
                                            
                                            init_game (game.ai_is_x , game.ai_starts); 
                                        }
                                      }
            });
          
          //toggle reset button cursor
          $("#reset_button").toggleClass("reset_cursor");
          
          
      }  
   
  
    //click on reset button
    $("#reset_button").click(function(){
        
        //clear board
        game.board = [];
        game.init_board();
        
        //clear ui
        $(".cell").empty();
        
        //clear hi & ai turn
        $("#hi_container").empty();
        $("#ai_container").empty();
        
        //clear empty cells
       // game.empty_cells = [];
        
        //clear ai turn counter
        game.ai_turns = 0;
        
        //restart game
        choose_x_or_o();
        
    });    
        
        
        
        
        
   });  
    
              
            
!
999px

Console