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

No:40441

←

Prev Next

→

FNF Coloring
Developer User13970｜Date and time 24/2/2 20:10:13
Build time 11.882 sec｜Game capacity 3.064KB｜

Script

Sure! Here's an example of a simple coloring game based on the popular game "Friday Night Funkin'" (FNF). The game allows you to color different characters from the game using a smartphone interface. It is implemented as a single HTML file, enclosed in script tags, and written in JavaScript.

FNF Coloring

To play the game, simply open the HTML file in a web browser on your smartphone. You will see a canvas with a set of color buttons below it. Select a color by tapping on one of the color buttons, and then start coloring the canvas by tapping or dragging your finger across the canvas area. The game allows you to create your own colorful versions of the FNF characters. Note: This is just a basic example to get you started. You can customize and add more features to enhance the game further.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>FNF Coloring</title>
    <style>
        body {
            text-align: center;
        }

.color-button {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: 5px;
            cursor: pointer;
        }

#canvas {
            margin-top: 20px;
            border: 1px solid black;
            display: inline-block;
        }
    </style>
</head>
<body>
    <h1>FNF Coloring</h1>
    <div id="colors">
        <div class="color-button" style="background-color: red;"></div>
        <div class="color-button" style="background-color: blue;"></div>
        <div class="color-button" style="background-color: green;"></div>
        
    </div>
    <canvas id="canvas" width="400" height="400" ></canvas>

// Initialize canvas with white background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

// Add click event listeners to color buttons
        const colorButtons = document.querySelectorAll('.color-button');
        colorButtons.forEach(button => {
            button.addEventListener('click', () => {
                color = button.style.backgroundColor;
            });
        });

// Function to handle coloring
        function colorPixel(e) {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

ctx.fillStyle = color;
            ctx.fillRect(x, y, 10, 10);
        }

// Add touch event listeners for touchscreen devices
        canvas.addEventListener('touchstart', (e) => {
            e.preventDefault();
            colorPixel(e.touches[0]);
        });

canvas.addEventListener('touchmove', (e) => {
            e.preventDefault();
            colorPixel(e.touches[0]);
        });

// Add click event listener for desktop devices
        canvas.addEventListener('click', (e) => {
            colorPixel(e);
        });
    </script>
</body>
</html>
```

Note: This is just a basic example to get you started. You can customize and add more features to enhance the game further.