0
私はTic Tac Toeのゲームをコーディングしようとしています。このコードでは、すべて正常に動作していますが、クロスのシンボルとして2行追加する場合（このコードでは1つだけなど）、ターゲットのSVGには描画されません。それは、要素が追加されたようです。なぜなら、3行の線を引くと、コードは "X"の勝利を返しますが、aは十字を見ることができないからです。だから、問題は描画にしかないようです。どこに問題があるのか知っている人は誰ですか？SVGの描画線
<!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>
あなたが貼り付けられているあなたのソースコードは読みにくいです。それを少しずつモジュール化し、インデントが適切に行われていることを確認してコミュニティの改善に役立ててください。ありがとう！ – EagleRainbow