首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在div中的特定点追加字符串

在div中的特定点追加字符串
EN

Stack Overflow用户
提问于 2016-12-22 22:02:52
回答 6查看 112关注 0票数 4

我正在用超文本标记语言制作一个小的hang游戏,我试图把一个用户已经猜对了的字母推到它需要在div中的任何地方。这是我到目前为止所知道的:

代码语言:javascript
复制
var words = ['dog', 'mouse', 'horse', 'fossil', 'christmas', 'mountain', 'javascript', 'glitter', 'pringles', 'connect'];
var output = "";
var gRand = "";
var gWordAry = "";
function startGame() {
    var rand = words[Math.floor(Math.random() * words.length)]; //gets a random word from the array, stores as rand
    var wordAry = rand.split(''); //splits random word into its own array and each letter is in the array
    gRand = rand; //stores random word as global var
    gWordAry = wordAry;
    alert(wordAry);
    $('#hangmanGame').show();
    $('#startBtn').hide();
    //alert(rand);
    for (i = 0; i < wordAry.length; i++) { //draws a dash for every letter in the random word array after split
        //draw canvas dash
        output += ' _ ';
        $('#wordGuess').html(output);
    }


    //alert(output);


}

function guess(letter) {
    var letterID = letter.toLowerCase(); //converts letter to lowercase from html
    //alert(letterID);
    var foundLetter = 0;
    for (i=0;i<gWordAry.length; i++){
        if (gWordAry[i] == letterID){ //if a letter in the word array = the letter clicked this will run
            //alert('correct');
            foundLetter++;
            displayLetter(letterID);
        }
    }
    if (foundLetter == 0){ //if no letters in the array are found this will run
        alert('Try Again');
    }

}

function displayLetter(letterID){
    //displays all letters in the word
    $('#wordGuess').append(letterID)
}

HTML:

代码语言:javascript
复制
<div id="hangmanGame">
    <div id="wordGuess">  </div>  //THIS IS THE DIV WHERE THE LETTERS ARE GOING
    <table style="margin: auto;position: relative;top: 500px;">
        <tr> 
            <td><button class="alphabet" type="button"> </button></td>
            <td> <button type="button" onclick="guess('A')" id="1" class="alphabet">A </button></td> 
            <td> <button type="button" onclick="guess('B')" id="2" class="alphabet">B </button></td>
            <td> <button type="button" onclick="guess('C')" id="3" class="alphabet">C </button></td>
            <td> <button type="button" onclick="guess('D')" id="4" class="alphabet">D </button></td>
            <td> <button type="button" onclick="guess('E')" id="5" class="alphabet">E </button></td>
            <td> <button type="button" onclick="guess('F')" id="6" class="alphabet">F </button></td>
            <td> <button type="button" onclick="guess('G')" id="7" class="alphabet">G </button></td>
            <td> <button type="button" onclick="guess('H')" id="8" class="alphabet">H </button></td>
            <td> <button class="alphabet" type="button"> </button></td></tr>
        <tr> 
            <td> <button class="alphabet" type="button"> </button></td>
            <td> <button type="button" onclick="guess('I')" id="9" class="alphabet">I </button></td>
            <td> <button type="button" onclick="guess('J')" id="10" class="alphabet">J </button></td>
            <td> <button type="button" onclick="guess('K')" id="11" class="alphabet">K </button></td>
            <td> <button type="button" onclick="guess('L')" id="12" class="alphabet">L </button></td>
            <td> <button type="button" onclick="guess('M')" id="13" class="alphabet">M </button></td>
            <td> <button type="button" onclick="guess('N')" id="14" class="alphabet">N </button></td>
            <td> <button type="button" onclick="guess('O')" id="15" class="alphabet">O </button></td>
            <td> <button type="button" onclick="guess('P')" id="16" class="alphabet">P </button></td>
            <td><button class="alphabet" type="button"> </button></td></tr>
        <tr> <td> <button type="button" onclick="guess('Q')" id="17" class="alphabet">Q </button></td>
            <td> <button type="button" onclick="guess('R')" id="18" class="alphabet">R </button></td>
            <td> <button type="button" onclick="guess('S')" id="19" class="alphabet">S </button></td>
            <td> <button type="button" onclick="guess('T')" id="20" class="alphabet">T </button></td>
            <td> <button type="button" onclick="guess('U')" id="21" class="alphabet">U </button></td>
            <td> <button type="button" onclick="guess('V')" id="22" class="alphabet">V </button></td>
            <td> <button type="button" onclick="guess('W')" id="23" class="alphabet">W </button></td>
            <td> <button type="button" onclick="guess('X')" id="24" class="alphabet">X </button></td>
            <td> <button type="button" onclick="guess('Y')" id="25" class="alphabet">Y </button></td>
            <td> <button type="button" onclick="guess('Z')" id="26" class="alphabet">Z </button></td> </tr>
    </table>
</div>

代码可能有点乱。我是个编程新手。有人能帮上忙吗?我现在所拥有的是将该字母添加到_的末尾。

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2016-12-22 22:20:32

以下是游戏的工作版本:)

取自here的replaceAt函数

代码语言:javascript
复制
var words = ['dog'];
var output = "";
var gRand = "";
var gWordAry = "";

function startGame() {
  var rand = words[Math.floor(Math.random() * words.length)]; //gets a random word from the array, stores as rand
  var wordAry = rand.split(''); //splits random word into its own array and each letter is in the array
  gRand = rand; //stores random word as global var
  gWordAry = wordAry;
  alert(wordAry);
  $('#hangmanGame').show();
  $('#startBtn').hide();
  //alert(rand);
  for (i = 0; i < wordAry.length; i++) { //draws a dash for every letter in the random word array after split
    //draw canvas dash
    output += ' _ ';
    $('#wordGuess').html(output);
  }


  //alert(output);


}
currentIndex = 0
function guess(letter) {
  var letterID = letter.toLowerCase(); //converts letter to lowercase from html
  //alert(letterID);
  var foundLetter = 0;
  for (i = 0; i < gWordAry.length; i++) {
    if (gWordAry[i] == letterID && gWordAry[i] !== '_') { //if a letter in the word array = the letter clicked this will run
      //alert('correct');
      if (currentIndex == i){
      foundLetter++;
      gWordAry[i] = '_'
      displayLetter(letterID, currentIndex++);
        
      break;
        }
    }
  }
  if (foundLetter == 0) { //if no letters in the array are found this will run
    alert('Try Again');
  }

}
String.prototype.replaceAt = function(index, character) {
  return this.substr(0, index) + character + this.substr(index + character.length);
}

function displayLetter(letterID,i) {
  //displays all letters in the word
  var toReplace = $('#wordGuess').html();


 $('#wordGuess').html($('#wordGuess').html().replaceAt($('#wordGuess').html().indexOf('_'), letterID))
}
startGame()
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hangmanGame">
  <div id="wordGuess"></div>
  <table style="margin: auto;position: relative;top: 10px;">
    <tr>
      <td>
        <button class="alphabet" type="button"></button>
      </td>
      <td>
        <button type="button" onclick="guess('A')" id="1" class="alphabet">A</button>
      </td>
      <td>
        <button type="button" onclick="guess('B')" id="2" class="alphabet">B</button>
      </td>
      <td>
        <button type="button" onclick="guess('C')" id="3" class="alphabet">C</button>
      </td>
      <td>
        <button type="button" onclick="guess('D')" id="4" class="alphabet">D</button>
      </td>
      <td>
        <button type="button" onclick="guess('E')" id="5" class="alphabet">E</button>
      </td>
      <td>
        <button type="button" onclick="guess('F')" id="6" class="alphabet">F</button>
      </td>
      <td>
        <button type="button" onclick="guess('G')" id="7" class="alphabet">G</button>
      </td>
      <td>
        <button type="button" onclick="guess('H')" id="8" class="alphabet">H</button>
      </td>
      <td>
        <button class="alphabet" type="button"></button>
      </td>
    </tr>
    <tr>
      <td>
        <button class="alphabet" type="button"></button>
      </td>
      <td>
        <button type="button" onclick="guess('I')" id="9" class="alphabet">I</button>
      </td>
      <td>
        <button type="button" onclick="guess('J')" id="10" class="alphabet">J</button>
      </td>
      <td>
        <button type="button" onclick="guess('K')" id="11" class="alphabet">K</button>
      </td>
      <td>
        <button type="button" onclick="guess('L')" id="12" class="alphabet">L</button>
      </td>
      <td>
        <button type="button" onclick="guess('M')" id="13" class="alphabet">M</button>
      </td>
      <td>
        <button type="button" onclick="guess('N')" id="14" class="alphabet">N</button>
      </td>
      <td>
        <button type="button" onclick="guess('O')" id="15" class="alphabet">O</button>
      </td>
      <td>
        <button type="button" onclick="guess('P')" id="16" class="alphabet">P</button>
      </td>
      <td>
        <button class="alphabet" type="button"></button>
      </td>
    </tr>
    <tr>
      <td>
        <button type="button" onclick="guess('Q')" id="17" class="alphabet">Q</button>
      </td>
      <td>
        <button type="button" onclick="guess('R')" id="18" class="alphabet">R</button>
      </td>
      <td>
        <button type="button" onclick="guess('S')" id="19" class="alphabet">S</button>
      </td>
      <td>
        <button type="button" onclick="guess('T')" id="20" class="alphabet">T</button>
      </td>
      <td>
        <button type="button" onclick="guess('U')" id="21" class="alphabet">U</button>
      </td>
      <td>
        <button type="button" onclick="guess('V')" id="22" class="alphabet">V</button>
      </td>
      <td>
        <button type="button" onclick="guess('W')" id="23" class="alphabet">W</button>
      </td>
      <td>
        <button type="button" onclick="guess('X')" id="24" class="alphabet">X</button>
      </td>
      <td>
        <button type="button" onclick="guess('Y')" id="25" class="alphabet">Y</button>
      </td>
      <td>
        <button type="button" onclick="guess('Z')" id="26" class="alphabet">Z</button>
      </td>
    </tr>
  </table>
</div>

票数 3
EN

Stack Overflow用户

发布于 2016-12-22 22:11:35

如果您希望已经猜测的所有字母都显示在您的div中,那么您可以修改displayLetter,使其首先读取#wordGuess中的内容,并将刚刚猜测的字母附加到该列表中,然后将该信息写入#wordGuess

票数 1
EN

Stack Overflow用户

发布于 2016-12-22 22:20:44

更改构建空格的循环,使每个下划线都包含特定于该索引的id,以便以后可以将其作为目标:

代码语言:javascript
复制
for (i = 0; i < wordAry.length; i++) { //draws a dash for every letter in the random word array after split
    //draw canvas dash
    output += "<span id='letter" + i + "'>_</span>";
}
$('#wordGuess').html(output);

在搜索匹配字母的位置时,将字母和在单词中找到的位置传递给显示字母函数:

代码语言:javascript
复制
for (i = 0; i < gWordAry.length; i++) {
    if (gWordAry[i] === letterID) { //if a letter in the word array = the letter clicked this will run
        foundLetter++;
        displayLetter(letterID, i);
    }
}

更改您的displayLetter函数以获取索引参数。将id与您的索引匹配的特定跨度作为目标,并将其设置为给定的字母:

代码语言:javascript
复制
function displayLetter(letterID, index) {
    //displays all letters in the word
    $('#letter' + index).text(letterID);
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41284939

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档