Question

我正在练习javascript并自己学习。我正在创建一个游戏，您可以在其中输入文本坐标，游戏会告诉您是否挖出了一些东西。但是我试图实现一个文本框，这样你就可以玩浏览器而不是命令提示符，但是我无法让游戏获取文本，然后在单击按钮时使用它来运行代码。

以下是游戏的HTML。

<head>
<meta charset="UTF-8">
<title>Game Board</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="board.js"></script>
<script type="text/javascript" src="game.js"></script>
</head>

<body>
<center>

<h1>Archaeology Board</h1>
Palace = 5 Spaces </br>
Temple = 4 Spaces </br>
Forum = 4 Spaces </br>
House = 3 Spaces </br>
Hut = 2 Spaces </br>

<h3>
<table id="board">

</table>
</h3>
<p>
<label for="DigBox">Enter dig coordinates:</label>
<input type="text" id="DigBox" size="3" value="" />
<input type="button" value="Dig" id="run" />
</p>

<p><input type="button" value="Restart Game" id="restart" /></p>

</center>
</body>
</html>

这是创建电路板的js文件。

function GameBoard()
{

 this.ruins = [

  { 
    name: "Palace",
    size: 5,
    successes: 0
  },

  { 
    name: "Temple",
    size: 4,
    successes: 0
  },

  { 
    name: "Forum",
    size: 4,
    successes: 0
  },

  { 
    name: "House",
    size: 3,
    successes: 0
  },

  { 
    name: "Hut",
    size: 2,
    successes: 0
  }

  ];

  this.rows = ["a", "b", "c", "d", "e", "f", "g", "h"];
  this.columns = ["1", "2", "3", "4", "5", "6", "7", "8"];
  this.cellMarker = 'X';
}


GameBoard.prototype.setBoard = function ()
{
  var i, j, boardTags;

  boardTags = "";

  // build the first row of column labels
  boardTags += "<tr><th>&nbsp</th>";
  for (j = 0; j < this.columns.length; j++) {
    boardTags += "<th>" + this.columns[j] + "</th>";
  }
  boardTags += "</tr>";

  // build the table with HTML tags
  for (i = 0; i < this.rows.length; i++) {
    boardTags += "<tr>";
    boardTags += "<th>" + this.rows[i] + "</th>";  // row labels

    for (j = 0; j < this.columns.length; j++) {
      boardTags += "<td class='square' id='cell" + 
        this.rows[i] + this.columns[j] + "'>" + this.cellMarker + "</ td>";
    }
    boardTags += "</tr>";
  }
  $("#board").html(boardTags);


  for (i = 0; i < this.ruins.length; i++) {
    this.setRuin(this.ruins[i]);
  }
}

GameBoard.prototype.dig = function(square, processResult)
{
  var target, targetObj;
  target = $("#cell"+square).attr('ruin');
  if (target) {
    targetObj = this.getRuin(target);
    if (! $("#cell"+square).attr('dug')) {
       $("#cell"+square).attr('dug', 'yes');
       targetObj.successes++;
    }
    return targetObj;
  }
  else {
    return undefined;
  }

}

GameBoard.prototype.getRuin = function(ruinName)
{
  for (var i = 0; i < this.ruins.length; i++) {
    if (ruinName === this.ruins[i].name) {
      return this.ruins[i];
    }
  }
  return undefined;
}

GameBoard.prototype.randomSquare = function()
{
   var colIndex = Math.floor(Math.random() * this.columns.length);
   var rowIndex = Math.floor(Math.random() * this.rows.length);
   return this.rows[rowIndex] + this.columns[colIndex];
}


GameBoard.prototype.setRuin = function(ruin)
{ 
  // keeps randomly trying to place a ruin until it fits on the board
  var candidateSquare = this.randomSquare();
  var across = Math.random() < 0.5;
  var success = this.tryPlacement(ruin, candidateSquare, across, ruin.size);
  while (! success) {
    candidateSquare = this.randomSquare();
    across = Math.random() < 0.5;
    success = this.tryPlacement(ruin, candidateSquare, across, ruin.size); 
  }
}

GameBoard.prototype.tryPlacement = function(ruin, square, across, size) {
  var nextSquare;

  if (size === 0) {
    // ruin fits!
    return true;
  }
  else if (! square) {
    // invalid square
    return false;
  }

  if (! $("#cell" + square).attr('ruin')) {
    $("#cell" + square).attr('ruin', ruin.name);

    // see if the rest of the ruin fits
    if (this.tryPlacement(ruin, this.increment(square, across), across, size - 1)) {
      // ruin fits!
      return true;
    }
    else {
      // ruin didn't fit --- undo occupied square and return false
      $("#cell" + square).removeAttr('ruin');
      return false
    }
  }
}

GameBoard.prototype.increment = function(square, across)
{
  if (across) {
    // need to increment the column dimension if possible
    var colIndex = this.columns.indexOf(square.charAt(1));
    colIndex++;
    if (colIndex === this.columns.length) {
      return undefined;
    }
    else {
      return square.charAt(0) + this.columns[colIndex];
    }
  }
  else {
    // need to increment the row dimension if possible
    var rowIndex = this.rows.indexOf(square.charAt(0));
    rowIndex++;
    if (rowIndex === this.rows.length) {
      return undefined;
    }
    else {
      return this.rows[rowIndex] + square.charAt(1);
    }
  }
}

这是我试图在

中实现的代码

    $(function () {
  tryDig = function(targetCell)
  {
    var targetObj = board.dig(targetCell);

    if (targetObj) {
      alert('Success finding the ' + targetObj.name);
      $("#cell"+targetCell).html('#');
      $("#cell"+targetCell).css('color', 'blue');
    }
    else {
      alert('Failure!');
      $("#cell"+targetCell).html('*').css('color', 'red');
    }
  }


  board = new GameBoard();
  board.setBoard();


    });

    initialize = function() {
      $("#run").click(tryDig);
    }

    initialize = function() {
      $("#restart").click(GameBoard.prototype.setBoard);
    }


    $(initialize);

我希望无论文本框中的内容是什么，游戏都会使用它作为在棋盘上挖掘的坐标。

如何从文本框中获取文本并使用它在此代码中实现它？

0 个答案: