Random face gen, create a 3d looking face using mutiple 2d triangles when red button is pressed's game

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

No:22736

←

Prev Next

→

Random face gen, create a 3d looking face using mu..ALL
Developer User10477｜Date and time 23/10/24 13:24:19
Build time 43.933 sec｜Game capacity 2.873KB｜

Script

Sure! Below is an example of a single HTML file that generates a random 3D-looking face using multiple 2D triangles when the red button is pressed. The generated face will be displayed as a series of pictograms.

To use this game on a smartphone, simply open the HTML file in a mobile web browser, and you will see a canvas displaying a 2D face. Press the "Generate Face" button to randomly generate a new face using different combinations of colors for the face, eyes, and mouth.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Random Face Generator</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="faceCanvas" width="300" height="300"></canvas>
    <button id="generateButton">Generate Face</button>

// Face features and colors
        const faceColors = ['#FFD700', '#FF8C69', '#483D8B', '#FF69B4', '#9ACD32', '#2E8B57'];
        const eyesColors = ['#000', '#8B4513', '#808080'];
        const mouthColors = ['#FF4500', '#DC143C', '#8B0000'];

// Generate a random face
        function generateFace() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Generate random face features
            const faceColor = faceColors[Math.floor(Math.random() * faceColors.length)];
            const eyeColor = eyesColors[Math.floor(Math.random() * eyesColors.length)];
            const mouthColor = mouthColors[Math.floor(Math.random() * mouthColors.length)];

// Draw face
            ctx.fillStyle = faceColor;
            ctx.beginPath();
            ctx.moveTo(130, 100);
            ctx.lineTo(170, 100);
            ctx.lineTo(150, 150);
            ctx.closePath();
            ctx.fill();

// Draw eyes
            ctx.fillStyle = eyeColor;
            ctx.beginPath();
            ctx.moveTo(135, 120);
            ctx.lineTo(145, 120);
            ctx.lineTo(140, 130);
            ctx.closePath();
            ctx.fill();

ctx.beginPath();
            ctx.moveTo(155, 120);
            ctx.lineTo(165, 120);
            ctx.lineTo(160, 130);
            ctx.closePath();
            ctx.fill();

// Draw mouth
            ctx.fillStyle = mouthColor;
            ctx.beginPath();
            ctx.moveTo(135, 150);
            ctx.lineTo(165, 150);
            ctx.lineTo(150, 160);
            ctx.closePath();
            ctx.fill();
        }

// Generate a face when the button is pressed
        document.getElementById('generateButton').addEventListener('click', generateFace);

// Generate initial face on page load
        generateFace();
    </script>
</body>
</html>
```