“绘图”不同大小的井字游戏板答案

【问题标题】："Drawing" different sized Tic-tac-toe board“绘图”不同大小的井字游戏板
【发布时间】：2014-09-28 12:54:21
【问题描述】：

所以我正在使用 JavaScript 和 HTML 作为学校项目制作井字游戏，老师要求我们能够“绘制”不同大小的棋盘，例如3x3 或 4x4。

这是我尝试做的。

window.addEventListener("load", onLoad, false)

function onLoad() {
  var wins = [7, 56, 448, 73, 146, 292, 273, 84];
  var mainDiv = document.getElementById("mainDiv");
  mainDiv.style.background = "#000000";
  mainDiv.style.width = "306px";
  mainDiv.style.height = "306px";
  mainDiv.style.border = "solid";
  mainDiv.style.borderColor = "#79BDEB";
  mainDiv.style.position = "absolute";
  mainDiv.style.left = "10px";
  mainDiv.style.top = "70px";
  //select.addEventListener("change", onChange, false);
}

function onChange() {
  var select = document.getElementById("mySelect").value;
  var main = document.getElementById("mainDiv");
  if (select == 3) {
    three();
  } else if (select == 4) {
    four();
  } else if (select == 5) {
    five();
  } else {
    six();
  }
  main.innerHTML = "";
  counter = 0;
}

function three() {
  var main = document.getElementById("mainDiv");
  for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
      var small = document.createElement("div");
      main.appendChild(small);
      small.style.background = "#52498F";
      small.style.width = "100px";
      small.style.height = "100px";
      small.style.border = "solid";
      small.style.borderColor = "#000000";
      small.style.position = "absolute";
      small.style.left = j * 100 + "px";
      small.style.top = i * 100 + "px";
      small.addEventListener("mousedown", onDown, false);
    }
  }
  var state = false;

  function onDown(e) {
    var small = e.target;
    small.style.background = "#f0f0f0";
    small.style.fontSize = "72px";
    small.style.fontFamily = "Arial";
    if (!state) {
      small.innerHTML = "x";
    } else {
      small.innerHTML = "o";
    }
    state = !state;
    small.style.textAlign = "center";
  }
}

function four() {
  var main = document.getElementById("mainDiv");
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      var small = document.createElement("div");
      main.appendChild(small);
      small.style.background = "#52498F";
      small.style.width = "75px";
      small.style.height = "75px";
      small.style.border = "solid";
      small.style.borderColor = "#000000";
      small.style.position = "absolute";
      small.style.left = j * 75 + "px";
      small.style.top = i * 75 + "px";
      small.addEventListener("mousedown", onDown, false);
    }
  }
  var state = false;

  function onDown(e) {
    var small = e.target;
    small.style.background = "#f0f0f0";
    small.style.fontSize = "60px";
    small.style.fontFamily = "Arial";
    if (!state) {
      small.innerHTML = "x";
    } else {
      small.innerHTML = "o";
    }
    state = !state;
    small.style.textAlign = "center";
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Tic-tac-toe</title>
  <script src="logic.js"></script>
  <style>
    #mySelect {
      font-size: 24px;
    }
    #myColor {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <select id="mySelect" onchange="onChange()">
    <option value="3">3 x 3</option>
    <option value="4">4 x 4</option>
    <option value="5">5 x 5</option>
    <option value="6">6 x 6</option>
  </select>
  <select id="myColor" onchange="color()">
    <option value="11">Blue</option>
    <option value="12">Green</option>
    <option value="13">Red</option>
  </select>
  <div id="mainDiv"></div>
  <script type="text/javascript" src="cordova.js"></script>
</body>

</html>

我的问题是小 div 不绘制在 mainDiv 中。奇怪的是，在我的一位朋友的 PC 上，它运行良好。但对我和其他几个朋友来说，事实并非如此。

【问题讨论】：

你有几个 onDown 的？
四个。我知道我只能使用一个。现在我正在改变它。

标签： javascript html tic-tac-toe

【解决方案1】：

而我的问题是小 div 不会在 mainDiv 中绘制

这是因为您首先使用所需的 fn 循环绘制元素，但之后您正在使用 main.innerHTML = ""; 清除整个 #mainDiv

另外，不要创建不同的函数，如three()、four()、five()...
您可以简单地创建一个 oneField(i, j, n) 并将您需要应用的迭代次数传递给该函数，例如：

select.addEventListener("change", createMap, false);

function createMap() {
  main.innerHTML = ""; // Clear first, not afterwards!
  var n = this.value;  // 3, 4, 5, ...
  for(var i=0; i<n; i++)  for(var j=0; j<n; j++)  oneField(i, j, n);
  counter = 0;
  turn = 0;
}

其中n 可用于使用简单数学设置字段单元格宽度fieldWidth = 300 / n

关于你的 HTML 和样式，我会用 TD 单元格而不是 DIV 创建一个 Table 元素和 TR，但我不知道你的作业细节。另外，与其为每个元素重新创建样式，我只需创建一个style 规则，例如：

#mainDIv > div {
    /* Cell styles here */
}

无论如何，这是一个使用 DIV 的示例：

function el(id){ return document.getElementById(id); }

function css(el, prop, val){
  if (typeof prop==="object") {
    for(var key in prop) el.style[key] = prop[key];
  } else {
    el.style[prop] = val;
  }
}

var wins    = [7, 56, 448, 73, 146, 292, 273, 84],
    size    = 300,
    turn    = 0, // 0=O, 1=X
    counter = 0,
    select  = el("mySelect"),
    color   = el("myColor"),
    main    = el("mainDiv");

css(main, {
      background : "#000",
      width      : size+"px",
      height     : size+"px",
      border     : "3px solid #79BDEB",
      position   : "absolute",
      left       : "10px",
      top        : "70px"
    });

select.addEventListener("change", createMap, false);

function oneField(i, j, n){
  var field = document.createElement("div"),
      w = size / n;
  css(field, {
      background : "#52498F",
      width      : w-2 +"px", // -2 is to account 1px border
      height     : w-2 +"px",
      border     : "1px solid #000",
      position   : "absolute",
      left       : j*w +"px",
      top        : i*w +"px",
      fontSize   : w-20 +"px",
      lineHeight : w-15 +"px",
      textAlign  : "center" 
  });
  main.appendChild(field);
  field.addEventListener("mousedown", onDown, false);
  //return field; // Return the created square field HTMLElement
}

function createMap() {
  main.innerHTML = "";
  var n = this.value;
  for(var i=0; i<n; i++)  for(var j=0; j<n; j++)  oneField(i, j, n);
  counter = 0;
  turn = 0;
}

function onDown(e) {
  var targ = e.target;
  css(targ, {
    background : "#f0f0f0" 
  });

  turn ^= 1; // Toggle turn 1,0,1,0...
  targ.innerHTML = turn ? "x" : "o" ;
}

* {
  margin: 0;
  padding: 0;
}
body {
  font: 16px/1 Helvetica, Arial, sans-serif;
  color: #444;
}
#mySelect,
#myColor {
  font-size: 24px;
}

<select id="mySelect">
  <option value="3">3 x 3</option>
  <option value="4">4 x 4</option>
  <option value="5">5 x 5</option>
  <option value="6">6 x 6</option>
</select>

<div id="mainDiv"></div>

【讨论】：

哇！非常感谢这对我帮助很大。我创建 div 是因为我们在课堂上就开始这样做了。我会四处摆弄，也许可以尝试创建表格的选项。

【解决方案2】：

您的设计中不要使用div，为什么不使用表格？它更简单:)

这是 jquery：

$("select").change(function(){
  var table = $("table").html("");
  var tr="";
  var size = $(this).val().charAt(0);
  for(var i=1; i<=size; i++){
    for(var j=1; j<=size; j++)
      tr+="<td></td>";
    $(table).append("<tr>"+tr+"</tr>");
    tr="";
  }
});

DEMO

【讨论】：

有趣，为什么.charAt(0)？
由于选项是'N x N'的形式（在
哦，我现在明白了。没有注意到您删除了value attr。 P.S：希望不会有 10x10 的桌子；）
也在这里，所以有一种趋势是使用 jQuery 对明显使用 Javascript 并被标记为 Javascript 的问题进行投票（我也这样做）答案，所以......你的答案不是那么有用。
让我们continue this discussion in chat。