抖音游戏在X和O之间切换
Tic tac toe game switching between X and O
我正在制作一个Tic-Tac-Toe，但我有点拘泥于在十字圆之间切换（正如你在var列表和函数img中看到的那样）。我该如何让它发挥作用？
Javascript代码
varcode
var vak1 = document.getElementById("vak1");
var vak2 = document.getElementById("vak2");
var vak3 = document.getElementById("vak3");
var vak4 = document.getElementById("vak4");
var vak5 = document.getElementById("vak5");
var vak6 = document.getElementById("vak6");
var vak7 = document.getElementById("vak7");
var vak8 = document.getElementById("vak8");
var vak9 = document.getElementById("vak9");
var circle = "../img/circle.jpg";
var cross = "../img/cross.jpg";
var empty = "../img/empty.jpg";
var Player = document.getElementById("player");
第一个函数说轮到谁了。
function player() {
"use strict";
if (Player.innerHTML == 1) {
Player.innerHTML = 2;
window.alert("Speler 2 is aan de beurt");
} else {
Player.innerHTML = 1;
window.alert("Speler 1 is aan de beurt");
}
}
应该在x和o图像之间切换的函数。
function img(HTMLTableDataCellElement) {
"use strict";
if (document.getElementById(HTMLTableDataCellElement).className === "leeg") {
document.getElementById(HTMLTableDataCellElement).src = cross;
document.getElementById(HTMLTableDataCellElement).className = "kruis";
player();
} else {
document.getElementById(HTMLTableDataCellElement).src = circle;
document.getElementById(HTMLTableDataCellElement).className = "rondje";
player();
}
}
HTML代码：
<head>
<title>Boter, Kaas en Eieren</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="mainContainer">
<h1>Boter, Kaas & Eieren</h1>
<div id="speelveld">
<table border="0">
<tr>
<td><img class="leeg" id="vak1" alt="" title="" onclick="img(this.id);" src="img/empty.jpg" /></td>
<td><img class="leeg" id="vak2" alt="" title="" onclick="img(this.id);" src="img/empty.jpg" /></td>
<td><img class="leeg" id="vak3" alt="" title="" onclick="img(this.id);" src="img/empty.jpg" /></td>
</tr>
<tr>
<td><img class="leeg" id="vak4" alt="" title="" onclick="img(this.id);" src="img/empty.jpg" /></td>
<td><img class="leeg" id="vak5" alt="" title="" onclick="img(this.id);" src="img/empty.jpg" /></td>
<td><img class="leeg" id="vak6" alt="" title="" onclick="img(this.id);" src="img/empty.jpg" /></td>
</tr>
<tr>
<td><img class="leeg" id="vak7" alt="" title="" onclick="img(this.id);" src="img/empty.jpg" /></td>
<td><img class="leeg" id="vak8" alt="" title="" onclick="img(this.id);" src="img/empty.jpg" /></td>
<td><img class="leeg" id="vak9" alt="" title="" onclick="img(this.id);" src="img/empty.jpg" /></td>
</tr>
</table>
</div> <!-- EINDE SPEELVELD CONTAINER -->
<div id="game-info">
<h1>Aan beurt</h1>
<table class="players-turn" border="0">
<tr>
<td><img width="25" height="25" alt="" title="" src="img/cross.jpg" /></td>
<td>Speler</td>
<td id="player">1</td>
</tr>
</table> <!-- EINDE SPELER AAN ZET TABEL -->
<h1>Scores</h1>
<table class="rounds-info">
<tr>
<td><img width="15" height="15" alt="" title="" src="img/cross.jpg" /> Speler 1</td>
<td>0</td>
</tr>
<tr>
<td><img width="15" height="15" alt="" title="" src="img/circle.jpg" /> Speler 2</td>
<td>0</td>
</tr>
<tr>
<td>Aantal rondes</td>
<td>0</td>
</tr>
</table> <!-- EINDE INFO TABEL -->
<button class="game-button">Start spel</button>
</div> <!-- EINDE GAME-INFO CONTAINER -->
</div> <!-- EINDE MAINCONTAINER -->
<script type="text/javascript" src="js/bke.js"></script>
</body>
您需要在img()函数中检查玩家的转向。这应该有效：
function img(HTMLTableDataCellElement) {
"use strict";
if(Player.innerHTML == 1) {
document.getElementById(HTMLTableDataCellElement).src = cross;
document.getElementById(HTMLTableDataCellElement).className = "kruis";
player();
} else {
document.getElementById(HTMLTableDataCellElement).src = circle;
document.getElementById(HTMLTableDataCellElement).className = "rondje";
player();
}
}
你可以在这个JS Fiddle中看到它的工作：https://jsfiddle.net/j5nmmvdt/1/
一个更完整的解决方案是将当前播放器存储为变量，而不是<td id="player">元素中的HTML。您还可以优化img()函数，以便在kruis-en-rondje之间切换，而无需重复相同的代码。这样的东西会起作用：
function img(HTMLTableDataCellElement) {
"use strict";
if(HTMLTableDataCellElement.className == "leeg") {
HTMLTableDataCellElement.src = playerData[currentPlayer-1].src;
HTMLTableDataCellElement.className = playerData[currentPlayer-1].className;
player();
}
}
var playerData = [
{
src: "cross",
className: "kruis"},
{
src: "circle",
className: "rondje"}
];
var vak1 = document.getElementById("vak1");
var vak2 = document.getElementById("vak2");
var vak3 = document.getElementById("vak3");
var vak4 = document.getElementById("vak4");
var vak5 = document.getElementById("vak5");
var vak6 = document.getElementById("vak6");
var vak7 = document.getElementById("vak7");
var vak8 = document.getElementById("vak8");
var vak9 = document.getElementById("vak9");
var circle = "../img/circle.jpg";
var cross = "../img/cross.jpg";
var empty = "../img/empty.jpg";
var currentPlayer = 1;
function player() {
"use strict";
currentPlayer = (currentPlayer == 2) ? currentPlayer = 1 : currentPlayer = 2;
document.getElementById("player").innerHTML = currentPlayer;
window.alert("Speler "+currentPlayer+" is aan de beurt");
}
您还希望通过只传递this（对象引用）而不是图像id（字符串）来清理HTML和JS。像这样：<img class="leeg" id="vak2" alt="" title="" onclick="img(this);" src="img/empty.jpg" />
我已经更新了JS fiddle，所以你可以在这里看到它是如何工作的：https://jsfiddle.net/j5nmmvdt/3/Hoop dat het helpt u！
如果没有演示，很难说，但问题似乎是，实际上，根据玩家的不同，图像之间没有切换。清理一点后，你的代码看起来像这样：
function img(cell_id) {
"use strict";
var selCell = document.getElementById(cell_id);
if (selCell.className === "leeg") {
selCell.src = cross;
selCell.className = "kruis";
player();
} else {
selCell.src = circle;
selCell.className = "rondje";
player();
}
}
据我所见，它的作用是：
- 检查单元格是否为空
- 如果是，请放置一个十字架
- 如果没有，则放置一个圆圈
您需要的是：
- 检查单元格是否为空
- 如果没有，什么也不做
- 如果是：
- 如果轮到1号球员，传中
- 如果轮到玩家2，放置圆圈
所以，像这样的东西：
function img(cell_id) {
"use strict";
var selCell = document.getElementById(cell_id);
if (selCell.className === "leeg") {
if (Player.innerHTML == 1) {
selCell.src = cross;
selCell.className = "kruis";
} else {
selCell.src = circle;
selCell.className = "rondje";
}
player();
}
}
附言：我用"cell_id"替换了"HTMLTableDataCellElement"，因为您没有将HTMLTableDataCellElement对象传递给函数。事实上，您只传递了一个id，因此调用传递的变量HTMLTableDataCellElement是令人困惑的。
相关文章：
- 函数参数中的数据与指定变量之间的任何性能差异
- 全局变量和全局对象的属性之间有什么区别吗
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- java.net和javascript之间正则表达式的差异
- JavaScript中的函数和对象之间没有区别吗?
- 获取@ResponseBody的一部分作为主干和Spring MVC控制器之间的参数
- Jquery在函数之间传递表行
- 根据某些条件在视图之间切换
- 在控制器和数据对象之间同步数据
- 如何有效地将游戏数据存储在URL查询字符串中
- d3中堆栈函数和嵌套函数之间的差异
- JQuery:在页面之间滑动
- 如何使用JavaScript查找1和N之间的所有数字的总和
- 操作放置在画布上的元素之间的连接
- 在下划线中使用_(obj）.map(callback）和_.map(obj，callback）之间的区别
- jquery在表单之间切换
- Javascript游戏输入失去焦点
- 回合制游戏，你如何决定玩家和电脑之间的回合
- 抖音游戏在X和O之间切换
- 如何使用 DOM 和 JavaScript 在游戏的 3 个不同级别之间切换?例如，简单、中等和困难
