Skip to main content
se añadieron 4 caracteres en el cuerpo
Origen Enlace
user13558
user13558
a = 0

reiniciar = function() {
  Array.from(
    document.querySelectorAll("td")
  ).map(x => {
    x.setAttribute("color", "#80808000")
    x.style["background-color"] = x.getAttribute("color")
  })
}

document.body.addEventListener("mousedown",()=>a=1)
document.body.addEventListener("mouseup",()=>a=0)

Array.from(
  document.querySelectorAll("td")
).map(x => {
  x.addEventListener("mousedown", () => {
    a = 1;
    x.setAttribute("color", "blue")
    x.style.backgroundColor = x.getAttribute("color")
  })
  x.addEventListener("mousemove", () => {
    a && (
      x.setAttribute("color", "blue"),
      x.style.backgroundColor = x.getAttribute("color")
    ) || (
      x.style.backgroundColor = "red"
    )
  })
  x.addEventListener("mouseup", () => {
    a = 0;
    x.style.backgroundColor = "red"
  })
  x.addEventListener("mouseleave", () => {
    x.style.backgroundColor = x.getAttribute("color")
  })
})
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  width: 40px;
  height: 40px;
}
<p>
  <button onclick="reiniciar()">Reiniciar</button>
</p>
<p>
  <table id="casillas">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</p>
a = 0

reiniciar = function() {
  Array.from(
    document.querySelectorAll("td")
  ).map(x => {
    x.setAttribute("color", "#80808000")
x.style["background-color"] = x.getAttribute("color")
  })
}

document.body.addEventListener("mousedown",()=>a=1)
document.body.addEventListener("mouseup",()=>a=0)

Array.from(
  document.querySelectorAll("td")
).map(x => {
  x.addEventListener("mousedown", () => {
    a = 1;
    x.setAttribute("color", "blue")
    x.style.backgroundColor = x.getAttribute("color")
  })
  x.addEventListener("mousemove", () => {
    a && (
      x.setAttribute("color", "blue"),
      x.style.backgroundColor = x.getAttribute("color")
    ) || (
      x.style.backgroundColor = "red"
    )
  })
  x.addEventListener("mouseup", () => {
    a = 0;
    x.style.backgroundColor = "red"
  })
  x.addEventListener("mouseleave", () => {
    x.style.backgroundColor = x.getAttribute("color")
  })
})
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  width: 40px;
  height: 40px;
}
<p>
  <button onclick="reiniciar()">Reiniciar</button>
</p>
<p>
  <table id="casillas">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</p>
a = 0

reiniciar = function() {
  Array.from(
    document.querySelectorAll("td")
  ).map(x => {
    x.setAttribute("color", "#80808000")
    x.style["background-color"] = x.getAttribute("color")
  })
}

document.body.addEventListener("mousedown",()=>a=1)
document.body.addEventListener("mouseup",()=>a=0)

Array.from(
  document.querySelectorAll("td")
).map(x => {
  x.addEventListener("mousedown", () => {
    a = 1;
    x.setAttribute("color", "blue")
    x.style.backgroundColor = x.getAttribute("color")
  })
  x.addEventListener("mousemove", () => {
    a && (
      x.setAttribute("color", "blue"),
      x.style.backgroundColor = x.getAttribute("color")
    ) || (
      x.style.backgroundColor = "red"
    )
  })
  x.addEventListener("mouseup", () => {
    a = 0;
    x.style.backgroundColor = "red"
  })
  x.addEventListener("mouseleave", () => {
    x.style.backgroundColor = x.getAttribute("color")
  })
})
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  width: 40px;
  height: 40px;
}
<p>
  <button onclick="reiniciar()">Reiniciar</button>
</p>
<p>
  <table id="casillas">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</p>
se añadieron 612 caracteres en el cuerpo; se añadieron 10 caracteres en el cuerpo
Origen Enlace
user13558
user13558

Hay que capturar el estado del ratón en el documento en vez de las celdas, para tener mayor superficie... También es necesario asignar eventos a las celdas.

Se asigna el valor de a cuando ocurren los eventos en el body:

document.body.addEventListener("mousedown",()=>a=1)
document.body.addEventListener("mouseup",()=>a=0)

Si se suelta el ratón por fuera de la ventana del navegador podría haber problemas, porque al volver a entrar a la ventana, JavaScript no puede saber si el ratón está presionado, y la variable a estaría en el estado que estaba cuando el ratón estaba en la ventana.

a = 0

reiniciar = function() {
  Array.from(
    document.querySelectorAll("td")
  ).map(x => {
    x.setAttribute("color", "#80808000")
x.style["background-color"] = x.getAttribute("color")
  })
}

document.body.addEventListener("mousedown",()=>a=1)
document.body.addEventListener("mouseup",()=>a=0)

Array.from(
  document.querySelectorAll("td")
).map(x => {
  x.addEventListener("mousedown", () => {
    a = 1;
    x.setAttribute("color", "blue")
    x.style.backgroundColor = x.getAttribute("color")
  })
  x.addEventListener("mousemove", () => {
    a && (
      x.setAttribute("color", "blue"),
      x.style.backgroundColor = x.getAttribute("color")
    ) || (
      x.style.backgroundColor = "red"
    )
  })
  x.addEventListener("mouseup", () => {
    a = 0;
    x.style.backgroundColor = "red"
  })
  x.addEventListener("mouseleave", () => {
    x.style.backgroundColor = x.getAttribute("color")
  })
})
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  width: 40px;
  height: 40px;
}
<p>
  <button onclick="reiniciar()">Reiniciar</button>
</p>
<p>
  <table id="casillas">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</p>

Hay que capturar el estado del ratón en las celdas. También es necesario asignar eventos a las celdas.

a = 0

reiniciar = function() {
  Array.from(
    document.querySelectorAll("td")
  ).map(x => {
    x.setAttribute("color", "#80808000")
x.style["background-color"] = x.getAttribute("color")
  })
}

Array.from(
  document.querySelectorAll("td")
).map(x => {
  x.addEventListener("mousedown", () => {
    a = 1;
    x.setAttribute("color", "blue")
    x.style.backgroundColor = x.getAttribute("color")
  })
  x.addEventListener("mousemove", () => {
    a && (
      x.setAttribute("color", "blue"),
      x.style.backgroundColor = x.getAttribute("color")
    ) || (
      x.style.backgroundColor = "red"
    )
  })
  x.addEventListener("mouseup", () => {
    a = 0;
    x.style.backgroundColor = "red"
  })
  x.addEventListener("mouseleave", () => {
    x.style.backgroundColor = x.getAttribute("color")
  })
})
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  width: 40px;
  height: 40px;
}
<p>
  <button onclick="reiniciar()">Reiniciar</button>
</p>
<p>
  <table id="casillas">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</p>

Hay que capturar el estado del ratón en el documento en vez de las celdas, para tener mayor superficie... También es necesario asignar eventos a las celdas.

Se asigna el valor de a cuando ocurren los eventos en el body:

document.body.addEventListener("mousedown",()=>a=1)
document.body.addEventListener("mouseup",()=>a=0)

Si se suelta el ratón por fuera de la ventana del navegador podría haber problemas, porque al volver a entrar a la ventana, JavaScript no puede saber si el ratón está presionado, y la variable a estaría en el estado que estaba cuando el ratón estaba en la ventana.

a = 0

reiniciar = function() {
  Array.from(
    document.querySelectorAll("td")
  ).map(x => {
    x.setAttribute("color", "#80808000")
x.style["background-color"] = x.getAttribute("color")
  })
}

document.body.addEventListener("mousedown",()=>a=1)
document.body.addEventListener("mouseup",()=>a=0)

Array.from(
  document.querySelectorAll("td")
).map(x => {
  x.addEventListener("mousedown", () => {
    a = 1;
    x.setAttribute("color", "blue")
    x.style.backgroundColor = x.getAttribute("color")
  })
  x.addEventListener("mousemove", () => {
    a && (
      x.setAttribute("color", "blue"),
      x.style.backgroundColor = x.getAttribute("color")
    ) || (
      x.style.backgroundColor = "red"
    )
  })
  x.addEventListener("mouseup", () => {
    a = 0;
    x.style.backgroundColor = "red"
  })
  x.addEventListener("mouseleave", () => {
    x.style.backgroundColor = x.getAttribute("color")
  })
})
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  width: 40px;
  height: 40px;
}
<p>
  <button onclick="reiniciar()">Reiniciar</button>
</p>
<p>
  <table id="casillas">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</p>
se añadieron 4 caracteres en el cuerpo
Origen Enlace
user13558
user13558
  • Que se haya tocado click anteriormente. Se asigna 1 a una variable, en este caso la llamo a.

    x.addEventListener("mousedown", x => { a = 1 }

    x.addEventListener("mousedown", x => {
      a = 1
    }
    
  • Que no se haya soltado anteriormente. A la variable se le asigna otro valor, en este caso, 0.

    x.addEventListener("mouseup", x => { a = 0 }

    x.addEventListener("mouseup", x => {
      a = 0
    }
    
a = 0

reiniciar = function() {
  Array.from(
    document.querySelectorAll("td")
  ).map(x => {
    x.setAttribute("color", "#80808000")
x.style["background-color"] = x.getAttribute("color")
  })
}

Array.from(
  document.querySelectorAll("td")
).map(x => {
  x.addEventListener("mousedown", () => {
    a = 1;
    x.setAttribute("color", "blue")
    x.style.backgroundColor = x.getAttribute("color")
  })
  x.addEventListener("mousemove", () => {
    a && (
      x.setAttribute("color", "blue"),
      x.style.backgroundColor = x.getAttribute("color")
    ) || (
      x.style.backgroundColor = "red"
    )
  })
  x.addEventListener("mouseup", () => {
    a = 0;
    x.style.backgroundColor = "red"
  })
  x.addEventListener("mouseleave", () => {
    x.style.backgroundColor = x.getAttribute("color")
  })
})
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  width: 40px;
  height: 40px;
}
<div><p>
  <button onclick="reiniciar()">Reiniciar</button>
</div>p>
<div><p>
  <table id="casillas">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>p>
  • Que se haya tocado click anteriormente. Se asigna 1 a una variable, en este caso la llamo a.

    x.addEventListener("mousedown", x => { a = 1 }

  • Que no se haya soltado anteriormente. A la variable se le asigna otro valor, en este caso, 0.

    x.addEventListener("mouseup", x => { a = 0 }

a = 0

reiniciar = function() {
  Array.from(
    document.querySelectorAll("td")
  ).map(x => {
    x.setAttribute("color", "#80808000")
x.style["background-color"] = x.getAttribute("color")
  })
}

Array.from(
  document.querySelectorAll("td")
).map(x => {
  x.addEventListener("mousedown", () => {
    a = 1;
    x.setAttribute("color", "blue")
    x.style.backgroundColor = x.getAttribute("color")
  })
  x.addEventListener("mousemove", () => {
    a && (
      x.setAttribute("color", "blue"),
      x.style.backgroundColor = x.getAttribute("color")
    ) || (
      x.style.backgroundColor = "red"
    )
  })
  x.addEventListener("mouseup", () => {
    a = 0;
    x.style.backgroundColor = "red"
  })
  x.addEventListener("mouseleave", () => {
    x.style.backgroundColor = x.getAttribute("color")
  })
})
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  width: 40px;
  height: 40px;
}
<div>
  <button onclick="reiniciar()">Reiniciar</button>
</div>
<div>
  <table id="casillas">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>
  • Que se haya tocado click anteriormente. Se asigna 1 a una variable, en este caso la llamo a.

    x.addEventListener("mousedown", x => {
      a = 1
    }
    
  • Que no se haya soltado anteriormente. A la variable se le asigna otro valor, en este caso, 0.

    x.addEventListener("mouseup", x => {
      a = 0
    }
    
a = 0

reiniciar = function() {
  Array.from(
    document.querySelectorAll("td")
  ).map(x => {
    x.setAttribute("color", "#80808000")
x.style["background-color"] = x.getAttribute("color")
  })
}

Array.from(
  document.querySelectorAll("td")
).map(x => {
  x.addEventListener("mousedown", () => {
    a = 1;
    x.setAttribute("color", "blue")
    x.style.backgroundColor = x.getAttribute("color")
  })
  x.addEventListener("mousemove", () => {
    a && (
      x.setAttribute("color", "blue"),
      x.style.backgroundColor = x.getAttribute("color")
    ) || (
      x.style.backgroundColor = "red"
    )
  })
  x.addEventListener("mouseup", () => {
    a = 0;
    x.style.backgroundColor = "red"
  })
  x.addEventListener("mouseleave", () => {
    x.style.backgroundColor = x.getAttribute("color")
  })
})
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  width: 40px;
  height: 40px;
}
<p>
  <button onclick="reiniciar()">Reiniciar</button>
</p>
<p>
  <table id="casillas">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</p>
Cambios generales para adaptarla a la pregunta.
Origen Enlace
user13558
user13558
Loading
Origen Enlace
user13558
user13558
Loading