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

No:1219

195

←

Prev Next

→

A game where it is only black and a green pixel an..ALL
Developer User3280｜Date and time 23/6/18 8:45:13
Build time 19.056 sec｜Game capacity 1.851KB｜

Script

negro y azul.

Juego de Duplicación de Pixeles

¡Toque el pixel verde para duplicarlo!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

negro y azul.

<html>
<head>
<title>Juego de Duplicación de Pixeles</title>
<style>
body {
    background-color: black;
    font-size: 2rem;
    color: white;
    text-align: center;
}
#canvas {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    border: 2px solid white;
}
</style>
</head>
<body>

<h1>Juego de Duplicación de Pixeles</h1>
<p>¡Toque el pixel verde para duplicarlo!</p>

var greenPixelX = canvas.width/2;
var greenPixelY = canvas.height/2;

// Dibuja el pixel verde en una posición aleatoria
function drawGreenPixel() {
    greenPixelX = Math.floor(Math.random() * canvas.width);
    greenPixelY = Math.floor(Math.random() * canvas.height);
    ctx.fillStyle = 'green';
    ctx.fillRect(greenPixelX, greenPixelY, 2, 2);
}

// Duplica el pixel verde
function duplicateGreenPixel() {
    ctx.fillStyle = 'green';
    ctx.fillRect(greenPixelX, greenPixelY, 2, 2);
    greenPixelX += 5;
    greenPixelY += 5;
    ctx.fillRect(greenPixelX, greenPixelY, 2, 2);
}

// Dibuja el pixel rojo y borra los pixeles verdes
function drawRedPixel() {
    ctx.fillStyle = 'red';
    ctx.fillRect(greenPixelX, greenPixelY, 2, 2);
    ctx.fillStyle = 'blue';
    ctx.fillRect(canvas.width/2, canvas.height/2, 2, 2);
    greenPixelX = canvas.width/2;
    greenPixelY = canvas.height/2;
}

// Detecta los clics del usuario
canvas.addEventListener('click', function(event) {
    var x = event.pageX - canvas.offsetLeft;
    var y = event.pageY - canvas.offsetTop;
    
    if (x >= greenPixelX && x <= greenPixelX + 2 && y >= greenPixelY && y <= greenPixelY + 2) {
        duplicateGreenPixel();
    } else {
        drawRedPixel();
    }
});

// Dibuja el pixel verde para empezar
drawGreenPixel();
</script>

</body>
</html>