Javascript 在React中创建数独
我已经创建了一个由js函数生成的数独游戏，我试图用react来显示它，但我不知道为什么它不起作用 我试着创建81个方块，它们有一个id和值，值，当我在里面放一个数字时，它将执行函数comprobar，如果正确的话，将背景置为read或whiteJavascript 在React中创建数独,javascript,reactjs,Javascript,Reactjs,我已经创建了一个由js函数生成的数独游戏，我试图用react来显示它，但我不知道为什么它不起作用 我试着创建81个方块，它们有一个id和值，值，当我在里面放一个数字时，它将执行函数comprobar，如果正确的话，将背景置为read或white import React, { Component } from "react"; import ReactDOM from "react-dom"; import "./index.css"; /*Se genera el d
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./index.css";
/*Se genera el diseño */
var fallo;
// Array que contendra las posiciones que se mostrarán
var array = new Array(9);
// Array de 9x9 que contiene la solucion. generada
for (var z = 0; z < 9; z++) {
array[z] = new Array(9);
}
function rellenarCuad(n, m) {
// Método que recibe el punto de comienzo del cuadrado
var x = n * 3;
var z = m * 3;
var arrN = [1, 2, 3, 4, 5, 6, 7, 8, 9];
/* En este método se procede a rellenar el cuadrado 3x3 cumpliendo que no se repita en el mismo, en la fila y en la columna */
for (var i = x; i < 3 + x; i++) {
for (var j = z; j < 3 + z; j++) {
var arrayaux = new Array(9);
for (var zn = 0; zn < 9; zn++) arrayaux[zn] = array[zn][j];
var pr = true;
var intentos = 0;
do {
do {
var nm = Math.floor(Math.random() * 9, 0);
} while (arrN[nm] == 0);
if (
array[i].indexOf(arrN[nm]) === -1 &&
arrayaux.indexOf(arrN[nm]) === -1
) {
array[i][j] = arrN[nm];
arrN[nm] = 0;
pr = false;
}
if (intentos > 50) {
// Si rebasa 50 intentos doy por hecho que no tiene solucion
fallo = true;
return;
}
intentos++;
} while (pr);
}
}
}
// Método que genera el sodoku. Es recursivo, si no se halla una solución se llama a si mismo hasta encontrarla
function generarSodoku() {
// Método que simplemente llamar a rellenarCuad por cada cuadrado 3x3, es decir, le llama 9 veces
for (var i = 0; i < 3; i++) {
for (var y = 0; y < 3; y++) {
rellenarCuad(y, i);
if (fallo) {
// Si el seguro se activa, regenera el array y se llama asi mismo para repetir el proceso.
fallo = false;
array = null;
array = new Array(9);
for (z = 0; z < 9; z++) array[z] = new Array(9);
generarSodoku();
return;
}
}
}
}
// Función que genera el numero de posiciones a ocultar según la eleción del usuario
function umbral() {
var nm = 80;
var arrayM = new Array(nm);
for (var l = 0; l < nm; l++) {
var alpha = true;
while (alpha) {
var num = Math.floor(Math.random() * 81) + 1;
if (arrayM.indexOf(num) !== -1) {
} else {
arrayM[l] = num;
alpha = false;
}
}
}
}
generarSodoku();
console.log(array);
var valoresVacios = [0];
function generarAleatorios() {
for (let i = 1; i < 5; i++) {
do {
var numAlea = Math.floor(Math.random() * 80);
} while (!valoresVacios.indexOf(valoresVacios[i]));
valoresVacios[i] = numAlea;
}
}
generarAleatorios();
function comprobar(value, i) {
if (valoresVacios.indexOf(i)) {
var valor = Math.floor(i / 9);
var segundo = (i / 9).toFixed(1);
segundo = (segundo - valor) * 10;
if (array[valor][segundo] !== value) {
document.getElementById(i).style.backgroundColor = "red";
} else {
document.getElementById(i).style.backgroundColor = "white";
}
}
}
function Square(props) {
return (
<input className="square" type="text" onkeypress={comprobar(this.value, this.id)} />
);
}
class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
squares: Array(81),
};
}
comprobar(value, i) {
if (valoresVacios.indexOf(i)) {
var valor = Math.floor(i / 9);
var segundo = (i / 9).toFixed(1);
segundo = (segundo - valor) * 10;
if (array[valor][segundo] !== value) {
document.getElementById(i).style.backgroundColor = "red";
} else {
document.getElementById(i).style.backgroundColor = "white";
}
}
}
renderSquare(a, i) {
if (valoresVacios.indexOf(i)) {
return <Square value={0} id={i} onkeypress={() => this.comprobar(a, i)}/>;
} else {
return <Square value={a} id={i} disabled onkeypress={() => this.comprobar(a, i)}/>;
}
}
render() {
/*const winner = calculateWinner(this.state.squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
}*/
return (
<div>
<div className="status">{}</div>
<div className="board-row">
{this.renderSquare(array[0][0], 0)}
{this.renderSquare(array[0][1], 1)}
{this.renderSquare(array[0][2], 2)}
{this.renderSquare(array[0][3], 3)}
{this.renderSquare(array[0][4], 4)}
{this.renderSquare(array[0][5], 5)}
{this.renderSquare(array[0][6], 6)}
{this.renderSquare(array[0][7], 7)}
{this.renderSquare(array[0][8], 8)}
</div>
<div className="board-row">
{this.renderSquare(array[1][0], 9)}
{this.renderSquare(array[1][1], 10)}
{this.renderSquare(array[1][2], 11)}
{this.renderSquare(array[1][3], 12)}
{this.renderSquare(array[1][4], 13)}
{this.renderSquare(array[1][5], 14)}
{this.renderSquare(array[1][6], 15)}
{this.renderSquare(array[1][7], 16)}
{this.renderSquare(array[1][8], 17)}
</div>
<div className="board-row">
{this.renderSquare(array[2][0], 18)}
{this.renderSquare(array[2][1], 19)}
{this.renderSquare(array[2][2], 20)}
{this.renderSquare(array[2][3], 21)}
{this.renderSquare(array[2][4], 22)}
{this.renderSquare(array[2][5], 23)}
{this.renderSquare(array[2][6], 24)}
{this.renderSquare(array[2][7], 25)}
{this.renderSquare(array[2][8], 26)}
</div>
<div className="board-row">
{this.renderSquare(array[3][0], 27)}
{this.renderSquare(array[3][1], 28)}
{this.renderSquare(array[3][2], 29)}
{this.renderSquare(array[3][3], 30)}
{this.renderSquare(array[3][4], 31)}
{this.renderSquare(array[3][5], 32)}
{this.renderSquare(array[3][6], 33)}
{this.renderSquare(array[3][7], 34)}
{this.renderSquare(array[3][8], 35)}
</div>
<div className="board-row">
{this.renderSquare(array[4][0], 36)}
{this.renderSquare(array[4][1], 37)}
{this.renderSquare(array[4][2], 38)}
{this.renderSquare(array[4][3], 39)}
{this.renderSquare(array[4][4], 40)}
{this.renderSquare(array[4][5], 41)}
{this.renderSquare(array[4][6], 42)}
{this.renderSquare(array[4][7], 43)}
{this.renderSquare(array[4][8], 44)}
</div>
<div className="board-row">
{this.renderSquare(array[5][0], 45)}
{this.renderSquare(array[5][1], 46)}
{this.renderSquare(array[5][2], 47)}
{this.renderSquare(array[5][3], 48)}
{this.renderSquare(array[5][4], 49)}
{this.renderSquare(array[5][5], 50)}
{this.renderSquare(array[5][6], 51)}
{this.renderSquare(array[5][7], 52)}
{this.renderSquare(array[5][8], 53)}
</div>
<div className="board-row">
{this.renderSquare(array[6][0], 54)}
{this.renderSquare(array[6][1], 55)}
{this.renderSquare(array[6][2], 56)}
{this.renderSquare(array[6][3], 57)}
{this.renderSquare(array[6][4], 58)}
{this.renderSquare(array[6][5], 59)}
{this.renderSquare(array[6][6], 60)}
{this.renderSquare(array[6][7], 61)}
{this.renderSquare(array[6][8], 62)}
</div>
<div className="board-row">
{this.renderSquare(array[7][0], 63)}
{this.renderSquare(array[7][1], 64)}
{this.renderSquare(array[7][2], 65)}
{this.renderSquare(array[7][3], 66)}
{this.renderSquare(array[7][4], 67)}
{this.renderSquare(array[7][5], 68)}
{this.renderSquare(array[7][6], 69)}
{this.renderSquare(array[7][7], 70)}
{this.renderSquare(array[7][8], 71)}
</div>
<div className="board-row">
{this.renderSquare(array[8][0], 72)}
{this.renderSquare(array[8][1], 73)}
{this.renderSquare(array[8][2], 74)}
{this.renderSquare(array[8][3], 75)}
{this.renderSquare(array[8][4], 76)}
{this.renderSquare(array[8][5], 77)}
{this.renderSquare(array[8][6], 78)}
{this.renderSquare(array[8][7], 79)}
{this.renderSquare(array[8][8], 80)}
</div>
</div>
);
}
}
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
import React，{Component}来自“React”；
从“react dom”导入react dom；
导入“/index.css”；
/*厄尔迪诺东南属*/
法洛变种；
//在莫斯特拉湾的一个广场上
var数组=新数组（9）；
//9×9的阵列用于控制溶液。将军
对于（var z=0；z<9；z++）{
数组[z]=新数组（9）；
}
函数rellenarCuad（n，m）{
//在卡德拉多社区，你的生活是怎样的
var x=n*3；
var z=m*3；
var arrN=[1,2,3,4,5,6,7,8,9]；
/*这是一个3x3立方厘米的卷轴，不需要在纸上和纸上打印*/
对于（变量i=x；i<3+x；i++）{
对于（var j=z；j<3+z；j++）{
var arrayaux=新数组（9）；
对于（var zn=0；zn<9；zn++）arrayaux[zn]=array[zn][j]；
var-pr=真；
var-intentos=0；
做{
做{
var nm=Math.floor（Math.random（）*9,0）；
}而（arrN[nm]==0）；
如果(
数组[i].indexOf（arrN[nm]）=-1&&
arrayaux.indexOf（arrN[nm]）=-1
) {
阵列[i][j]=arrN[nm]；
arrN[nm]=0；
pr=假；
}
如果（意向>50）{
//这是一个50年来没有解决方案的计划
法洛=真；
回来
}
intentos++；
}while（pr）；
}
}
}
//索多库家族的成员。这是一个反复的过程，不是一个幻觉，而是一个幻觉
函数generarSodoku（）{
//这是一种简化的骆驼，它的体积为3x3，分贝，9个向量
对于（变量i=0；i<3；i++）{
对于（变量y=0；y<3；y++）{
rellenarCuad（y，i）；
如果（法洛）{
//在整个过程中，摄政王阵列和骆驼都是重复的。
法洛=假；
数组=空；
数组=新数组（9）；
对于（z=0；z<9；z++）数组[z]=新数组（9）；
generarSodoku（）；
回来
}
}
}
}
//通常情况下，在使用电子设备的情况下，使用电子设备的人通常都会使用电子设备
函数本影（）{
var-nm=80；
var arrayM=新阵列（nm）；
对于（var l=0；l function Square(props) {
const handleKeyPress = (e) => {
comprobar(props.value, props.id)
}
return (
<input className="square" type="text" onkeypress={handleKeyPress} />
);
}
renderSquare(a, i) {
if (valoresVacios.indexOf(i)) {
return <Square value={0} id={i} />;
} else {
return <Square value={a} id={i} disabled />;
}
}