Click here for free DL of the app version that can save data.

No:22714

120

←

Prev Next

→

Un juego donde presionamos un botón para poner un ..ALL
Developer User3408｜Date and time 23/10/24 8:02:11
Build time 28.389 sec｜Game capacity 1.747KB｜

Script

Juego de Píxeles

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <title>Juego de Píxeles</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>Juego de Píxeles</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Arreglo para almacenar las coordenadas de los píxeles
      const pixels = [];

// Función para dibujar los píxeles en el canvas
      function drawPixels() {
        context.clearRect(0, 0, canvas.width, canvas.height);

pixels.forEach((pixel) => {
          context.fillStyle = pixel.color;
          context.fillRect(pixel.x, pixel.y, 10, 10);
        });
      }

// Función que se ejecuta cuando se presiona el botón
      function addPixel() {
        // Generar una coordenada aleatoria para el nuevo píxel
        const randomX = Math.floor(Math.random() * (canvas.width - 10));
        const randomY = Math.floor(Math.random() * (canvas.height - 10));

// Generar un color aleatorio para el nuevo píxel
        const randomColor =
          "#" + ((Math.random() * 0xffffff) << 0).toString(16);

// Agregar el nuevo píxel al arreglo
        pixels.push({ x: randomX, y: randomY, color: randomColor });

// Dibujar los píxeles actualizados
        drawPixels();
      }

// Asignar el evento click al botón
      const button = document.createElement("button");
      button.textContent = "Agregar Píxel";
      button.addEventListener("click", addPixel);
      document.body.appendChild(button);
    </script>
  </body>
</html>