文章/答案/技术大牛

发布

问JavaScript Hangman演示
EN

Stack Overflow用户

提问于 2018-01-31 08:02:10

回答 3查看 404关注 0票数 1

我需要输入每个div的id，然后如果我键入或如果您有其他想法如何输入字母，例如，secret_word是emir，所以如果我键入E，则将短划线(___)改为deleted并替换为E。

不幸的是，这是我学习sw=的方式我是一个绝对的初学者，所以我非常感谢任何帮助或建议，我不知道它是否会成为未来的一些包，但this is a photo of how the divs are in the console和我可能需要硬编码1号而不是var javascript ''；到我真的不确定。

此外，我认为使用提示符是一种很好的表达方式，我的老师是我的朋友，他们将任务分成几个部分，我可以问他们，也可以使用StackOverflow。另外，如果你能推荐我到一些链接，在那里我可以找到一些有用的建议，我将不胜感激。

function getTheWord(){
    //var secret_word = document.getElementById("secret").value;
    secret_word = "emir";
    var sw = '';

    for(i=1; i <= secret_word.length;i++){
        console.log(i);
        console.log(sw);
        sw += '<div style="display:inline-block;"> ___ </div>';
    }
        document.getElementById('secret').innerHTML = sw;
        }
function GetValue()
{
    var my_array= new Array("head","hand1","hand2","body","leg1","leg2");
    var random_array = my_array[Math.floor(Math.random() * my_array.length)];
        console.log(random_array);
    document.getElementById("message").innerHTML=random_array;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="style.css" rel="stylesheet" type="text/css">
        <title>Document</title>
    </head>
    <body onload="getTheWord();">


        <input type="button" id="btnSearch" value="Search" onclick="GetValue();" />
        <p id="message" ></p>

        <div id="secret"></div>
        <br>
        <input type="text" id="secret" />

    </body>
</html>

javascript

html

dom

回答 3

Stack Overflow用户

发布于 2018-01-31 08:10:45

我真的不明白你的意思，但我认为你可以这样做

for(i=1; i <= secret_word.length;i++){
 let elem = document.createElement("div");
 elem.setAttribute("id", i)
 document.appendChild(elem);
}

您将为每个字母创建一个div，您可以单独选择它们。

票数 0

Stack Overflow用户

发布于 2018-04-29 18:33:15

这个答案后面是

：https://stackoverflow.com/a/49974142/1636522。更好的实现可以在这里找到：https://stackoverflow.com/a/50090320/1636522。

在上一篇文章3.1节“数据结构”中，我描述了三个名为HANGMAN、STROKES_COORDS和DRAWING_STEPS的数组。首先我要告诉你..。

... if你想要另一个ASCII艺术，你只需要改变这些结构，...

好的。然而，对于程序的第一个版本来说，这可能是一项乏味的任务。假设您想要一个额外的破折号(-)。然后，您必须将新的坐标插入到STROKES_COORDS中，到目前为止一切顺利，但是您还必须更新所有后续笔划的坐标，这些笔划必须相应地向右移动。这也同样适用于DRAWING_STEPS。很无聊，对吧？现在想象你的ASCII艺术放大了十倍。+0+的

为了解决这个问题，我们可以利用一个笔划的位置取决于前一个笔划的位置的事实，并将绝对定位转换为相对定位。诀窍是使用每对坐标作为偏移量来计算下一对坐标。下图试图说明这种机制(自下而上阅读)：

[+0,-1] -> [0,0] -> +
[+0,-1] -> [0,1] -> |
[+0,-1] -> [0,2] -> |
[+0,-1] -> [0,3] -> |
[+0,-1] -> [0,4] -> |
[+0,+5] -> [0,5] -> |

下一个片段是相应的实现。它将当前笔划的相对坐标xy与前一个笔划的偏移坐标xys[i-1]链接起来：

STROKES_COORDS.map(function (xy, i, xys) {
  return i > 0 && (
    xy[0] += xys[i - 1][0],
    xy[1] += xys[i - 1][1]
  ), xy;
})

多亏了这个技巧，当您插入新笔划时，后续的笔划会自动更新它们的位置。下面是一个例子：

var HANGMAN = [
  "+---------+" // <- +5 dashes
, "|         |"
, "|         o"
, "|        /M\\"
, "|        / \\"
, "|"
];

var STROKES_COORDS = [
  // first stroke
  [+0,+5],
  // vertical line
  [+0,-1], [+0,-1], [+0,-1], [+0,-1], [+0,-1],
  // horizontal line
  [+1,+0], [+1,+0], [+1,+0], [+1,+0], [+1,+0],
  [+1,+0], [+1,+0], [+1,+0], [+1,+0], [+1,+0],
  // rope and head
  [+0,+1], [+0,+1],
  // body and arms
  [-1,+1], [+1,+0], [+1,+0],
  // legs
  [-2,+1], [+2,+0]
];

var DRAWING_STEPS = [
  +0,         // nothing
  +2, +2, +2, // vertical line
  +3, +4, +3, // horizontal line
  +2, +3, +2  // character
];

正如您所看到的，这与旧代码有很小的区别：

$ diff a b
2,6c2,6
<   "+----+"
< , "|    |"  
< , "|    o"  
< , "|   /M\\"
< , "|   / \\" 
--- 
>   "+---------+" // <- +5 dashes
> , "|         |"  
> , "|         o"  
> , "|        /M\\"
> , "|        / \\" 
16a17
>   [+1,+0], [+1,+0], [+1,+0], [+1,+0], [+1,+0],
28c29
<   +2, +3,     // horizontal line
--- 
>   +3, +4, +3, // horizontal line

这就是全部:-)

var HANGMAN = [
  "+----+"
, "|    |"
, "|    o"
, "|   /M\\"
, "|   / \\"
, "|"
];

var STROKES_COORDS = [
  // first stroke
  [+0,+5],
  // vertical line
  [+0,-1], [+0,-1], [+0,-1], [+0,-1], [+0,-1],
  // horizontal line
  [+1,+0], [+1,+0], [+1,+0], [+1,+0], [+1,+0],
  // rope and head
  [+0,+1], [+0,+1],
  // body and arms
  [-1,+1], [+1,+0], [+1,+0],
  // legs
  [-2,+1], [+2,+0]
];

var DRAWING_STEPS = [
  +0,         // nothing
  +2, +2, +2, // vertical line
  +2, +3,     // horizontal line
  +2, +3, +2  // character
];

var CANVAS_WIDTH = HANGMAN.reduce(
  (a, x) => Math.max(x.length, a), 0
);

var BLANK_ROW = (
  " ".repeat(CANVAS_WIDTH)
);

var MAX_FAILS = (
  DRAWING_STEPS.length - 1
);

STROKES_COORDS = (
  STROKES_COORDS.map(function (xy, i, xys) {
    return i > 0 && (
      xy[0] += xys[i - 1][0],
      xy[1] += xys[i - 1][1]
    ), xy;
  })
);

DRAWING_STEPS = (
  DRAWING_STEPS.map(function (x, i, xs) {
    return i === 0 ? x : (
      xs[i] += xs[i - 1]
    );
  })
);

onload = function () {
  main("save earth");
};

function main (secret) {
  var placeholders = "_".repeat(secret.length);
  var state = { fails: 0, progress: placeholders.split("") };
  var input = document.getElementById("input");
  outputState(state, "Let's try!");
  input.onkeyup = function (ev) {
    if (ev.which === 13) {
      var value = this.value;
      this.value = ""; // reset input box
      if (value === "reset") {
        state.fails = 0;
        state.progress = placeholders.split("");
        outputState(state, "Let's try again!");
      } else if (!isGameOver(state)) {
        updateState(value, secret, state);
      }
    }
  };
}

function isGameOver (state) {
  return state.fails >= MAX_FAILS || (
    state.progress.indexOf("_") === -1
  );
}

function updateState (input, secret, state) {
  if (fillIn(input, state.progress, secret)) {
    if (state.progress.indexOf("_") === -1) {
      outputState(state, "Good job :-)");
    } else {
      outputState(state, "Yes! Keep it up :-D");
    }
  } else {
    if (++state.fails === MAX_FAILS) {
      outputState(state, "Bad job :-(");
    } else {
      outputState(state, "No... Hang on :-P");
    }
  }
}

function fillIn (letter, progress, secret) {
  var found = false;
  for (var i = 0; i < secret.length; i++) {
    if (secret[i] === letter) {
      found = true, progress[i] = secret[i];
    }
  }
  return found;
}

function drawGallows (fails) {
  var canvas = HANGMAN.map(
    () => BLANK_ROW.split("")
  );
  var n = DRAWING_STEPS[fails];
  for (var i = 0; i < n; i++) {
    var x = STROKES_COORDS[i][0];
    var y = STROKES_COORDS[i][1];
    canvas[y][x] = HANGMAN[y][x];
  }
  return canvas;
}

function outputState (state, message) {
  output([
    message, "",
    state.progress.join(" "), ""
  ].concat(
    drawGallows(state.fails).map(
      x => " ".repeat(3) + x.join("")
    )
  ).concat((
    "-".repeat(CANVAS_WIDTH + 6)
  ) + " fails = " + (
    state.fails + " / " + MAX_FAILS
  )));
}

function output (lines) {
  var p = document.getElementById("pre");
  p.textContent = "  " + lines.join("\n  ");
}

<table width="100%" cellspacing="0">
  <tr>
    <td width="40%" valign="top" style="text-align: center;">
      <p style="font-size: 14px;">
        Type a character or "reset"<br>
        (white spaces matter),<br>
        then press ENTER.
      </p>
      <input id="input" type="text">
    </td>
    <td valign="top" style="border-left: 1px solid #999;">
      <pre id="pre" style="
        font-size: 12px;
        font-family: monospace, monospace;
      "></pre>
    </td>
  </tr>
</table>

票数 0

Stack Overflow用户

发布于 2018-04-30 03:10:56

这个答案后面是

：https://stackoverflow.com/a/50085635/1636522。

当我在寻找另一种ASCII艺术时，我偶然发现了这一件：

0000000000000
0           0
0           1
0          1 1
0           1
0          324
0         3 2 4
0        3  2  4
0          5 6
0         5   6
0        5     6
0       5       6
0
0
0

我立刻想出了这个主意，这比我的要聪明得多……+0+‘这是一个包含打印每个字符所需的最小失败次数的掩码。这是我们关于我们的实现的结果，你应该看到数字背后的绘图：

var HANGMAN_STEPS = [
  [3, 4, 4, 5, 5, 5, 0]
// +  -  -  -  -  +
, [3, 0, 0, 0, 0, 6, 0]
// |              |
, [2, 0, 0, 0, 0, 6, 0]
// |              o
, [2, 0, 0, 0, 7, 7, 7]
// |           /  M  \
, [1, 0, 0, 0, 8, 0, 8]
// |           /     \
, [1, 0, 0, 0, 0, 0, 0]
// |
];

这个结构包含了前面描述的STROKES_COORDS和DRAWING_STEPS的信息，这使得它更容易阅读和更改。此外，drawGallows变得更小。事实上，由于HANGMAN和HANGMAN_STEPS完全匹配，因此不再需要转换索引：

function drawGallows (fails) {
  return HANGMAN_STEPS.map((l, y) => (l.map(
    (i, x) => i > fails ? " " : HANGMAN[y][x]
  )));
}

请给我一根绳子。

var HANGMAN = [
  "+----+ "
, "|    | "
, "|    o "
, "|   /M\\"
, "|   / \\"
, "|      "
];

var HANGMAN_STEPS = [
  [3, 4, 4, 5, 5, 5, 0]
, [3, 0, 0, 0, 0, 6, 0]
, [2, 0, 0, 0, 0, 6, 0]
, [2, 0, 0, 0, 7, 7, 7]
, [1, 0, 0, 0, 8, 0, 8]
, [1, 0, 0, 0, 0, 0, 0]
];

var MAX_FAILS = HANGMAN_STEPS.reduce((max, l) => (
  l.reduce((max, i) => Math.max(max, i), max)
), 0);

var CANVAS_WIDTH = HANGMAN.reduce(
  (a, x) => Math.max(x.length, a), 0
);

onload = function () {
  main("save earth");
};

function main (secret) {
  var placeholders = "_".repeat(secret.length);
  var state = { fails: 0, progress: placeholders.split("") };
  var input = document.getElementById("input");
  outputState(state, "Let's try!");
  input.onkeyup = function (ev) {
    if (ev.which === 13) {
      var value = this.value;
      this.value = ""; // reset input box
      if (value === "reset") {
        state.fails = 0;
        state.progress = placeholders.split("");
        outputState(state, "Let's try again!");
      } else if (!isGameOver(state)) {
        updateState(value, secret, state);
      }
    }
  };
}

function isGameOver (state) {
  return state.fails >= MAX_FAILS || (
    state.progress.indexOf("_") === -1
  );
}

function updateState (input, secret, state) {
  if (fillIn(input, state.progress, secret)) {
    if (state.progress.indexOf("_") === -1) {
      outputState(state, "Good job :-)");
    } else {
      outputState(state, "Yes! Keep it up :-D");
    }
  } else {
    if (++state.fails === MAX_FAILS) {
      outputState(state, "Bad job :-(");
    } else {
      outputState(state, "No... Hang on :-P");
    }
  }
}

function fillIn (letter, progress, secret) {
  var found = false;
  for (var i = 0; i < secret.length; i++) {
    if (secret[i] === letter) {
      found = true, progress[i] = secret[i];
    }
  }
  return found;
}

function drawGallows (fails) {
  return HANGMAN_STEPS.map((l, y) => (l.map(
    (i, x) => i > fails ? " " : HANGMAN[y][x]
  )));
}

function outputState (state, message) {
  output([
    message, "",
    state.progress.join(" "), ""
  ].concat(
    drawGallows(state.fails).map(
      x => " ".repeat(3) + x.join("")
    )
  ).concat((
    "-".repeat(CANVAS_WIDTH + 6)
  ) + " fails = " + (
    state.fails + " / " + MAX_FAILS
  )));
}

function output (lines) {
  var p = document.getElementById("pre");
  p.textContent = "  " + lines.join("\n  ");
}

<table width="100%" cellspacing="0">
  <tr>
    <td width="40%" valign="top" style="text-align: center;">
      <p style="font-size: 14px;">
        Type a character or "reset"<br>
        (white spaces matter),<br>
        then press ENTER.
      </p>
      <input id="input" type="text">
    </td>
    <td valign="top" style="border-left: 1px solid #999;">
      <pre id="pre" style="
        font-size: 12px;
        font-family: monospace, monospace;
      "></pre>
    </td>
  </tr>
</table>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48532419

复制

相似问题

问JavaScript Hangman演示
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript Hangman演示EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript Hangman演示
EN