SOURCE

console 命令行工具 X clear

                    
>
console
$(document).ready(function(){

	var player = 1;

	$(".block").click(function(){
		
		var blockSelected = $(this);

		if(blockSelected.hasClass("ex") || blockSelected.hasClass("oh")){
			alert("Please select another block.");
		}
		else if(blockSelected.hasClass("game-over")){
			alert("This game is finished. Please click 'RESET' to start a new game.");
		}
		else {
			//player 1 goes X
			if(player === 1){
				blockSelected.addClass("ex").text("X");
				if(checkVictory("ex")){
					$(".victory-msg").text("Player " + player + "'s Victory!").fadeIn("slow");
					$(".block").addClass("game-over");
				}
				player = 2;
			}
			//player 2 goes O
			else {
				blockSelected.addClass("oh").text("O");
				if(checkVictory("oh")){
					$(".victory-msg").text("Player " + player + "'s Victory!").fadeIn("slow");
					$(".block").addClass("game-over");
				}
				player = 1;
			}
		}

	});

	$(".reset").click(function(){
		$(".block").html("").removeClass("ex oh game-over");
		$(".victory-msg").fadeOut("slow");
		player = 1;
	});

	//victory checking function
	//totally eight situations
	function checkVictory(symbol){
		//symbol is ex or oh
		if($("#1").hasClass(symbol) && $("#2").hasClass(symbol)&& $("#3").hasClass(symbol)){
			return true;
		}
		else if($("#4").hasClass(symbol) && $("#5").hasClass(symbol) && $("#6").hasClass(symbol)){
			return true;
		}
		else if($("#7").hasClass(symbol) && $("#8").hasClass(symbol) && $("#9").hasClass(symbol)){
			return true;
		}
		else if($("#1").hasClass(symbol) && $("#4").hasClass(symbol) && $("#7").hasClass(symbol)){
			return true;
		}
		else if($("#2").hasClass(symbol) && $("#5").hasClass(symbol) && $("#8").hasClass(symbol)){
			return true;
		}
		else if($("#3").hasClass(symbol) && $("#6").hasClass(symbol) && $("#9").hasClass(symbol)){
			return true;
		}
		else if($("#1").hasClass(symbol) && $("#5").hasClass(symbol) && $("#9").hasClass(symbol)){
			return true;
		}
		else if($("#3").hasClass(symbol) && $("#5").hasClass(symbol) && $("#7").hasClass(symbol)){
			return true;
		}
		else {
			return false;
		}

	}

});
<div class="container">
		<div class="block" id="1"></div>
		<div class="block" id="2"></div>
		<div class="block" id="3"></div>
		<div class="block" id="4"></div>
		<div class="block" id="5"></div>
		<div class="block" id="6"></div>
		<div class="block" id="7"></div>
		<div class="block" id="8"></div>
		<div class="block" id="9"></div>
	</div>
	<button type="button" class="reset">RESET</button>
	<div class="victory-msg"></div>
	<footer>Designed by <a href="http://www.alenhu.com/" target="_blank">Alen Hu</a></footer>
body {
	font-family: helvetica, sans-serif;
	background: #d24d57;
	color: #fff;
}
footer {
	text-align: center;
}
footer a {
	color: #fff;
}

.container {
	background: #fff;
	width: 462px;
	height: 462px;
	margin: 20px auto;
}
.block {
	border: 2px solid #d24d57;
	width: 150px;
	height: 150px;
	float: left;
	color: #d24d57;
	font-size: 60px;
	text-align: center;
	line-height: 150px;
	cursor: pointer;
}
.block:hover,
.reset:hover {
	background: #f5f5f5;
}
.reset {
	border: none;
	background: #fff;
	color: #d24d57;
	width: 462px;
	height: 50px;
	margin: 20px auto;
	display: block;
	cursor: pointer;
	font-size: 24px;
	letter-spacing: 0.2em;
}

.victory-msg {
	width: 200px;
	height: 50px;
	background: #fff;
	color: #d24d57;
	font-size: 20px;
	position: fixed;
	right: 50px;
	top: 250px;
	display: none;
	text-align: center;
	line-height: 50px;
}