JavaScript中的可點擊電路板（網格）
[英]Clickable board (grid) in JavaScript
問題描述
我正在嘗試使用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();
因此，我希望能夠點擊網格的任何方格（白色方塊），並且在從鍵盤按“k”后，方塊必須將其顏色更改為紅色。 有什么建議？
2 個解決方案
解決方案1
3 2017-04-29 10:40:56
試試這個：
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; }
我希望這個幫助:)
解決方案2
2 已采納 2017-04-29 10:04:01
如果要將函數綁定到由javascript創建的元素，則必須使用addEventListener 。 下面的代碼為body添加了一個表，您可以單擊每個單元格並選擇它，並且使用keydown，所選單元格將變為紅色。
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);
td{cursor: pointer;}
JavaScript可點擊網格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.