Draw Lines To Save Puppies's game

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

No:42695

203

←

Prev Next

→

Draw Lines To Save Puppies
Developer User13970｜Date and time 24/2/12 20:20:49
Build time 12.838 sec｜Game capacity 3.636KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Draw Lines To Save Puppies</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

canvas {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    
    <script>
        // Get the canvas element and context
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        const puppyImage = new Image();
        puppyImage.src = "puppy.png";
        
        let isDrawing = false;
        let startX = 0;
        let startY = 0;
        let endX = 0;
        let endY = 0;
        let puppiesSaved = 0;
        
        // Event listener to handle touch events
        canvas.addEventListener("touchstart", startDrawing);
        canvas.addEventListener("touchmove", drawLine);
        canvas.addEventListener("touchend", savePuppies);
        
        // Function to start drawing
        function startDrawing(e) {
            const touch = e.touches[0];
            startX = touch.clientX;
            startY = touch.clientY;
            isDrawing = true;
        }
        
        // Function to draw lines
        function drawLine(e) {
            e.preventDefault();
            
            if (isDrawing) {
                const touch = e.touches[0];
                endX = touch.clientX;
                endY = touch.clientY;
                
                ctx.strokeStyle = "black";
                ctx.lineWidth = 5;
                ctx.beginPath();
                ctx.moveTo(startX, startY);
                ctx.lineTo(endX, endY);
                ctx.stroke();
                
                // Update start position for the next line segment
                startX = endX;
                startY = endY;
            }
        }
        
        // Function to save puppies when lines intersect them
        function savePuppies() {
            isDrawing = false;
            const puppies = [
                { x: 100, y: 100 },
                { x: 200, y: 200 },
                { x: 300, y: 300 }
            ];
            
            puppies.forEach(puppy => {
                if (segmentsIntersect(startX, startY, endX, endY, puppy.x, puppy.y, puppy.x + 50, puppy.y + 50)) {
                    puppiesSaved++;
                }
            });
            
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Render the saved puppies count
            ctx.fillStyle = "black";
            ctx.font = "24px Arial";
            ctx.fillText("Puppies Saved: " + puppiesSaved, 10, 30);
        }
        
        // Function to check if two line segments intersect
        function segmentsIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
            const ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
            const ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
            
            if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
                return true;
            }
            
            return false;
        }
        
        // Render initial text
        ctx.fillStyle = "black";
        ctx.font = "24px Arial";
        ctx.fillText("Draw lines to save the puppies!", 10, 30);
    </script>
</body>
</html>