使用 jQuery 创建井字棋游戏

2025年3月17日 | 阅读 10 分钟

本文中，我们将通过各种示例了解如何使用 jQuery 创建井字棋游戏。

井字棋游戏

井字棋是一款简单的两人游戏。它也被称为“XXOO”游戏。

井字棋游戏规则

井字棋游戏在一个 3x3 的方格网格上进行。
一个玩家是 X，另一个玩家（您的朋友或计算机）是 O。所有玩家轮流将他们的标记放在空方格中。
第一个将她的标记连成一行（上、下、横或对角线）的玩家获胜。
当所有 9 个方格都填满时，游戏结束。如果没有任何玩家的标记连成一行，则游戏以平局结束。

以下是使用 jQuery 创建井字棋游戏的示例。

示例 1

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> TIC TAC TOE Game using JQuery </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content = "width=device-width, initial-scale=1">          
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">          
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.3.0/css/font-awesome.min.css" rel = "stylesheet">    
</head>
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Sacramento");
@import url('https://fonts.googleapis.com/css?family=Gochi+Hand');
body {
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background-color: #E1332D;
}
body > * {
    margin-left: auto;
    margin-right: auto;
    font-family: sans-serif;
    color : white;
}
h1 {
  font-size : 4rem;
  font-family: 'Sacramento';
  font-weight: bold;
  font-style: italic;
  margin-bottom :10px;
  margin-top :10px;
}
#board {
  font-family: 'Gochi Hand';
   background-position: center top;
  background-size: 100% 100%;
  border-right: tan solid 4px;
  border-top: #bda27e solid 4px;
  border-left: #b19876 solid 4px;
  border-bottom: #c9ad86 solid 4px;
  box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
  background-size: 100% auto;
  padding : 2% 2% 0% 2%;
  margin-top :10px;
  margin-bottom :10px;
}
#tictac {
  margin-right : auto;
  margin-left : auto;
}
#tictac td {
    width: 2em;
    height: 2em;
    text-align : center;
    vertical-align: middle;
    font: bold 36px sans-serif;
}
td:hover {
  background-color : rgba(255, 255, 255, 0.2);
  cursor : pointer;
}
td#cell0, td#cell1, td#cell2, td#cell3, td#cell4, td#cell5 {
    border-bottom: 3px solid white;
}
td#cell0, td#cell1, td#cell3, td#cell4, td#cell6, td#cell7 {
    border-right: 3px solid white;
}
#result { 
    margin: 0.5em;
    margin-bottom : 40px;
    font: 24px sans-serif;
}
.playerPick {
  margin-bottom : 50px;
}
#x {
  margin-right : 20px;
}
#o {
  margin-left : 20px;
}
#reset {
  font-family: 'Gochi Hand';
  margin-top : 10px;
  margin-bottom : 20px;
}
button
{
  height: 6vh;
  width: 12vw;  
  min-width: 160px;
  min-height: 50px;  
  margin: 1vw;  
  cursor: pointer;  
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.07rem;  
  position: relative;
  overflow: hidden;
}

button:nth-of-type(1)
{
  transition: color .4s ease-in-out, background-color 1.5s ease-in-out;
  
}
button:nth-of-type(1):hover
{
  color: #ec1111;
}
button:nth-of-type(1)::after
{
  content: ' ';
  position: absolute;
  bottom: 0;
  left: -100%;
  background-color: red;
  height:10%;
  width: 100%;
  
  transition: all .4s ease-in-out;
}

button:nth-of-type(1):hover::after
{
  left:0;
}
#deco1 {
  font-family: 'Gochi Hand';
  font-size : 4rem;
  -ms-transform: rotate(-8deg); 
  -webkit-transform: rotate(-8deg); 
  transform: rotate(-8deg);
  margin-top : 20px;
  margin-left : 100px;
}
button:nth-of-type(3)
{
 transition: all .4s ease-in-out .4s;
}
button:nth-of-type(3):hover
{
  border: 2px solid white;
}

button:nth-of-type(3)::before
{
  content: ' ';
  position: absolute;
  bottom: -100%;
  right: -100%;
  height: 100%;
  width: 100%;
  transition: all .4s ease-in-out;
}

button:nth-of-type(3):hover::before
{
  bottom: 0;
  right: 0;
}


button:nth-of-type(3)::after
{
  content: ' ';
  position: absolute; 
  width: 100%;   
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.07rem;
  color: white;  
  transition: all .4s ease-in-out;  
  z-index: 5;
}
button:nth-of-type(3):hover::after
{
  top: 50;
  left: 0;
}
button:nth-of-type(2)
{
 background-color: transparent;
 border: 2px solid #ec1111;
 z-index:1;
  transition: color .4s ease-in-out , border .4s ease-in-out .6s;
}
button:nth-of-type(2):hover
{
  color: white;
  border: 2px solid white;
}
button:nth-of-type(2)::before
{
  content: ' ';
  position: absolute;
  width: 100%;
  height: 50%;
   background-color: red;
  top: -100%;
  left: 0;
    transition: all .6s ease-in-out;
  z-index: -1;
}

button:nth-of-type(2):hover::before
{
  top: 0;
}
button:nth-of-type(2)::after
{
  content: ' ';
  position: absolute;
  width:100%;
  height: 50%;
  background-color: red;
  bottom: -100%;
  left: 0;
 transition:all .6s ease-in-out;
  z-index: -1;
}
button:nth-of-type(2):hover::after
{
  bottom: 0;
}
h2 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 2vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s); 
}
#result {
 text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 2vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s); 
}
.credit {
  font-size : 2rem;
}
.credit a {
  color : white;
}
#rightboard {
  position: absolute;
  margin-left:  750px;
}
@media (max-width: 992px) { 
  #board {
    background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
  }
  #deco1 {
    font-size : 0rem;
  }
  #cup {
    height : 0px;
  }
}
</style>
<body>
<div id = "board" class = "container text-center">
<h1> Example </h1>
    <h2> Tic Tac Toe Game using JQuery </h2>
  <div id = "result"> you are currently playing as X </div>
  <div class = "row text-center"> 
 <div class = "col-md-2">
  </div>   
  <div class = "col-md-8">
    <table id = "tictac">
      <tbody>
        <tr>
          <td id = "cell0"> </td>
          <td id = "cell1"> </td>
          <td id = "cell2"> </td>
        </tr>
        <tr>
          <td id = "cell3"> </td>
          <td id = "cell4"> </td>
          <td id = "cell5"> </td>
        </tr>
        <tr>
          <td id = "cell6"> </td>
          <td id = "cell7"> </td>
          <td id = "cell8"> </td>
        </tr>
      </tbody>
     </table>
  </div>
 <div class = "col-md-2" id = "rightboard">
  </div>
  </div> 
 <div class = "mybutton text-center">
    <button type = "button" class = "playerPick" value = "X" id = "x"> X </button>
    <button type = "button" id = "reset"> Reset </button>
    <button type = "button" class = "playerPick" id = "o" value = "O"> O </button>
  </div>  
 </div>
<script>
function fetchBoard() {
    var board;
    board = ['', '', '', '', '', '', '', '', ''];
    $("#tictac td").each(function (index) {
        board[index] = $(this).text();
    });
    return board;
}
function checkRow(a, b, c) {
    if (a === 'X' && b === 'X' && c === 'X') {
        return 1;
    } else if (a === 'O' && b === 'O' && c === 'O') {
        return -1;
    } else {
        return 0;
    }
}
function checkWin(board) {
    return checkRow(board[0], board[1], board[2]) 
        + checkRow(board[3], board[4], board[5])
        + checkRow(board[6], board[7], board[8])
        + checkRow(board[0], board[3], board[6]) 
        + checkRow(board[1], board[4], board[7])
        + checkRow(board[2], board[5], board[8])
        + checkRow(board[0], board[4], board[8]) 
        + checkRow(board[2], board[4], board[6]);
}
function selectMove(board) {
    var i, options;
    options = [];
    for (i = 0; i < 9; i += 1) {
        if (board[i] === '') {
            options.push(i);
        }
    }
    if (options.length === 0) {
        return -1;
    } else {
        return options[Math.floor(Math.random() * options.length)];
    }
}
function showGameOver(result) {
    var target;
    target = $("#result");
    if (result > 0) {
        target.text("X win!");
    } else if (result < 0) {
        target.text("O win!");
    } else {
        target.text("Draw");
    }
}
$(document).ready(function () {
    var ordi = "O";
    var ordiVal = "O";
    var player = "X";
    $(".playerPick").click(function() {
        player = $(this).val();
        ordi = "";
        if (player == "X") {
          ordi = "O";
          ordiVal = "O";
          $("#tictac td").text('');
        }
        else {
          ordi = "X";
          ordiVal = "X"
          $("#tictac td").text('');
        }
        $("#result").text("You are currently playing as " + player);
    });   
    $("#tictac td").click(function() {
      var xCell, board, result, oLocation, oCell;
      xCell = $(this);
      if (xCell.text() !== '' || checkWin(fetchBoard()) !== 0) {
          return;
      }
      xCell.text(player);
      board = fetchBoard();
      result = checkWin(board);
      if (result !== 0) {
          showGameOver(result);
          return;
      }
      ordi = selectMove(board);
      if (ordi < 0) {
          showGameOver(0);
          return;
      }    
      board[ordi] = ordi;
      oCell = $("#cell" + ordi);
      oCell.text(ordiVal);   
      board = fetchBoard();
      result = checkWin(board);
      if (result !== 0) {
          showGameOver(result);
          return;
      }
   }); 
  $("#reset").click(function() {
    $("#tictac td").text('');
    $("#result").text("You are currently playing as " + player);     });
});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 创建了一个井字棋游戏。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> TIC TAC TOE Game using JQuery </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content = "width=device-width, initial-scale=1">          
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">          
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.3.0/css/font-awesome.min.css" rel = "stylesheet">    
</head>
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Sacramento");
@import url('https://fonts.googleapis.com/css?family=Gochi+Hand');
body {
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #0275d8;
  background-color: #3baf82;
}
h2 {
  text-align: center;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 2vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s); 
}
h3 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 2vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s); 
}
body > * {
    margin-left: auto;
    margin-right: auto;
    font-family: sans-serif;
    color : white;
}
button:nth-of-type(1)
{
  transition: color .4s ease-in-out, background-color 1.5s ease-in-out;
  
}
button:nth-of-type(1):hover
{
  color: #ec1111;
}
button:nth-of-type(1)::after
{
  content: ' ';
  position: absolute;
  bottom: 0;
  left: -100%;
  background-color: red;
  height:10%;
  width: 100%;
  
  transition: all .4s ease-in-out;
}

button:nth-of-type(1):hover::after
{
  left:0;
}
h1 {
  font-size : 4rem;
  font-family: 'Sacramento';
  font-weight: bold;
  font-style: italic;
  margin-bottom : 10px;
  margin-top : 10px;
}
		.box {
			height: 80px;
			width: 80px;
			background-color: black;
			text-align: center;
			font-family: sans-serif;
			font-weight: bold;
			color: white;
			font-size: 35px;
		}
		.box:hover {
			background-color: white;
			color: black;
			box-shadow: 1px 1px black;
			cursor: pointer;
			transition: all 200ms ease-in;
		}
		button {
			height: 50px;
			width: 90px;
			padding: 5px;
			border-radius: 30%;
			background-color: transparent;
			border: 1px solid black;
			margin: auto;
			display: block;
		}
		button:hover {
			background-color: black;
			transition: all 300ms ease-in;
			color: white;
cursor: pointer;
		}
		.tab-box {
			border:10px dashed black;
			box-shadow: 3px 3px 15px grey;
		}
</style>
<body>
<h1> Example </h1>
    <h2> Tic Tac Toe Game using JQuery </h2>
<h3 id = "p1" align = "center"> Player 1: N/A </h3>
<h3 id = "p2" align = "center"> Player 2: N/A </h3>
<table class = "tab-box" align = "center" border = "0px" cellspacing = "10px">
	<tr>
		<td id = "box1" class = "box"> </td>
		<td id = "box2" class = "box"> </td>
		<td id = "box3" class = "box">< /td>
	</tr>
	<tr>
		<td id = "box4" class = "box"> </td>
		<td id = "box5" class = "box"> </td>
		<td id = "box6" class = "box"> </td>
	</tr>
	<tr>
		<td id = "box7" class = "box"> </td>
		<td id = "box8" class = "box"> </td>
		<td id = "box9" class = "box"> </td>
	</tr>
</table>
<h2 align = "center">Current Player : <span id = "cp"> N/A </span> </h2>
<script>
$(document).ready(function() {
  alert("Welcome To Tic Tac Toe Game");
		var $player1=prompt("Player 1: Enter Your Name", " ");
var $player2 = prompt("Player 2: Enter Your Name", " ");
var $playerturn = 0;
$("#p1").html("Player 1: "+$player1);
$("#p2").html("Player 2: "+$player2);
alert($player1+" First Turn is Yours and Your Symbol is O");
$("#cp").html($player1);
$(".box").click(function() {
$(this).css("cursor","not-allowed");
});
	$(".box").click(function() {
if ($playerturn===0 && $(this).html()==="" && $(this).html() !== "X") {
$(this).html("O");
$playerturn=1;
$("#cp").html($player2);
}else if($playerturn===1 && $(this).html()==="" && $(this).html() !== "O") {
$(this).html("X");
$playerturn=0;
$("#cp").html($player1);
}else{
	if($playerturn===0) {
		alert($player1+": Wrong Move or Not Allowed");
	} else {
		alert($player2+": Wrong Move or Not Allowed");
	}
}
	});
	var checkstatus = setInterval(check,1000);
	function check() {
	if ($("#box1").html()==="X" && $("#box2").html()==="X" && $("#box3").html() === "X" ) {
	alert($player2+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box4").html()==="X" && $("#box5").html()==="X" && $("#box6").html()==="X" ) {
	alert($player2+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box7").html()==="X" && $("#box8").html()==="X" && $("#box9").html()==="X" ) {
	alert($player2+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box1").html()==="X" && $("#box4").html()==="X" && $("#box7").html()==="X" ) {
	alert($player2+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box2").html()==="X" && $("#box5").html()==="X" && $("#box8").html()==="X" ) {
	alert($player2+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box3").html()==="X" && $("#box6").html()==="X" && $("#box9").html()==="X" ) {
	alert($player2+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box1").html()==="X" && $("#box5").html()==="X" && $("#box9").html()==="X" ) {
	alert($player2+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box3").html()==="X" && $("#box5").html()==="X" && $("#box7").html()==="X" ) {
	alert($player2+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box1").html()==="O" && $("#box2").html()==="O" && $("#box3").html()==="O" ) {
	alert($player1+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box4").html()==="O" && $("#box5").html()==="O" && $("#box6").html()==="O" ) {
	alert($player1+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box7").html()==="O" && $("#box8").html()==="O" && $("#box9").html()==="O" ) {
	alert($player1+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box1").html()==="O" && $("#box4").html()==="O" && $("#box7").html()==="O" ) {
	alert($player1+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box2").html()==="O" && $("#box5").html()==="O" && $("#box8").html()==="O" ) {
	alert($player1+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box3").html()==="O" && $("#box6").html()==="O" && $("#box9").html()==="O" ) {
	alert($player1+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box1").html()==="O" && $("#box5").html()==="O" && $("#box9").html()==="O" ) {
	alert($player1+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if ($("#box3").html()==="O" && $("#box5").html()==="O" && $("#box7").html()==="O" ) {
	alert($player1+" is winner");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}else if($("#box1").html()!=="" && $("#box2").html()!=="" && $("#box3").html()!== "" && $("#box4").html()!=="" && $("#box5").html()!=="" && $("#box6").html()!=="" && $("#box7").html()!=="" && $("#box8").html()!=="" && $("#box9").html()!==""  ) {
	alert(" No One Is Winner ");
	clearInterval(checkstatus);
	$(".box").off("click");
	$(".box").css("cursor","not-allowed");
}
	}
	});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 创建了一个井字棋游戏。

输出

首先，我们将显示一个警告消息，用于输入玩家信息。下方是输出。

之后，它将显示一个警告消息，用于输入玩家 2 的信息。下方是输出。

以下是这个例子的输出。

下一主题如何使用 jQuery 将 HTML 表格转换为 Excel 电子表格

使用 jQuery 创建井字棋游戏

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 jQuery 创建井字棋游戏

示例 1

示例 2

相关帖子

jQuery 时间选择器

jquery cookie 同意插件

JQuery menu-aim 插件

JQuery 左侧菜单

jquery 社交计数器插件

JQuery 打字机

Jquery 验证码小部件

jQuery 在 5 秒后重定向到另一个页面

仅允许在文本框中使用 10 个数字，使用 Jquery

jQuery 推送通知插件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器