Как дать каждой ячейке случайное число ди git - PullRequest
Новая
       1

Как дать каждой ячейке случайное число ди git

2 голосов
/ 15 февраля 2020

Я хочу дать каждой ячейке случайное двойное число git между 50-500. Я пытаюсь использовать math.floor (math.random () в качестве функции, но пока безуспешно)

также, как я могу настроить таргетинг только на одну ячейку, например, у меня есть 5x5 слотов, 5 строк 5 столбцов, и я хочу нацелиться на верхнюю левую ячейку только в углу, и вместо случайных сгенерированных чисел, как остальные ячейки, я хочу дать ему символ, которым я могу управлять, поэтому, если символ находится в верхнем левом углу, я, например, нажимаю на середину, и он перемещается туда, заменяя сгенерированное число, которое было в середине, и оставляя верхний левый правый угол пустым

извините за беспокойство, любая помощь действительно ценится 

<html>
<head>
<style>
td{
border:2px solid black;
width:10px;
height:10px;
}
td:hover{background-color:lightgreen;}
.grn{
background-color:green;
color:white;
}
</style>

<body>
<div id='ff'></div>

<script>
var isCol=0;
var board=[];
for(r=0;r<7;r++){
    var line=[];
    for(c=0;c<7;c++){
        line.push(r);
    }
    board.push(line);
}


function prs(c,r){
    showTable(c,r);
    isCol=(isCol+1)%2;
}

function toColor(col,row,chosen_col,chosen_row){
var ret=false;
switch(isCol){
    case 0:
        if(row==chosen_row){
            ret=true;
        }
        break;
    case 1:
        if(col==chosen_col){
            ret=true;
        }
        break;
}

return ret;
}

function showTable(chosen_col,chosen_row){
var str="";
str+="<table border=1>";
for(row=0;row<7;row++){
    str+="<tr>";
    for(col=0;col<7;col++){ 
        str+="<td onclick='prs("+col+","+row+")'";
        if(toColor(col,row,chosen_col,chosen_row)){
            str+=" class='grn' ";
        }
        str+=">";
str+=board[row][col];
        str+="</td>";
    }
    str+="</tr>";
}
str+="</table>";

 document.getElementById("ff").innerHTML=str;
}


showTable(-1);
</script>
</body>
</html>

Ответы [ 4 ]

1 голос
/ 15 февраля 2020

Вы можете попробовать это. 

function randRange(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

const rows = 7;
const cols = 7;

const slots = Array.from(new Array(rows), () =>
  new Array(cols).fill(0).map(() => randRange(50, 500))
);

console.log(slots);
0 голосов
/ 15 февраля 2020

Надеюсь, я вас правильно понимаю.

Обратите внимание на Math.floor(Math.random() * (MAX - MIN + 1)) + MIN, не забудьте про "+ 1" . Без этого вы никогда не получите 500 (максимум 499, я пытаюсь доказать это в комментариях).

Также вам не нужно создавать одиночный обратный вызов для каждой ячейки. Лучше создать один обратный вызов на событие «клик» на столе. И чем проверить, в каком элементе появилось это событие. Я рекомендую вам прочитать кое-что о Распространении событий и распространении в JavaScript. Речь идет именно о вашей задаче. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <style>
        td{
            border:2px solid black;
            width:10px;
            height:10px;
        }

        td:hover{
            background-color:lightgreen;
        }

        .grn {
            background-color:green;
            color:white;
        }
    </style>
</head>
<body>
    <div id="ff"></div>
    <script>
        'use strict';

        const SIZE = 10;        // Size of the table (SIZE x SIZE)
        const MIN = 50;         // Minimal number in cell
        const MAX = 500;        // Maximum number in cell
        const CHOSEN_COL = 0;   // Column where chosen cell is
        const CHOSEN_ROW = 0;   // Row where chosen cell is
        const SYMBOL = 'S';     // Yours 'symbol'

        function showTable() {
            let table = document.createElement('table');
            let chosenTd;   // <td> element of chosen cell

            for (let i = 0; i < SIZE; i++) {
                let tr = document.createElement('tr');
                for (let j = 0; j < SIZE; j++) {
                    let td = document.createElement('td');

                    // 1) Math.random() returns values from 0 (inclusive) to 1 (exclusive)
                    // 2) Math.random() * (MAX - MIN) returns values from 0 (inclusive)
                    // to (MAX - MIN) (exclusive)
                    // 3) Math.random() * (MAX - MIN + 1) returns values from 0 (inclusive)
                    // to (MAX - MIN + 1) (exclusive)
                    // 4) Math.floor(Math.random() * (MAX - MIN + 1)) returns values from 0 (inclusive)
                    // to (MAX - MIN) (inclusive!!!)
                    // 5) Math.floor(Math.random() * (MAX - MIN + 1)) + MIN returns values from
                    // MIN (inclusive) to MAX (inclusive) - exectly what we need
                    //
                    // Pay attention to 'inclusive' and 'exclusive'
                    td.textContent = Math.floor(Math.random() * (MAX - MIN + 1)) + MIN;

                    // Obvious (I hope)
                    if (i == CHOSEN_ROW && j == CHOSEN_COL) {
                        chosenTd = td;
                        chosenTd.className = 'grn';
                        chosenTd.textContent = SYMBOL;
                    }

                    tr.append(td);
                }
                table.append(tr);
            }

            table.onclick = function(e) {
                // If we click not at chosen cell (you call it 'symbol')
                if (e.target != chosenTd) {
                    // Now just free cell where 'symbol' is
                    // And 'move' the 'symbol'

                    e.target.textContent = chosenTd.textContent;

                    chosenTd.className = '';
                    chosenTd.textContent = '';

                    chosenTd = e.target;
                    chosenTd.className = 'grn';
                }
            }

            document.querySelector('#ff').append(table);
        }
    </script>
</body>
</html>

Конечно, вы также должны проверить, что e.target это, например, ячейка, а не строка или полная таблица. Но я уверен, что вы можете сделать это самостоятельно.

0 голосов
/ 15 февраля 2020

Помимо Переполнение стека - как генерировать случайное число в диапазоне ...
Я думаю, вы слишком усложняете код. Вот предложение: 

const size = 5;
const rand = (min, max) => ~~(Math.random() * (max - min) + min);
let tdEmpty = null;            // A place to store the currently empty cell 

const moveValue = evt => {
  const text = evt.target.textContent; // Get cell text
  if (!text) return;           // Clicked empty one, stop function.
  tdEmpty.textContent = text;  // Move text to the currently empty
  evt.target.textContent = ''; // Clear text from the clicked one
  tdEmpty = evt.target;        // Store the new empty TD cell.
};

const newTD = TR => {
  const td = TR.insertCell();
  const text = tdEmpty ? rand(50, 501) : ""; // Create "num" or "" 
  td.appendChild(document.createTextNode(text));
  td.addEventListener('click', moveValue); // Assign a click callback
  if (!tdEmpty) tdEmpty = td;              // Store the first empty cell
};

const newTR = TABLE => {
  const tr = TABLE.insertRow();
  for (let i=0; i<size; i++) newTD(tr);
};

const table = document.createElement('table');
for (let i=0; i<size; i++) newTR(table);

document.querySelector('#ff').appendChild(table);
td { border: 2px solid black; }
td:hover { background-color: lightgreen; }
<div id='ff'></div>

Полезные ссылки:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertCell
https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode
Генерация случайных целых чисел в JavaScript в заданном диапазоне c?

0 голосов
/ 15 февраля 2020

Я заметил, что вы используете isCol в качестве переключателя при каждом нажатии на ячейку. Вместо того, чтобы добавлять, а затем делать модуль; используйте логическое значение. 

isCol=false;

function prs(...) {
    showTable(...);
    isCol=!isCol;
}

таким образом вы можете упростить оператор toColor. 

if(isCol) {
    return row === chosen_row;
}
else {
    return col === chosen_col;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...