A game where you draw and AI will guess the drawing I draw use skills to Make the game with satisfying's game

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

No:43398

←

Prev Next

→

A game where you draw and AI will guess the drawi..ALL
Developer User19182｜Date and time 24/2/15 12:55:33
Build time 10.078 sec｜Game capacity 4KB｜

Script

Sure! Here's an example of a simple drawing game using JavaScript, HTML, and the HTML5 canvas element. The game allows you to draw a shape on the canvas, and the AI will guess the drawing you have made. Please note that this is just a basic implementation, and you can enhance it further as per your requirements.

You can copy the above code into a single HTML file and open it in a web browser (preferably on a smartphone) to play the game. The drawing is made by dragging your finger on the canvas or using a mouse if playing on a computer.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Drawing Game</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <script>
        // Function to initialize the game
        function initializeGame() {
            // Get the canvas element
            var canvas = document.querySelector('canvas');
      
            // Set the canvas size to match the screen size
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
      
            // Get the 2D context of the canvas
            var ctx = canvas.getContext('2d');
      
            // Variable to store the drawing state
            var isDrawing = false;
      
            // Variables to hold the current and previous coordinates
            var currentX, currentY, previousX, previousY;
      
            // Event listener to track mouse/touch movement
            canvas.addEventListener('mousemove', draw);
            canvas.addEventListener('mousedown', startDrawing);
            canvas.addEventListener('mouseup', stopDrawing);
            canvas.addEventListener('mouseout', stopDrawing);
            canvas.addEventListener('touchmove', draw);
            canvas.addEventListener('touchstart', startDrawing);
            canvas.addEventListener('touchend', stopDrawing);
      
            // Function to start drawing
            function startDrawing(e) {
                isDrawing = true;
                [previousX, previousY] = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];
            }
      
            // Function to stop drawing
            function stopDrawing() {
                isDrawing = false;
            }
      
            // Function to draw based on user input
            function draw(e) {
                if (!isDrawing) return;
                e.preventDefault();
                [currentX, currentY] = [e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop];
      
                ctx.beginPath();
                ctx.moveTo(previousX, previousY);
                ctx.lineTo(currentX, currentY);
                ctx.stroke();
                [previousX, previousY] = [currentX, currentY];
            }
      
            // Function to clear the canvas
            function clearCanvas() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
      
            // Function to guess the drawing made by the user
            function guessDrawing() {
                alert("The AI guesses your drawing!");
                // Implement your logic here to guess the drawing
                // You can use an API or pre-defined patterns/rules to match the drawing made
            }
      
            // Add buttons to interact with the game
            var guessButton = document.createElement('button');
            guessButton.innerText = 'Guess Drawing';
            guessButton.addEventListener('click', guessDrawing);
            document.body.appendChild(guessButton);
      
            var clearButton = document.createElement('button');
            clearButton.innerText = 'Clear Canvas';
            clearButton.addEventListener('click', clearCanvas);
            document.body.appendChild(clearButton);
        }
      
        // Start the game when the page loads
        window.onload = initializeGame;
    </script>
    <canvas></canvas>
</body>
</html>
```