Question

我正在尝试使用JavaScript和HTML为游戏创建可点击的棋盘（网格）。到目前为止，我设法创建的唯一内容是网格，但我无法使其可点击（交互式）。到目前为止，这是我得到的： [https://i.stack.imgur.com/hoOCI.jpg][1]

它的代码如下：

HTML（game.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Game</title>
    <link rel="stylesheet" href="game.css">
</head>
<body>
   <script src="game.js"></script>
</body>
</html>

CSS（game.css）：

*{
padding: 0;
margin: 0;
}

body{
background-color: bisque;
}

td{
width: 40px;
height: 40px;
}

.blank{
background-color: white;
}

.userSubmarine{
background-color: red;
}

.wall{
background-color: green;
}

.killerSubmarine{
background-color: blue;
}

.fuel{
background-color: yellow;
}

.obstacle{
background-color: purple;
}

JavaScript（game.js）：

var height = 12;
var width = 12;
var turn;
var numUserSubmarines = 0;
var numKillerSubmarines = 0;
var numFuel = 0;
var numObstacles = 0;
var running = false;
var gameOver = false;


//entry point

 function run(){
init();
}

function init(){
createGrid();
}

//generate the grid

function createGrid(){

document.write("<table>");

for (var y = 0; y < height; y++){
    document.write("<tr>");
    for (var x = 0; x < width; x++){
        if(x == 0 || x == width - 1 || y == 0 || y == height - 1){
            document.write("<td class = 'wall' id = "+ x + "-" + y +"></td>");

        }else{
            document.write("<td class = 'blank' id = "+ x + "-" + y +"></td>");
        }
    }
    document.write("</tr>");
}

document.write("</table>");

}


run();

因此，我希望能够点击网格的任何方格（白色方块）并按下＆＃39; k＆＃39;例如，从键盘广场必须将其颜色改为红色。有什么建议吗？

Answer 1

试试这个：

 var height = 12;
  var width = 12;
  var turn;
  var numUserSubmarines = 0;
  var numKillerSubmarines = 0;
  var numFuel = 0;
  var numObstacles = 0;
  var running = false;
  var gameOver = false;


  //entry point

  function run() {
      init();
  }

  function init() {
      createGrid();
  }

  //generate the grid

  function createGrid() {

      document.write("<table>");

      for (var y = 0; y < height; y++) {
          document.write("<tr>");
          for (var x = 0; x < width; x++) {
              if (x == 0 || x == width - 1 || y == 0 || y == height - 1) {
                  document.write("<td class = 'wall' id = " + x + "-" + y + " onclick='alert(\"" + x + "-" + y + "\")'></td>");

              } else {
                  document.write("<td class = 'blank' id = " + x + "-" + y + " onclick='alert(\"" + x + "-" + y + "\")'></td>");
              }
          }
          document.write("</tr>");
      }

      document.write("</table>");

  }


  run();

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: bisque;
}

td{
    width: 40px;
    height: 40px;
}

.blank{
    background-color: white;
}

.userSubmarine{
    background-color: red;
}

.wall{
    background-color: green;
}

.killerSubmarine{
    background-color: blue;
}

.fuel{
    background-color: yellow;
}

.obstacle{
    background-color: purple;
}

我希望这个帮助：）

Answer 2

如果要将函数绑定到由javascript创建的元素，则必须使用addEventListener。下面的代码为body添加了一个表，您可以单击每个单元格并选择它，并且通过keydown，所选单元格将变为红色。

＆＃13;

function CreateGrid(width, height)
    {
        var clickedCell;
        var body = document.getElementsByTagName("body")[0];
        var myTable = document.createElement('table');
        body.appendChild(myTable);
        window.addEventListener('keydown', function () { clickedCell.style.backgroundColor = "red"; });
        for (var i = 0; i < height; i++)
        {
            var row = myTable.insertRow(i);
            for (var j = 0; j < width; j++)
            {
                var cell = row.insertCell(j);
                cell.innerHTML = "Cell" + j;
                cell.addEventListener('click', function (e) { clickedCell = e.target; });
            }
        }
    }

    CreateGrid(6, 3);

＆＃13;

td{cursor: pointer;}

＆＃13;

JavaScript中的可点击电路板（网格）

2 个答案: