iampaul83/ooxx.html

## ooxx.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>井字遊戲</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        h1{
            text-align: center;
        }
        table, td {
            border: 1px solid black;
        }
        td{
            cursor: pointer;
            width: 60px;
            height: 60px;
            text-align: center;
            font-size: 40px;
        }
        div,h3{
            text-align: center;
        }
        button{
            font-size: 18px;
        }
        .container{
            position: relative;
        }
        .disabled{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
   <h1>井字遊戲</h1>

    <div class="container">
        <table align="center">
            <tr>
                <td id="a1"></td>
                <td id="a2"></td>
                <td id="a3"></td>
            </tr>
            <tr>
                <td id="a4"></td>
                <td id="a5"></td>
                <td id="a6"></td>
            </tr>
            <tr>
                <td id="a7"></td>
                <td id="a8"></td>
                <td id="a9"></td>
            </tr>
        </table>
        <div class="disabled"></div>
    </div>

    <h3></h3>
    <div><button id="newGame">新遊戲</button></div>
    <script>

        $(function() {
            var who, xArray, oArray, withComputer, indexArray, number, gameOver;
            var winArray = [
                [0,1,2], [3,4,5], [6,7,8],
                [0,4,8], [2,4,6], [0,3,6],
                [1,4,7], [2,5,8]
            ];

            $('#newGame').on('click', function(event) {
                newGame();
            });

            var newGame = function(){
                $('h3').text('');
                $('.disabled').css('display','none');
                indexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];
                who = 'X';
                xArray = [];
                oArray = [];
                gameOver = false;
                withComputer = true;
                $('td').text('');
            }
            newGame();

            $('body').on('click','td', function(event) {
                let column_num = parseInt( $(this).index() );
                let row_num = parseInt( $(this).parent().index() );

                if(row_num == 1){
                    column_num += 3;
                }else if(row_num == 2){
                    column_num += 6;
                }


                if(event.target.textContent){
                    console.log('已被搶先!');
                }else{
                    let index = indexArray.indexOf(column_num);
                    indexArray.splice(index,1);

                    if(who == 'X'){
                        xArray.push(column_num);
                        event.target.textContent = 'X';
                        check(xArray, who);
                        who = 'O';

                        if(withComputer&&!gameOver){
                            setTimeout(function(){
                                computerTurn(number);
                            }, 500);
                        }
                    }else{
                        oArray.push(column_num);
                        event.target.textContent = 'O';
                        check(oArray, who);
                        who = 'X';
                    }
                }


            });

            var randomNumber = function(min , max){
                let random_number = Math.random() * (max-min) + min;
                return Math.floor(random_number);
            };

            var computerTurn = function(number){
                let random = randomNumber(0,indexArray.length);
                let index = indexArray[random]+1;
                $('#a'+index).text(who);
                oArray.push(indexArray[random]);

                let deleteIndex = indexArray.indexOf(indexArray[random]);
                indexArray.splice(deleteIndex,1);

                check(oArray,who)
                who = 'X';

            };

            var check = function(array, who){
                for(let i=0; i<winArray.length;i++){
                    let trueArray = [];
                    for(let j=0;j<winArray[i].length;j++){
                        let num = winArray[i][j];
                        for(let k=0;k<array.length;k++){
                            let arrayNum = array[k];
                            if(arrayNum == num){
                                trueArray.push(true);
                            }
                            if(trueArray.length == 2){
                                number = num;
                            }
                        }
                        if(trueArray.length == 3){
                            $('h3').text(who+' win the game.');
                            $('.disabled').css('display','block');
                            gameOver = true;
                            return;
                        }

                    }
                }
            };


        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>井字遊戲</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<style>
	h1{
	text-align: center;
	}
	table, td {
	border: 1px solid black;
	}
	td{
	cursor: pointer;
	width: 60px;
	height: 60px;
	text-align: center;
	font-size: 40px;
	}
	div,h3{
	text-align: center;
	}
	button{
	font-size: 18px;
	}
	.container{
	position: relative;
	}
	.disabled{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<h1>井字遊戲</h1>

	<div class="container">
	<table align="center">
	<tr>
	<td id="a1"></td>
	<td id="a2"></td>
	<td id="a3"></td>
	</tr>
	<tr>
	<td id="a4"></td>
	<td id="a5"></td>
	<td id="a6"></td>
	</tr>
	<tr>
	<td id="a7"></td>
	<td id="a8"></td>
	<td id="a9"></td>
	</tr>
	</table>
	<div class="disabled"></div>
	</div>

	<h3></h3>
	<div><button id="newGame">新遊戲</button></div>
	<script>

	$(function() {
	var who, xArray, oArray, withComputer, indexArray, number, gameOver;
	var winArray = [
	[0,1,2], [3,4,5], [6,7,8],
	[0,4,8], [2,4,6], [0,3,6],
	[1,4,7], [2,5,8]
	];

	$('#newGame').on('click', function(event) {
	newGame();
	});

	var newGame = function(){
	$('h3').text('');
	$('.disabled').css('display','none');
	indexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];
	who = 'X';
	xArray = [];
	oArray = [];
	gameOver = false;
	withComputer = true;
	$('td').text('');
	}
	newGame();

	$('body').on('click','td', function(event) {
	let column_num = parseInt( $(this).index() );
	let row_num = parseInt( $(this).parent().index() );

	if(row_num == 1){
	column_num += 3;
	}else if(row_num == 2){
	column_num += 6;
	}


	if(event.target.textContent){
	console.log('已被搶先!');
	}else{
	let index = indexArray.indexOf(column_num);
	indexArray.splice(index,1);

	if(who == 'X'){
	xArray.push(column_num);
	event.target.textContent = 'X';
	check(xArray, who);
	who = 'O';

	if(withComputer&&!gameOver){
	setTimeout(function(){
	computerTurn(number);
	}, 500);
	}
	}else{
	oArray.push(column_num);
	event.target.textContent = 'O';
	check(oArray, who);
	who = 'X';
	}
	}


	});

	var randomNumber = function(min , max){
	let random_number = Math.random() * (max-min) + min;
	return Math.floor(random_number);
	};

	var computerTurn = function(number){
	let random = randomNumber(0,indexArray.length);
	let index = indexArray[random]+1;
	$('#a'+index).text(who);
	oArray.push(indexArray[random]);

	let deleteIndex = indexArray.indexOf(indexArray[random]);
	indexArray.splice(deleteIndex,1);

	check(oArray,who)
	who = 'X';

	};

	var check = function(array, who){
	for(let i=0; i<winArray.length;i++){
	let trueArray = [];
	for(let j=0;j<winArray[i].length;j++){
	let num = winArray[i][j];
	for(let k=0;k<array.length;k++){
	let arrayNum = array[k];
	if(arrayNum == num){
	trueArray.push(true);
	}
	if(trueArray.length == 2){
	number = num;
	}
	}
	if(trueArray.length == 3){
	$('h3').text(who+' win the game.');
	$('.disabled').css('display','block');
	gameOver = true;
	return;
	}

	}
	}
	};


	});
	</script>
	</body>
	</html>