javascript - 在 SVG 中绘制线条

标签 javascript svg

我正在尝试编写 Tic Tac Toe 游戏代码。在这段代码中，一切工作正常，但是当我想添加两行作为十字符号时(在这段代码中只有一条)，它不会在目标 svg 中绘制。似乎添加了该元素，因为如果我尝试在线绘制 3 个十字，代码会返回“X”获胜，但 a 看不到任何十字。所以看来问题只是出在绘图上。谁知道问题出在哪里吗？

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

最佳答案

您有几个错误。首先，您没有将该行附加到 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>

关于javascript - 在 SVG 中绘制线条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37532991/

上一篇：javascript - 从 cookie 重新加载 Google 地点数据

下一篇：javascript - TypeScript 类 .drawImage

相关文章：

javascript - <div> 下面有高斯模糊

javascript - 使用 raphael 缩放多条路径

javascript - 使用 $(document).ready(function() 访问另一个 js 文件中的函数

javascript - 有没有更有效的方法来过滤这个对象数组？

javascript - 如何在 jQuery 中仅打印两个特定日期之间的工作日日期？

javascript - 将类添加到 SVG 路径

html - 如何使用 CSS 嵌入来自 d3js 的图表

javascript - Amcharts 指南

javascript - 不同的对象类型

macos - 如何在 XCode 6.3.1 中显示 .svg 图像

©2024 IT工具网  联系我们