两人使用jQuery的TicTacToe 2D游戏(译文)
By robot-v1.0
本文链接 https://www.kyfws.com/games/two-player-tictactoe-d-game-using-jquery-zh/
版权声明 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
- 7 分钟阅读 - 3340 个词 阅读量 0两人使用jQuery的TicTacToe 2D游戏(译文)
原文地址:https://www.codeproject.com/Articles/814420/Two-Player-TicTacToe-D-Game-using-jQuery
原文作者:saadixl
译文由本站 robot-v1.0 翻译
前言
Two player tictactoe 2D game using jQuery
两人使用jQuery的tictactoe 2D游戏
介绍(Introduction)
井字游戏是一款非常简单的铅笔游戏.在此示例中,我展示了如何在HTML上使用jQuery构建2D Tic-Tac-Toe.(Tic-Tac-Toe is a very simple paper-pencil game. In this example, I’ve shown how to build a 2D Tic-Tac-Toe using jQuery on HTML.)
背景(Background)
井字游戏大约是Os和Xs.游戏规则很简单.在3x3网格上,玩家必须水平/垂直/对角线匹配3个连续的Os或Xs.我设计了一个非常简单的界面,并在游戏中使用了jQuery.在下一节中,我将解释代码.(Tic-Tac-Toe is about Os and Xs. The rule of the game is very simple. On a 3x3 grid, a player has to match 3 consecutive Os or Xs horizontally/vertically/diagonally. I’ve designed a very simple interface and used jQuery for the gameplay. In the following section, I’m going to explain the codes.)
使用代码(Using the Code)
在这里,我将解释代码块.(Here, I will explain the blocks of code.)
<!DOCTYPE html>
<html>
<head>
<title>TicTacToe</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="game-wrap">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<div id="panel">
<input type="text" id="player-1-inp" placeholder="Enter player 1">
<input type="text" id="player-2-inp" placeholder="Enter player 2">
<button id="playButton">Play!</button>
<h1 id="board"></h1>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
在这里,我使用简单的HTML创建了3x3网格(Here, I’ve created a 3x3 grid using simple HTML) div
s.我走了三排(s. I took three row) div
s和每一行内(s and inside every row) div
,我已经吃了三个(, I’ve taken three col) div
s.我将行和列的名称保持不变,因为我的计划是稍后使用此结构作为2D网格.在网格下,我保留了一个面板(s. I kept the rows and cols name same because my plan is to use this structure as a 2D grid later. Under the grid, I’ve kept a panel) div
玩家将在其中设置自己的姓名,开始游戏并查看游戏状态消息.(where players will set their name, start the game and see game state messages.)
body{
background: #323232;
}
#game-wrap{
width: 450px;
height: 455px;
margin: 0 auto;
background: gray;
margin-top: 50px;
border-left: 5px solid gray;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
.row{
width: 100%;
height: 150px;
}
.col{
width: 32%;
height: 145.5px;
border: 3px solid white;
float: left;
text-align: center;
font-size: 150px;
font-family: helvetica;
color: white;
cursor: pointer;
}
.matched{
color: maroon;
}
.player-1-color{
color: maroon;
}
.col:nth-child(1){
border-left: none;
}
.col:nth-child(3){
border-right: none;
}
.row:nth-child(1) .col{
border-top: none;
margin-top: 3px;
}
.row:nth-child(3) .col{
border-bottom: none;
margin-bottom: 3px;
}
#panel{
width: 435px;
padding: 10px;
margin: 0 auto;
background: brown;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
#board{
font-size: 30px;
font-family: helvetica;
color: whitesmoke;
margin-top: 10px;
}
这是游戏的CSS设计.该代码说明了自己.我假设使用jQuery的人都了解CSS.(This is the CSS design of the game. The code explains itself. I assume that people working with jQuery have knowledge about CSS.)
jQuery部分(The jQuery Part)
在这一部分中,我将分别编写多个代码块,并分别进行解释.但他们都是同一个人(In this part, I will write multiple blocks of code respectively and I will explain them seperately. But all of them are from the same)**.js(.js)**文件.最初,我们需要创建一些函数并进行一些初始化,然后才能进入主要游戏玩法.(file. Initially, we need to create some functions and do some initialization before we jump into the main gameplay.)
var player1Name="" , player2Name="", turn = "";
var grid = [[0,0,0],[0,0,0],[0,0,0]];
var hasWinner = 0, moveCount=0;
function boardMsg(x){
return $("#board").text(x);
}
在这里,我们为球员名称添加了一些新变量,用于跟踪比赛的进行情况,用于映射玩家移动的3x3数组,用于查找获胜者的标志变量,用于计算移动总数(最大)的标志变量(Here, we take some new variables for player names, for keeping track of game turn, a 3x3 array for mapping the moves of players, flag variables for finding winners, flag variables for counting the total number of moves (max) moveCount
将会(will be) 9
),最后是在面板上书写的函数.() and finally a function for writing on the panel.)
function setTurn(){
var r = Math.floor((Math.random() * 2) + 1);
hasWinner=0;
if(r==1){
turn = player1Name;
boardMsg(player1Name+"'s turn now!");
}
else{
turn = player2Name;
boardMsg(player2Name+"'s turn now!");
}
}
然后,我们编写了一个函数,用于为玩家随机设置回合.因为每次我们都不想给玩家第一个机会采取行动.使用随机数,我们设置转弯,还将获胜者标志设置为(Then, we write a function for setting the turn randomly for player. Because everytime we don’t want to give a player the first chance to make a move. Using random number, we set the turn and also we set the winner flag into) 0
因为游戏才刚刚开始.(as the game has begun just now.)
function init(){
turn = "";
grid = [[0,0,0],[0,0,0],[0,0,0]];
boardMsg("");
$(".col").map(function() {
$(this).text("");
}).get();
hasWinner = 0;
moveCount=0;
}
现在,我们必须编写这样的初始化函数,因为如果游戏已经第二次或更长时间玩了,那么每次玩家重玩时,我们都需要清除旧值,例如转弯,网格阵列,面板消息,网格Os/Xs和标志.(Now, we have to write an initializing function like this because if the game has been playing for the second time or more than that, everytime the players replay, we need to clear the old values like the turn, grid array, panel messages, the grids Os/Xs and the flags.)
$("#playButton").click(function (){
if(hasWinner==1){
init();
}
player1Name = $("#player-1-inp").val();
player2Name = $("#player-2-inp").val();
if(player1Name=="" || player2Name==""){
alert("Please set player all the names.");
return;
}
setTurn();
});
此功能是播放按钮的点击事件,用于从输入标签中获取播放器的值.如果有赢家,则表示此单击是"再次播放"按钮.因此,我们再次初始化必要的值.然后,我们将检查玩家是否设置了姓名.最后,我们开始了.(This function is the click event of the play button for taking the values of the players from the input tag. If there was a winner, that means this click is for the play again button. So we initalize the necessary values again. And then, we will check if the players set their names. Finally, we set the turn.)
$(".col").click(function (){
if(player1Name=="" || player2Name==""){
alert("Please set player all the names.");
return;
}
var row = $(this).parent().index();
var col = $(this).index();
if(grid[row][col]!==0){
alert("This position is taken. Please try other position.");
return;
}
if(hasWinner==1){
alert("Please click play again");
return;
}
if(turn==player1Name){
moveCount++;
$(this).text("O");
grid[row][col] = 1;
var ifWon = winnerCheck(1,player1Name);
if(!ifWon){
if(moveCount>=9){
boardMsg("Match Drawn!");
moveCount=0;
$("#playButton").text("Play again");
hasWinner=1;
return;
}else{
turn = player2Name;
boardMsg(player2Name+"'s turn now!");
}
return;
}
else{
return;
}
}
else if(turn==player2Name){
moveCount++;
$(this).text("X");
grid[row][col] = 2;
var ifWon = winnerCheck(2,player2Name);
if(!ifWon){
if(moveCount>=9){
boardMsg("Match Drawn!");
moveCount=0;
$("#playButton").text("Play again");
hasWinner=1;
return;
}else{
turn = player1Name;
boardMsg(player1Name+"'s turn now!");
}
return;
}
else{
return;
}
}
});
这是网格单元的点击事件.在这里,我们在每一个上使用jQuery类选择器click函数(This is the click event of the grid units. Here we use the jQuery class selector click function on every) .col
类.如果玩家点击任何(class. If a player clicks on any) .col
div
,那么我们将有条件检查谁正在玩.第一个条件是(, then we will have conditions for checking who is playing now. The first condition is for) player1
.然后,我们使用jQuery获取网格单元的行列位置(. Then, we take the row-col position of the grid unit using the jQuery) index()
和(and) parent()
.如果采取这个立场,那么我们将前进.否则,我们将检查转牌以确定哪个玩家正在玩.在检查转弯后,我们将降低举动计数,因为这是一次成功的举动.然后我们将1放入网格的[row] [col]位置,而玩家只是单击真实网格的[row] [col]位置.我们将1和玩家名称传递到接下来的胜利检查功能中.如果玩家没有获胜,那么我们将检查我们是否失手并且游戏是否已平局.如果已绘制,则我们将向面板发送消息并更改标志值.在这里,尽管游戏已绘制,但我将1设置为(. If the position is taken, then we will move forward. Or we will check the turn to determine which player is playing. After checking the turn, we will increament the move count because this is one successful move. Then we put 1 into the grids [row][col] position while the player just clicked the [row][col] position of the real grid. We’ll pass 1 and the player name into our win checking function which is coming next. If the player does not win, then we will check if we are out of moves and the game has been drawn or not. If it’s drawn, then we will send message to the panel and change the flag values. Here, though the game is drawn, I’ve set 1 into) hasWinner
标记,因为在(flag because in the) setTurn
函数,我们需要传递条件(function, we need to pass the condition for) init()
如果我们需要创建一个新游戏.然后,如果不是平局,那么我们将回合传递给第二个玩家,并向面板发送消息.在抽签条件之外,如果玩家获胜,那么什么也不会发生,只会停止该功能.所以仔细检查我写了两本书(if we need to create a new game. Then if it’s not a draw, then we pass the turn to the second player and send a message to the panel. And out of the draw condition, if the player won then nothing will happen just it will stop the function. So carefully check that I’ve written two) if
两个玩家的条件.在条件内部,除了某些值(例如条件是针对玩家1的值)之外,其他所有内容都相同,我们将1放入网格中,在获胜检查功能中传递1和玩家1的名字,然后轮到玩家2. 2,所有这些事情将是相反的.(conditions for two players. Inside the conditions, everything is the same except some values like while the condition is for player 1, we are putting 1 into the grid, passing 1 and player 1s name inside the win checking function and giving the turn to the player 2. For player 2, all these things will be opposite.)
function winnerCheck(n,playerName){
if(
(grid[0][0]==n && grid[0][1]==n && grid[0][2]==n) ||
(grid[1][0]==n && grid[1][1]==n && grid[1][2]==n) ||
(grid[2][0]==n && grid[2][1]==n && grid[2][2]==n) ||
(grid[0][0]==n && grid[1][0]==n && grid[2][0]==n) ||
(grid[0][1]==n && grid[1][1]==n && grid[2][1]==n) ||
(grid[0][2]==n && grid[1][2]==n && grid[2][2]==n) ||
(grid[0][0]==n && grid[1][1]==n && grid[2][2]==n)||
(grid[0][2]==n && grid[1][1]==n && grid[2][0]==n)
){
boardMsg(playerName+" won the game!");
hasWinner = 1;
moveCount=0;
$("#playButton").text("Play again");
return true;
}
return false;
}
最后一个功能是检查获胜者.在此函数中,我们传递了一个数字和玩家名称作为参数.然后我们检查是否在网格上,如果在水平/垂直/对角线上有连续的三个(The last function is for checking the winner. In this function, we have passed a number and the player name as a parameter. Then we check that if on the grid, if horizontally/vertically/diagonally there are three consecutive) n
s.如果符合任何条件,则该玩家赢得了比赛.因此,当我们在函数中传递1和玩家1的名称时,它将检查玩家1是否赢得了游戏,而当我们传递2和玩家2s的名称时,它将检查玩家2是否赢得了游戏.然后,我们将消息发送到面板并更新标志.因为UI应该立即停止游戏.然后,我们将按钮的文本更改为"再次播放".最后,我们返回(s. If there is any one condition matched, then that player won the game. So while we pass 1 and player 1 name inside the function, it will check if player 1 won the game and while we pass 2 and player 2s name, then it will check if player 2 won the game. Then we send message to the panel and update the flags. Because the UI should stop the game now. Then, we change the text of the button into ‘Play again’. Finally, we return) true
.如果所有8个条件都满足(. If all 8 conditions are) false
,然后我们返回(, then we return) false
.根据返回值,网格单元的单击功能将起作用,这已在前面进行了解释.(. According to the return value, the click function of the grid units will work which I’ve explained earlier.)
玩这个游戏(Play this game on) jsfiddle(jsfiddle) .(.)
许可
本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。
CSS HTML HTML5 Javascript 新闻 翻译