123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <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>
    
            
          
!
            
              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;
    
}




            
          
!
            
               $(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
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console