A Pen by VenomSnake on CodePen.
Created
December 2, 2017 11:37
-
-
Save HuangStanley050/6fadc974ab82a3ede6685b292b88f708 to your computer and use it in GitHub Desktop.
Tic Tac Toe project
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <button id="Human"type="button" class="btn btn-primary">Start X</button> | |
| <button id="Mach"type="button" class="btn btn-primary active">Start O</button> | |
| <table> | |
| <tr> | |
| <td id="cell1"></td> | |
| <td id="cell1-2"></td> | |
| <td id="cell1-3"></td> | |
| </tr> | |
| <tr> | |
| <td id="cell2"></td> | |
| <td id="cell2-2"></td> | |
| <td id="cell2-3"></td> | |
| <tr> | |
| <tr> | |
| <td id="cell3"></td> | |
| <td id="cell3-2"></td> | |
| <td id="cell3-3"></td> | |
| </table> | |
| <h1>Tic Tac Toe</h1> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $( document ).ready(function() { | |
| //DUMB AI, place moves randomly on the board where it's not taken | |
| //Will implement either Minimax or function to block forking in the future | |
| //for now it meets user stories | |
| //can play against AI, can reset after every game, can choose X or O start | |
| var board_position = [0,0,0, | |
| 0,0,0, | |
| 0,0,0]; | |
| var human; | |
| var AI; | |
| var cpu_input; | |
| var human_input; | |
| var who; | |
| var move_count=0; | |
| function clear_board(){ | |
| board_position=[0,0,0,0,0,0,0,0,0]; | |
| $("#cell1").html(""); | |
| $("#cell1-2").html(""); | |
| $("#cell1-3").html(""); | |
| $("#cell2").html(""); | |
| $("#cell2-2").html(""); | |
| $("#cell2-3").html(""); | |
| $("#cell3").html(""); | |
| $("#cell3-2").html(""); | |
| $("#cell3-3").html(""); | |
| console.log(board_position); | |
| window.location.reload(true); | |
| } | |
| function toggle_input(){ | |
| if ( human == 1) { | |
| input = "X"; | |
| human = 0; | |
| AI=1; | |
| } | |
| else { | |
| input = "O"; | |
| AI = 0; | |
| human = 1; | |
| } | |
| //console.log(AI+"----"+human); | |
| } | |
| function who_is_it() { | |
| if ( human== 1) { | |
| who = "H"; | |
| } | |
| else { | |
| who = "AI"; | |
| } | |
| } | |
| function A_I() { | |
| //alert("AI has launched!"); | |
| who="AI"; | |
| /*$("#cell3").html("Test"); | |
| board_position[7]="AI"; | |
| */ | |
| /*if(!validate_board(temp)){ | |
| board_position[temp]=who; | |
| AI_plot_move(temp); | |
| }*/ | |
| validate_board(); | |
| console.log(temp); | |
| console.log(board_position); | |
| } | |
| function validate_board() { | |
| var temp = Math.floor(Math.random() * 9); //generate random number from 0 to 8 | |
| var condition = 1; | |
| while ( condition == 1) { | |
| if ( board_position[temp] == 'H' || board_position[temp]=='AI') | |
| { | |
| //alert("Something is there!"); | |
| console.log(temp); | |
| console.log(board_position); | |
| temp = Math.floor(Math.random() * 9); | |
| } | |
| else { | |
| AI_plot_move(temp); | |
| board_position[temp]=who; | |
| check_for_win(temp); | |
| move_count++; | |
| check_for_draw(); | |
| console.log(move_count); | |
| condition = 0; | |
| } | |
| } | |
| } | |
| function check_for_draw(){ | |
| if ( move_count == 9){ | |
| alert("it's a draw"); | |
| //window.location.reload(); | |
| clear_board(); | |
| } | |
| else { | |
| return; | |
| } | |
| } | |
| function check_for_win(pos){ | |
| if ( pos == 0) { | |
| if ( board_position[2]==who && board_position[1]==who) { | |
| alert(who+" wins"); | |
| console.log(who); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[3]==who && board_position[6]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[4]==who && board_position[8]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| //clear_board(); | |
| } | |
| if ( pos == 1) { | |
| if ( board_position[4]==who && board_position[7]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[0]==who && board_position[2]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| //clear_board(); | |
| } | |
| if ( pos == 2) { | |
| if ( board_position[0]==who && board_position[1]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[5]==who && board_position[8]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[4]==who && board_position[6]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| //clear_board(); | |
| } | |
| if ( pos == 3) { | |
| if ( board_position[4]==who && board_position[5]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[0]==who && board_position[6]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| //clear_board(); | |
| } | |
| if ( pos == 4) { | |
| if ( board_position[1]==who && board_position[7]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[5]==who && board_position[3]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[2]==who && board_position[6]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[0]==who && board_position[8]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| //clear_board(); | |
| } | |
| if ( pos == 5) { | |
| if ( board_position[2]==who && board_position[8]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[3]==who && board_position[4]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| //clear_board(); | |
| } | |
| if ( pos == 6) { | |
| if ( board_position[7]==who && board_position[8]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[2]==who && board_position[4]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[0]==who && board_position[3]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| //clear_board(); | |
| } | |
| if ( pos == 7) { | |
| if ( board_position[4]==who && board_position[1]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[6]==who && board_position[8]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| //clear_board(); | |
| } | |
| if ( pos == 8) { | |
| if ( board_position[2]==who && board_position[5]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[6]==who && board_position[7]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| if ( board_position[0]==who && board_position[4]==who) { | |
| alert(who+" wins"); | |
| window.location.reload(true); | |
| } | |
| //clear_board(); | |
| } | |
| } | |
| function AI_plot_move(pos) { | |
| if ( pos == 0 ){ | |
| $("#cell1").html(cpu_input); | |
| } | |
| if ( pos == 1 ){ | |
| $("#cell1-2").html(cpu_input); | |
| } | |
| if ( pos == 2 ){ | |
| $("#cell1-3").html(cpu_input); | |
| } | |
| if ( pos == 3 ){ | |
| $("#cell2").html(cpu_input); | |
| } | |
| if ( pos == 4 ){ | |
| $("#cell2-2").html(cpu_input); | |
| } | |
| if ( pos == 5 ){ | |
| $("#cell2-3").html(cpu_input); | |
| } | |
| if ( pos == 6 ){ | |
| $("#cell3").html(cpu_input); | |
| } | |
| if ( pos == 7 ){ | |
| $("#cell3-2").html(cpu_input); | |
| } | |
| if ( pos == 8 ){ | |
| $("#cell3-3").html(cpu_input); | |
| } | |
| } | |
| //click buttons to correspond to board position | |
| $("#Mach").click(function(){ | |
| cpu_input="X"; | |
| human_input="O"; | |
| AI=1; | |
| //who="AI"; | |
| //console.log(cpu_input+"----"+human_input); | |
| A_I(); | |
| }); | |
| $("#Human").click(function(){ | |
| human_input="X"; | |
| human=1; | |
| //who="H"; | |
| cpu_input="O"; | |
| //console.log(human_input+"----"+cpu_input); | |
| }); | |
| $("#cell1").click(function(){ | |
| who="H"; | |
| move_count++; | |
| //validate_board(0); | |
| // who_is_it(); | |
| board_position[0]=who; | |
| //toggle_input(); | |
| $("#cell1").html(human_input); | |
| console.log(board_position); | |
| check_for_win(0); | |
| check_for_draw(); | |
| A_I(); | |
| //console.log(AI); | |
| }); | |
| $("#cell1-2").click(function(){ | |
| who="H"; | |
| move_count++; | |
| //validate_board(1); | |
| //who_is_it(); | |
| board_position[1]=who; | |
| // toggle_input(); | |
| $("#cell1-2").html(human_input); | |
| check_for_win(1); | |
| check_for_draw(); | |
| console.log(board_position); | |
| A_I(); | |
| }); | |
| $("#cell1-3").click(function(){ | |
| who="H"; | |
| move_count++; | |
| //validate_board(2); | |
| //who_is_it(); | |
| board_position[2]=who; | |
| //toggle_input(); | |
| $("#cell1-3").html(human_input); | |
| check_for_win(2); | |
| check_for_draw(); | |
| console.log(board_position); | |
| A_I(); | |
| }); | |
| $("#cell2").click(function(){ | |
| who="H"; | |
| move_count++; | |
| //validate_board(3); | |
| //who_is_it(); | |
| board_position[3]=who; | |
| //toggle_input(); | |
| $("#cell2").html(human_input); | |
| check_for_win(3); | |
| check_for_draw(); | |
| console.log(board_position); | |
| A_I(); | |
| }); | |
| $("#cell2-2").click(function(){ | |
| who="H"; | |
| move_count++; | |
| //validate_board(4); | |
| //who_is_it(); | |
| board_position[4]=who; | |
| //toggle_input(); | |
| $("#cell2-2").html(human_input); | |
| check_for_win(4); | |
| check_for_draw(); | |
| console.log(board_position); | |
| A_I(); | |
| }); | |
| $("#cell2-3").click(function(){ | |
| who="H"; | |
| move_count++; | |
| //validate_board(5); | |
| //who_is_it(); | |
| board_position[5]=who; | |
| //toggle_input(); | |
| $("#cell2-3").html(human_input); | |
| check_for_win(5); | |
| check_for_draw(); | |
| console.log(board_position); | |
| A_I(); | |
| }); | |
| $("#cell3").click(function(){ | |
| who="H"; | |
| move_count++; | |
| //validate_board(6); | |
| // who_is_it(); | |
| board_position[6]=who; | |
| //toggle_input(); | |
| $("#cell3").html(human_input); | |
| check_for_win(6); | |
| check_for_draw(); | |
| console.log(board_position); | |
| A_I(); | |
| }); | |
| $("#cell3-2").click(function(){ | |
| who="H"; | |
| move_count++; | |
| // validate_board(7); | |
| //who_is_it(); | |
| board_position[7]=who; | |
| //toggle_input(); | |
| $("#cell3-2").html(human_input); | |
| check_for_win(7); | |
| check_for_draw(); | |
| console.log(board_position); | |
| A_I(); | |
| }); | |
| $("#cell3-3").click(function(){ | |
| who="H"; | |
| move_count++; | |
| // validate_board(8); | |
| //who_is_it(); | |
| board_position[8]=who; | |
| //toggle_input(); | |
| $("#cell3-3").html(human_input); | |
| check_for_win(8); | |
| check_for_draw(); | |
| console.log(board_position); | |
| A_I(); | |
| }); | |
| //end click buttons section | |
| //console.log(AI); | |
| /*if ( AI == 1) { | |
| A_I(); | |
| } | |
| */ | |
| //test_launch(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| tr td { | |
| padding: 40px; | |
| border: 2px solid black; | |
| width: 60px; | |
| text-align: center; | |
| } | |
| h1 { | |
| text-align: center; | |
| } | |
| table { | |
| margin-left: auto; | |
| margin-right: auto; | |
| table-layout: fixed; | |
| } | |
| #cell1 { | |
| border-bottom-color: red; | |
| border-right-color: red; | |
| border-left-color: transparent; | |
| border-top-color: transparent; | |
| cursor: pointer; | |
| } | |
| #cell1-2 { | |
| border-bottom-color: red; | |
| border-right-color: red; | |
| border-top-color: transparent; | |
| cursor: pointer; | |
| } | |
| #cell1-3 { | |
| border-bottom-color: red; | |
| border-top-color: transparent; | |
| border-right-color: transparent; | |
| cursor: pointer; | |
| } | |
| #cell2 { | |
| border-bottom-color: red; | |
| border-right-color: red; | |
| border-left-color: transparent; | |
| cursor: pointer; | |
| } | |
| #cell2-2 { | |
| border-bottom-color: red; | |
| border-right-color: red; | |
| cursor: pointer; | |
| } | |
| #cell2-3 { | |
| border-bottom-color: red; | |
| border-right-color: transparent; | |
| cursor: pointer; | |
| } | |
| #cell3 { | |
| border-right-color: red; | |
| border-bottom-color: transparent; | |
| border-left-color: transparent; | |
| cursor: pointer; | |
| } | |
| #cell3-2 { | |
| border-right-color: red; | |
| border-bottom-color: transparent; | |
| cursor: pointer; | |
| } | |
| #cell3-3 { | |
| border-bottom-color: transparent; | |
| border-right-color: transparent; | |
| cursor: pointer; | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment