SVG中的绘图线

时间：2016-05-30 20:06:01

标签： javascript svg

我试图编写Tic Tac Toe游戏。在这段代码中，一切都运行正常，但是当我想添加两行作为交叉符号时（例如在这段代码中只有一行），它不会在目标svg中绘制。似乎添加了元素，因为如果我尝试在行中绘制3个十字，代码将返回＆＃34; X＆＃34;获胜，但不能看到任何十字架。所以似乎问题只在于绘图。谁知道问题出在哪里？

<!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>

1 个答案:

答案 0 :(得分：2)

你有几个错误。首先，你没有将线附加到svg。其次，你只有一条线，而不是两条线，最后线条相对较小。这是您的代码的工作版本。

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 line = document.createElementNS('http://www.w3.org/2000/svg', "line");
      line.setAttribute("id", "line1");
      line.setAttribute("x1", 37);
      line.setAttribute("y1", 13);
      line.setAttribute("x2", 13);
      line.setAttribute("y2", 37);
      line.setAttribute("stroke", "black");
      line.style.stroke = "#111"
      line.style.strokeWidth = "2px"
      svg.appendChild(line);

      var line = document.createElementNS('http://www.w3.org/2000/svg', "line");
      line.setAttribute('id', 'line2');
      line.setAttribute('x1', 13);
      line.setAttribute('y1', 13);
      line.setAttribute("x2", 37);
      line.setAttribute("y2", 37);
      line.setAttribute("stroke", "black");
      line.style.stroke = "#111"
      line.style.strokeWidth = "2px"
      svg.appendChild(line);

      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");
  }

}
<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>

相关问题
最新问题