AI game creator

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

No:8307

267

←

Prev Next

→

Drawing game
Developer User4162｜Date and time 23/7/14 23:46:30
Build time 17.031 sec｜Game capacity 1.938KB｜

Script

En tant que programmeur, veuillez trouver ci-dessous un exemple de jeu de dessin réalisé en utilisant une balise script dans un fichier HTML :

Ce code crée un canvas interactif où les utilisateurs peuvent dessiner à l'aide de leur doigt sur un smartphone. Lorsque l'utilisateur touche l'écran et se déplace, une ligne est tracée sur le canvas. L'utilisateur peut continuer à dessiner en touchant et en se déplaçant sur l'écran.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

En tant que programmeur, veuillez trouver ci-dessous un exemple de jeu de dessin réalisé en utilisant une balise script dans un fichier HTML :

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Jeu de dessin</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    
    <script>
      // Récupérer le canvas et son context
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      
      // Variables pour stocker le statut du dessin
      let isDrawing = false;
      let lastX = 0;
      let lastY = 0;
      
      // Fonction pour commencer le dessin
      function startDrawing(event) {
        isDrawing = true;
        lastX = event.touches[0].clientX - canvas.offsetLeft;
        lastY = event.touches[0].clientY - canvas.offsetTop;
      }
      
      // Fonction pour arrêter le dessin
      function stopDrawing() {
        isDrawing = false;
      }
      
      // Fonction pour dessiner
      function draw(event) {
        if (!isDrawing) return;
        
        const x = event.touches[0].clientX - canvas.offsetLeft;
        const y = event.touches[0].clientY - canvas.offsetTop;
        
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.closePath();
        
        lastX = x;
        lastY = y;
      }
      
      // Attacher les événements tactiles au canvas
      canvas.addEventListener('touchstart', startDrawing);
      canvas.addEventListener('touchend', stopDrawing);
      canvas.addEventListener('touchmove', draw);
    </script>
  </body>
</html>
```