diff --git a/estilos.css b/estilos.css
new file mode 100644
index 0000000..d3eb018
--- /dev/null
+++ b/estilos.css
@@ -0,0 +1,16 @@
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #f4f4f4;
+ flex-direction: column;
+}
+canvas {
+ border: 1px solid black;
+ background-color: white;
+ cursor: crosshair;
+}
+select {
+ margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 265dc2a..d5e75b0 100644
--- a/index.html
+++ b/index.html
@@ -4,24 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Cuadriculado con Pincel ASCII</title>
- <style>
- body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- background-color: #f4f4f4;
- flex-direction: column;
- }
- canvas {
- border: 1px solid black;
- background-color: white;
- cursor: crosshair;
- }
- select {
- margin-bottom: 10px;
- }
- </style>
+ <link rel="stylesheet" href="estilos.css">
</head>
<body>
<select id="seleccionAscii">
@@ -32,91 +15,12 @@
<option value="%">%</option>
</select>
<button id="botonLimpiar">Limpiar</button>
+ <br>
<input type="color" value="#000000" id="colorPicker">
+ <br>
<canvas id="lienzoCuadriculado" width="500" height="500">
Tu navegador no admite el elemento <canvas>.
</canvas>
- <script>
- const colorPicker = document.getElementById("colorPicker");
- const lienzo = document.getElementById("lienzoCuadriculado");
- const contexto = lienzo.getContext("2d");
- const tamanoCuadricula = 20; // Tamaño de cada celda en píxeles
- let dibujando = false;
- const seleccionAscii = document.getElementById("seleccionAscii");
-
- // Mapa para almacenar los caracteres y sus colores
- const caracteresEnPosiciones = new Map();
-
- function dibujarCuadricula() {
- contexto.strokeStyle = "#ddd";
- for (let x = 0; x <= lienzo.width; x += tamanoCuadricula) {
- contexto.beginPath();
- contexto.moveTo(x, 0);
- contexto.lineTo(x, lienzo.height);
- contexto.stroke();
- }
- for (let y = 0; y <= lienzo.height; y += tamanoCuadricula) {
- contexto.beginPath();
- contexto.moveTo(0, y);
- contexto.lineTo(lienzo.width, y);
- contexto.stroke();
- }
- }
-
- function obtenerPosicionAjustada(posicion) {
- return Math.floor(posicion / tamanoCuadricula) * tamanoCuadricula;
- }
-
- function dibujarAscii(x, y) {
- const ascii = seleccionAscii.value;
- const color = colorPicker.value;
- const posicionClave = `${x},${y}`;
- const caracterInfo = caracteresEnPosiciones.get(posicionClave);
-
- // Solo dibuja si la celda está vacía o si el carácter o color es diferente
- if (!caracterInfo || caracterInfo.ascii !== ascii || caracterInfo.color !== color) {
- // Limpia la celda antes de dibujar
- contexto.clearRect(x, y, tamanoCuadricula, tamanoCuadricula);
- // Redibuja la línea de la cuadrícula para esa celda
- contexto.strokeStyle = "#ddd";
- contexto.strokeRect(x, y, tamanoCuadricula, tamanoCuadricula);
-
- // Dibuja el nuevo carácter con el color seleccionado
- contexto.font = `${tamanoCuadricula}px monospace`;
- contexto.fillStyle = color;
- contexto.fillText(ascii, x, y + tamanoCuadricula - 5);
-
- // Almacena el nuevo carácter y su color en el mapa
- caracteresEnPosiciones.set(posicionClave, { ascii, color });
- }
- }
-
- botonLimpiar.addEventListener("click", () => {
- contexto.clearRect(0, 0, lienzo.width, lienzo.height);
- caracteresEnPosiciones.clear();
- dibujarCuadricula();
- });
-
- lienzo.addEventListener("mousedown", (evento) => {
- dibujando = true;
- const x = obtenerPosicionAjustada(evento.offsetX);
- const y = obtenerPosicionAjustada(evento.offsetY);
- dibujarAscii(x, y);
- });
-
- lienzo.addEventListener("mousemove", (evento) => {
- if (dibujando) {
- const x = obtenerPosicionAjustada(evento.offsetX);
- const y = obtenerPosicionAjustada(evento.offsetY);
- dibujarAscii(x, y);
- }
- });
-
- lienzo.addEventListener("mouseup", () => {
- dibujando = false;
- });
-
- dibujarCuadricula();
- </script>
+ <script src="script.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..99486c6
--- /dev/null
+++ b/script.js
@@ -0,0 +1,80 @@
+const colorPicker = document.getElementById("colorPicker");
+ const lienzo = document.getElementById("lienzoCuadriculado");
+ const contexto = lienzo.getContext("2d");
+ const tamanoCuadricula = 20; // Tamaño de cada celda en píxeles
+ let dibujando = false;
+ const seleccionAscii = document.getElementById("seleccionAscii");
+
+ // Mapa para almacenar los caracteres y sus colores
+ const caracteresEnPosiciones = new Map();
+
+ function dibujarCuadricula() {
+ contexto.strokeStyle = "#ddd";
+ for (let x = 0; x <= lienzo.width; x += tamanoCuadricula) {
+ contexto.beginPath();
+ contexto.moveTo(x, 0);
+ contexto.lineTo(x, lienzo.height);
+ contexto.stroke();
+ }
+ for (let y = 0; y <= lienzo.height; y += tamanoCuadricula) {
+ contexto.beginPath();
+ contexto.moveTo(0, y);
+ contexto.lineTo(lienzo.width, y);
+ contexto.stroke();
+ }
+ }
+
+ function obtenerPosicionAjustada(posicion) {
+ return Math.floor(posicion / tamanoCuadricula) * tamanoCuadricula;
+ }
+
+ function dibujarAscii(x, y) {
+ const ascii = seleccionAscii.value;
+ const color = colorPicker.value;
+ const posicionClave = `${x},${y}`;
+ const caracterInfo = caracteresEnPosiciones.get(posicionClave);
+
+ // Solo dibuja si la celda está vacía o si el carácter o color es diferente
+ if (!caracterInfo || caracterInfo.ascii !== ascii || caracterInfo.color !== color) {
+ // Limpia la celda antes de dibujar
+ contexto.clearRect(x, y, tamanoCuadricula, tamanoCuadricula);
+ // Redibuja la línea de la cuadrícula para esa celda
+ contexto.strokeStyle = "#ddd";
+ contexto.strokeRect(x, y, tamanoCuadricula, tamanoCuadricula);
+
+ // Dibuja el nuevo carácter con el color seleccionado
+ contexto.font = `${tamanoCuadricula}px monospace`;
+ contexto.fillStyle = color;
+ contexto.fillText(ascii, x, y + tamanoCuadricula - 5);
+
+ // Almacena el nuevo carácter y su color en el mapa
+ caracteresEnPosiciones.set(posicionClave, { ascii, color });
+ }
+ }
+
+ botonLimpiar.addEventListener("click", () => {
+ contexto.clearRect(0, 0, lienzo.width, lienzo.height);
+ caracteresEnPosiciones.clear();
+ dibujarCuadricula();
+ });
+
+ lienzo.addEventListener("mousedown", (evento) => {
+ dibujando = true;
+ const x = obtenerPosicionAjustada(evento.offsetX);
+ const y = obtenerPosicionAjustada(evento.offsetY);
+ dibujarAscii(x, y);
+ });
+
+ lienzo.addEventListener("mousemove", (evento) => {
+ if (dibujando) {
+ const x = obtenerPosicionAjustada(evento.offsetX);
+ const y = obtenerPosicionAjustada(evento.offsetY);
+ dibujarAscii(x, y);
+ }
+ });
+
+ lienzo.addEventListener("mouseup", () => {
+ dibujando = false;
+ });
+
+ dibujarCuadricula();
\ No newline at end of file