A drawing game where a bot tries to guess your drawing after you are given a prompt to draw's game

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

No:20458

←

Prev Next

→

A drawing game where a bot tries to guess your dra..ALL
Developer Aghrags｜Date and time 23/10/9 21:22:12
Build time 18.712 sec｜Game capacity 3.05KB｜

Script

Sure! Here's an HTML file that implements a simple drawing game using JavaScript:

This HTML file includes a canvas element where the user can draw using their finger or a stylus on a smartphone. After the user finishes drawing, the bot compares their drawing with its guess and presents a result message using an alert box. To add more prompts and corresponding bot guesses, simply modify the `botGuesses` object in the JavaScript code. Each prompt is associated with a corresponding guess. Feel free to customize the game further based on your preferences. Remember to save the file with the ".html" extension and open it with a web browser on your smartphone to play the game. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's an HTML file that implements a simple drawing game using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Guess My Drawing</title>
  <style>
    canvas {
      border: 1px solid black;
      touch-action: none;
    }
  </style>
</head>
<body>
  <canvas id="drawingCanvas" width="400" height="400"></canvas>
  <script>
    // Prompt for the user to draw
    const prompt = "Draw a cat!";

// Bot's guesses for different prompts
    const botGuesses = {
      "Draw a cat!": "cat",
      "Draw a tree!": "tree",
      "Draw a smiley face!": "smiley"
      // Add more prompts and corresponding guesses here as needed
    };

// Function to compare user's drawing with bot's guess
    function compareDrawings(userDrawing, botGuess) {
      if (userDrawing === botGuess) {
        return "Congratulations! Your drawing of a " + botGuess + " is correct!";
      } else {
        return "Oops! Your drawing is not a " + botGuess + ". Try again!";
      }
    }

window.onload = function() {
      const canvas = document.getElementById("drawingCanvas");
      const ctx = canvas.getContext("2d");
      let isDrawing = false;
      let lastX = 0;
      let lastY = 0;

function startDrawing(e) {
        isDrawing = true;
        [lastX, lastY] = [e.offsetX, e.offsetY];
      }

function draw(e) {
        if (!isDrawing) return;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];
      }

function stopDrawing() {
        isDrawing = false;
        const userDrawing = canvas.toDataURL(); // Get the base64 encoded image of the drawing
        const botGuess = botGuesses[prompt];
        const result = compareDrawings(userDrawing, botGuess);
        alert(result);
      }

canvas.addEventListener("mousedown", startDrawing);
      canvas.addEventListener("mousemove", draw);
      canvas.addEventListener("mouseup", stopDrawing);
      canvas.addEventListener("mouseout", stopDrawing);

canvas.addEventListener("touchstart", startDrawing, false);
      canvas.addEventListener("touchmove", draw, false);
      canvas.addEventListener("touchend", stopDrawing, false);
      canvas.addEventListener("touchcancel", stopDrawing, false);
    };
  </script>
</body>
</html>
```

To add more prompts and corresponding bot guesses, simply modify the `botGuesses` object in the JavaScript code. Each prompt is associated with a corresponding guess. Feel free to customize the game further based on your preferences.

Remember to save the file with the ".html" extension and open it with a web browser on your smartphone to play the game. Enjoy!