Javascript SVG中的线条绘制
我正试着编写一个井字游戏。在这段代码中，一切正常，但当我想添加两行作为交叉符号时（在这段代码中仅一行为例），它不会在目标svg中绘制。似乎添加了元素，因为如果我尝试在一行中画3个十字，代码返回“X”获胜，但a看不到任何十字。所以问题似乎只是在绘画上。谁知道问题出在哪里Javascript SVG中的线条绘制,javascript,svg,Javascript,Svg,我正试着编写一个井字游戏。在这段代码中，一切正常，但当我想添加两行作为交叉符号时（在这段代码中仅一行为例），它不会在目标svg中绘制。似乎添加了元素，因为如果我尝试在一行中画3个十字，代码返回“X”获胜，但a看不到任何十字。所以问题似乎只是在绘画上。谁知道问题出在哪里 <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var filled; var s
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var filled;
var symbol_type;
var VyherniKomb;
var turn = 0;
var targetsvg;
var c;
var cxt;
var filledField = 0;
var w;
var y;
window.onload = function() {
filled = new Array();
symbol_type = new Array();
VyherniKomb = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (var m = 0; m <= 8; m++) {
filled[m] = false;
symbol_type[m] = '';
}
}
function svgEvent(svgNumber) {
targetsvg = "svg" + svgNumber;
c = document.getElementById(targetsvg);
if (filled[svgNumber - 1] == false) {
if (turn % 2 == 0) {
var svg = c;
var xmlns = "http://www.w3.org/2000/svg";
var cross = document.createElementNS('http://www.w3.org/2000/svg', "line");
cross.setAttribute("id", "line1");
cross.setAttribute("x1", "5");
cross.setAttribute("y1", "15");
cross.setAttribute("x2", "15");
cross.setAttribute("y2", "5");
cross.setAttribute("stroke", "black");
symbol_type[svgNumber - 1] = 'X';
} else {
var svg = c;
var xmlns = "http://www.w3.org/2000/svg";
var kolecko = document.createElementNS(xmlns, "circle");
kolecko.setAttribute("cx", 25);
kolecko.setAttribute("cy", 25);
kolecko.setAttribute("r", 15);
kolecko.style.stroke = "#111"
kolecko.style.strokeWidth = "2px"
kolecko.style.fill = "none"
svg.appendChild(kolecko);
symbol_type[svgNumber - 1] = 'O';
}
turn++;
filled[svgNumber - 1] = true;
filledField++;
checkForWinners(symbol_type[svgNumber - 1]);
if (filledField == 9) {
alert("Rem�za");
location.reload(true);
}
} else {}
}
function checkForWinners(symbol) {
for (var a = 0; a < VyherniKomb.length; a++) {
if (symbol_type[VyherniKomb[a][0]] == symbol && symbol_type[VyherniKomb[a][1]] == symbol && symbol_type[VyherniKomb[a][2]] == symbol) {
alert(symbol + " Vyhral");
newGame();
}
}
}
function newGame() {
y = confirm("hr�t znovu?");
if (y == true) {
alert("Start!");
location.reload(true);
} else {
alert("Hezk� den");
}
}
</script>
</head>
<body>
<h1>Hra</h1>
<h2>Tic-Tac-Toe</h2>
<svg id="svg1" width="50" height="50" style="border:3px solid red" onclick="svgEvent(1)"></svg>
<svg id="svg2" width="50" height="50" style="border:3px solid red" onclick="svgEvent(2)"></svg>
<svg id="svg3" width="50" height="50" style="border:3px solid red" onclick="svgEvent(3)"></svg>
<br/>
<svg id="svg4" width="50" height="50" style="border:3px solid red" onclick="svgEvent(4)"></svg>
<svg id="svg5" width="50" height="50" style="border:3px solid red" onclick="svgEvent(5)"></svg>
<svg id="svg6" width="50" height="50" style="border:3px solid red" onclick="svgEvent(6)"></svg>
</br>
<svg id="svg7" width="50" height="50" style="border:3px solid red" onclick="svgEvent(7)"></svg>
<svg id="svg8" width="50" height="50" style="border:3px solid red" onclick="svgEvent(8)"></svg>
<svg id="svg9" width="50" height="50" style="border:3px solid red" onclick="svgEvent(9)"></svg>
</body>
</html>
var填充；
var符号类型；
var VyherniKomb；
var-turn=0；
var-targetsvg；
var c；
var-cxt；
var filledField=0；
var-w；
变量y；
window.onload=函数（）{
填充=新数组（）；
symbol_type=新数组（）；
VyherniKomb=[
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
对于（var m=0；m您有几个错误。首先，您没有将该行附加到svg。其次，您只有一行，而不是两行，最后，该行相对较小。下面是您的代码的工作版本
var填充；
var符号类型；
var VyherniKomb；
var-turn=0；
var-targetsvg；
var c；
var-cxt；
var filledField=0；
var-w；
变量y；
window.onload=函数（）{
填充=新数组（）；
symbol_type=新数组（）；
VyherniKomb=[
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
对于（var m=0；m您有几个错误。首先，您没有将该行附加到svg。其次，您只有一行，而不是两行，最后，该行相对较小。下面是您的代码的工作版本
var填充；
var符号类型；
var VyherniKomb；
var-turn=0；
var-targetsvg；
var c；
var-cxt；
var filledField=0；
var-w；
变量y；
window.onload=函数（）{
填充=新数组（）；
symbol_type=新数组（）；
VyherniKomb=[
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
对于（var m=0；m您粘贴的源代码很难阅读。您能通过模块化一点并确保缩进正确完成来帮助社区改进它吗？谢谢！您粘贴的源代码很难阅读。您能通过模块化一点并确保缩进正确完成来帮助社区改进它吗正确地完成了吗？谢谢！