Javascript随机单元格背景颜色改变

Javascript random cell background color change

本文关键字：颜色改变背景单元格随机 Javascript 更新时间：2023-09-26

我正在尝试创建一个表。ruudud.value是<select>的值。但是，当这个函数创建一个表时，我希望它在其中放置一些随机的黄色单元格。这是一个小的学校项目，这个代码是一个代码的一部分，应该创建战舰游戏。

Also if possible。当它创造了一个随机的黄色细胞，那么它能把下一个细胞也涂成黄色吗?(创建一个2单元的船)。

function addTable() {
    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('TABLE');
    table.border = '1';
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    var x = Math.floor((Math.random() * ruudud.value) + 0);
    var y = Math.floor((Math.random() * ruudud.value) + 0);
    for (var i = 0; i < ruudud.value; i++) {
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        console.log(x + "," + y);
        for (var j = 0; j < ruudud.value; j++) {
            var td = document.createElement('TD');
            var td = document.getElementsByTagName("td");
            td.width = '50';
            td.height = '50';
            td.style.backgroundColor = "red";
            td.setAttribute("onClick", "colorChange(this)")
            td.innerHTML = (i + "," + j);
            if (td[i].innerHTML == (x + "," + y)) {
                td[i].setAttribute("style", "background:yellow;");
            }
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
}
function colorChange(tdObj) {
tdObj.style.backgroundColor = "green";}

example2:

function addTable() {
var myTableDiv = document.getElementById("myDynamicTable");

var table = document.createElement('TABLE');
table.border='1';
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var x = Math.floor((Math.random() * ruudud.value) + 0);
var y = Math.floor((Math.random() * ruudud.value) + 0);
for (var i=0; i<ruudud.value; i++){
   var tr = document.createElement('TR');
   tableBody.appendChild(tr);
 console.log(x + ","+y);  
   for (var j=0; j<ruudud.value; j++){
        var td = document.createElement('TD');
        var td2 = document.getElementsByTagName("td");
        var i = 0, tds = td.length;
        td.width='50';
        td.height='50';
        td.style.backgroundColor="white";
        td.setAttribute("onClick", "colorChange(this)")
        td.innerHTML = (i +","+ j);
        if(td2[i].innerHTML == (x + "," + y)) {
            td2[i].setAttribute("style", "background:yellow;");
        }
        tr.appendChild(td);
        }
   }
myTableDiv.appendChild(table);
}
function colorChange(tdObj) {
tdObj.style.backgroundColor = "green";}

在这两种情况下，您都是在将td元素附加到DOM之前选择它。您不需要再次选择它，您可以在创建td元素时简单地应用样式。这是对代码的一个小修改。我也按照你的要求添加了一个条件，可以添加双单元船。

function addTable(double) {
    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('TABLE');
    table.border = '1';
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    var x = Math.floor((Math.random() * ruudud.value) + 0);
    var y = Math.floor((Math.random() * ruudud.value) + 0);
    for (var i = 0; i < ruudud.value; i++) {
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);
        //console.log(x + "," + y);
        for (var j = 0; j < ruudud.value; j++) {
            var td = document.createElement('td');
            td.width = '50';
            td.height = '50';
            td.style.backgroundColor = "red";
            td.setAttribute("onClick", "colorChange(this)");
            td.innerHTML = (i + "," + j);
            if (x === i && y === j) {
                td.setAttribute("style", "background:yellow;");
            }
            // If you need to enable two-cell ships, pass true to the function
            // You can allow horizontal or vertical cells by changing x and ys in the equality checks below
            if(double){
                if(y+1 < ruudud.value){
                    if(x === i && y+1 === j){
                        td.setAttribute("style", "background:yellow;");
                    }
                }
                else{
                    if(x === i && y-1 === j){
                        td.setAttribute("style", "background:yellow;");
                    }
                }
            }
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);
}
function colorChange(tdObj) {
tdObj.style.backgroundColor = "green";}
addTable(true);