javascript - Javascript通过一个函数多次写表
问题描述
我正在尝试学习 js,我决定创建一些简单的十字架游戏圈。这是代码:
(JS)
var tab = [[0,0,0],[0,0,0],[0,0,0]];
var x = 0;
var y = 0;
var xz = 0;
var yz = tab[0].length - 1;
var xu = 1;
var yu = 1;
var val = '';
var gd = 0;
var body = document.body;
var div = document.getElementById("content");
var tbl = document.createElement('table');
tbl.border = '1px';
tbl.style.width = '75px';
div.insertAdjacentHTML('beforeend', 'Actually chosen coordinates: ' + xu + ',' + yu); //Easter egg for smartest- why Quokka plugin in VS Code is returning 'Cannot read property 'insertAdjacentHTML' of null'. When none of things used in this line is null. :)
function go() {
//if (tab[xu][yu] == 0) {
//system to secure writing on already used cells
get();
var yu = 1;
var xu = 1;
//} else {
//div.insertAdjacentHTML('beforeend', 'This cell is used.');
//}
draw();
var x = 0;
var y = 0;
var xz = 0;
var yz = tab[0].length - 1;
var val = '';
}
function get() {
tab[xu][yu] = 2;
if(gd < 5){
do{
x = Math.floor(Math.random()*tab.length);
y = Math.floor(Math.random()*tab[0].length);
}while(tab[x][y]!=0)
gd++;
tab[x][y] = 1;
}else{
document.write('<h3>GAME OVER</h3>');
}
}
function draw() {
div.innerHTML = '<p>Remember U are X.</p>';
while (xz < tab.length) {
var tr = tbl.insertRow();
while (yz >= 0) {
switch (tab[xz][yz]) {
case 0:
val = '.';
break;
case 1:
val = 'O';
break;
case 2:
val = 'X';
break;
}
var td = tr.insertCell();
td.appendChild(document.createTextNode(val));
yz--;
}
yz = tab[0].length - 1;
xz++;
}
div.appendChild(tbl);
div.insertAdjacentHTML('beforeend', 'Actually chosen coordinates: ' + xu + ',' + yu);
}
function drawt() {
div.innerHTML = '<p>Remember U are X.</p>';
while (xz < tab.length) {
var tr = tbl.insertRow();
while (yz >= 0) {
switch (tab[xz][yz]) {
case 0:
val = '.';
break;
case 1:
val = 'O';
break;
case 2:
val = 'X';
break;
}
var td = tr.insertCell();
td.appendChild(document.createTextNode(val));
yz--;
}
yz = tab[0].length - 1;
xz++;
}
div.appendChild(tbl);
div.insertAdjacentHTML('beforeend', 'Actually chosen coordinates: ' + xu + ',' + yu);
}
function Right() {
if (xu < 2) {
xu++;
} else {
div.insertAdjacentHTML('beforeend', 'Nope');
}
draw();
var x = 0;
var y = 0;
var xz = 0;
var yz = tab[0].length - 1;
var val = '';
}
function Left() {
if (xu > 0) {
xu--;
} else {
div.insertAdjacentHTML('beforeend', 'Nope');
}
draw();
var x = 0;
var y = 0;
var xz = 0;
var yz = tab[0].length - 1;
var val = '';
}
function Up() {
if (yu < 2) {
yu++;
} else {
div.insertAdjacentHTML('beforeend', 'Nope');
}
draw();
var x = 0;
var y = 0;
var xz = 0;
var yz = tab[0].length - 1;
var val = '';
}
function Down() {
if(yu > 0){
yu--;
} else {
div.insertAdjacentHTML('beforeend', 'Nope');
}
draw();
var x = 0;
var y = 0;
var xz = 0;
var yz = tab[0].length - 1;
var val = '';
}
(HTML)
<!DOCTYPE html>
<head>
<title>karta</title>
</head>
<body>
<div id="content">
<p>Jesteś X.</p>
<table border = '1px' width = '75px'>
<tr>
<td>.</td>
<td>.</td>
<td>.</td>
</tr>
<tr>
<td>.</td>
<td>.</td>
<td>.</td>
</tr>
<tr>
<td>.</td>
<td>.</td>
<td>.</td>
</tr>
</table>
</div>
<a id="myLink" href="#" onclick="go()">Accept</a><br>
<a id="myLink" href="#" onclick="Right()">Right</a><br>
<a id="myLink" href="#" onclick="Left()">Left</a><br>
<a id="myLink" href="#" onclick="Up()">Up</a><br>
<a id="myLink" href="#" onclick="Down()">Down</a>
<script src = kod.js></script>
</body>
</html>
我发现要写表格(我制作 3x3 表格,只在单元格中写“X”和“O”),我需要制作类似函数绘制的东西。
所以它起作用了......第一次。当我再次使用此功能时,它不会绘制任何东西(我检查了选项卡值已更改),但draw()
绘制了相同的东西或什么也没做。当然,我对如何显示此表的所有想法持开放态度,但仍然想知道什么不起作用。
可能好主意是使用与我制作当前表格相同的方式并向所有单元格添加 ID,而不是向这些单元格添加值(但这只是疲倦的初学者的一些可能愚蠢的想法,很抱歉没有自己检查它,但无论如何我想要询问这第一件事所以......)。
解决方案
从实际的方法来看,这似乎并不是您真正想要使用 JS 的事情。
我会为带有 X、O 或什么都没有的元素创建一些 css 类。
然后将轮到谁的状态存储在JS中。当用户点击一个元素时,为该轮添加适当的类到元素。
您还可以制作一个获胜检查器功能来尝试自动计算谁获胜
推荐阅读
- python - 使用循环在列表中创建列表
- php - Joomla 控制面板给出错误,其他一切正常
- flowtype - 具有常见传播模式的最新流程中的“指数级大量案例”错误
- python - Python:如何更改函数中全局变量的值?
- regex - 为 td 代理编写正则表达式
- python - 准确度等于 0 CNN Python Keras
- java - 如何在 Java 8 中的 Student 列表中从列表中找到前 n 个最受欢迎的运动
- python-3.x - Raspberry pi - Tensorflow 如何实时检测人员和计数?
- docker - 如何将 docker 卷目录复制到主机
- powerquery - Power Query - 每个月重复行