A game where what is drawn is animated but the child can draw.'s game

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

No:8899

←

Prev Next

→

A game where what is drawn is animated but the chi..ALL
Developer User4264｜Date and time 23/7/19 10:56:56
Build time 23.184 sec｜Game capacity 3.051KB｜

Script

Aquí tienes un ejemplo de un juego en HTML con JavaScript donde los niños pueden dibujar y ver cómo sus dibujos se animan:

Este juego permite a los niños dibujar en un lienzo utilizando el ratón o la pantalla táctil de un dispositivo móvil. El dibujo se realizará con un ancho de línea negro y de 5 píxeles. Pueden dibujar y ver cómo su dibujo se anima en tiempo real. Espero que esto te ayude a crear tu juego de dibujo animado. ¡Diviértete!

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Aquí tienes un ejemplo de un juego en HTML con JavaScript donde los niños pueden dibujar y ver cómo sus dibujos se animan:

```html
<!DOCTYPE html>
<html>
<head>
    <script>
        window.addEventListener('load', iniciarJuego);

function iniciarJuego() {
            // Obtener el lienzo y el contexto para dibujar
            var lienzo = document.getElementById('lienzo');
            var contexto = lienzo.getContext('2d');

// Variables para el dibujo
            var dibujando = false;
            var ultimoX = 0;
            var ultimoY = 0;

// Función para dibujar en el lienzo
            function dibujar(x, y) {
                if (dibujando) {
                    contexto.beginPath();
                    contexto.strokeStyle = 'black';
                    contexto.lineWidth = 5;
                    contexto.moveTo(ultimoX, ultimoY);
                    contexto.lineTo(x, y);
                    contexto.stroke();
                    contexto.closePath();
                }

ultimoX = x;
                ultimoY = y;
            }

// Eventos de ratón y táctil para dibujar
            lienzo.addEventListener('mousedown', function(evento) {
                dibujando = true;
                ultimoX = evento.pageX - lienzo.offsetLeft;
                ultimoY = evento.pageY - lienzo.offsetTop;
            });

lienzo.addEventListener('mousemove', function(evento) {
                if (dibujando) {
                    var x = evento.pageX - lienzo.offsetLeft;
                    var y = evento.pageY - lienzo.offsetTop;
                    dibujar(x, y);
                }
            });

lienzo.addEventListener('mouseup', function() {
                dibujando = false;
            });

lienzo.addEventListener('touchstart', function(evento) {
                evento.preventDefault();
                dibujando = true;
                var x = evento.touches[0].pageX - lienzo.offsetLeft;
                var y = evento.touches[0].pageY - lienzo.offsetTop;
                dibujar(x, y);
            });

lienzo.addEventListener('touchmove', function(evento) {
                evento.preventDefault();
                if (dibujando) {
                    var x = evento.touches[0].pageX - lienzo.offsetLeft;
                    var y = evento.touches[0].pageY - lienzo.offsetTop;
                    dibujar(x, y);
                }
            });

lienzo.addEventListener('touchend', function() {
                dibujando = false;
            });
        }
    </script>
</head>
<body>
    <canvas id="lienzo" width="500" height="500"></canvas>
</body>
</html>
```

Espero que esto te ayude a crear tu juego de dibujo animado. ¡Diviértete!