Random face gen, create a 3d looking realistic, mosaic face using mutiple 2d squares, triangles, and circles/ovals when red button is pressed. Each face should first decide if it's male or female, then it should decide if it's eyes shape and size, then is nose shape and size, then is eyebrows, then it's lips/mouth style. Then choose the hair and ears making a random face.'s game | AI game creator

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

No:22739

39

Random face gen, create a 3d looking realistic, mo..ALL
Developer User10477｜Date and time 23/10/24 13:33:06
Build time 101.245 sec｜Game capacity 5.725KB｜

Sure! Here's an implementation of a random face generator game in a single HTML file using JavaScript. It uses pictograms in the form of SVG shapes to create a 3D-looking face mosaic. When you press the red button, it generates a random face for you to play with. The game is designed to be compatible with smartphone operation.

Here's how the game works: - The game starts with a "Generate Face" button. - When you click the button, a JavaScript function named `generateFace()` is called. - The `generateFace()` function randomly selects features for each part of the face, such as gender, eye shape, eye size, nose shape, nose size, eyebrow style, and lip style. - Using SVG shapes, it creates a face that incorporates the random choices made for each feature. - The generated face is then displayed on the screen by replacing any previously generated face. - You can continue clicking the "Generate Face" button to create new random faces to play with. Note: The generated faces might not always appear realistic or aesthetically pleasing due to the nature of random choices. Feel free to modify the code and adjust the face features to suit your preferences.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Sure! Here's an implementation of a random face generator game in a single HTML file using JavaScript. It uses pictograms in the form of SVG shapes to create a 3D-looking face mosaic. When you press the red button, it generates a random face for you to play with. The game is designed to be compatible with smartphone operation.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #face {
      width: 200px;
      height: 200px;
    }
  </style>
  <script>
    function generateFace() {
      // Face features mapping
      const genders = ['male', 'female'];
      const eyeShapes = ['circle', 'square', 'oval'];
      const eyeSizes = ['small', 'medium', 'large'];
      const noseShapes = ['triangle', 'square', 'oval'];
      const noseSizes = ['small', 'medium', 'large'];
      const eyebrowStyles = ['thin', 'thick', 'arched'];
      const lipStyles = ['thin', 'thick', 'smile'];

// Get random features
      const gender = randomItem(genders);
      const eyeShape = randomItem(eyeShapes);
      const eyeSize = randomItem(eyeSizes);
      const noseShape = randomItem(noseShapes);
      const noseSize = randomItem(noseSizes);
      const eyebrowStyle = randomItem(eyebrowStyles);
      const lipStyle = randomItem(lipStyles);

// Generate face using SVG shapes
      const face = `<svg id="face" viewBox="0 0 100 100">
        <ellipse class="face-shape" cx="50" cy="50" rx="40" ry="50" fill="lightgray" stroke="black" stroke-width="2" />
        <circle class="eye" cx="35" cy="40" r="10" fill="black" />
        <circle class="eye" cx="65" cy="40" r="10" fill="black" />
        <polygon class="nose" points="50,50 45,65 55,65" fill="black" />
        <rect class="eyebrow" x="30" y="28" width="40" height="5" rx="2" ry="2" fill="black" />
        <rect class="eyebrow" x="30" y="35" width="40" height="5" rx="2" ry="2" fill="black" />
        <rect class="lip" x="35" y="75" width="30" height="5" rx="2" ry="2" fill="black" />
      </svg>`;

// Update face features based on random choices
      const svg = new DOMParser().parseFromString(face, 'image/svg+xml').querySelector('svg');

svg.querySelector('.face-shape').setAttribute('fill', gender === 'male' ? 'lightblue' : 'lightpink');

if (eyeShape === 'circle') {
        svg.querySelectorAll('.eye').forEach(eye => eye.setAttribute('r', eyeSize === 'small' ? '5' : eyeSize === 'medium' ? '8' : '12'));
      } else if (eyeShape === 'square') {
        svg.querySelectorAll('.eye').forEach(eye => {
          eye.setAttribute('r', '0');
          eye.setAttribute('height', eyeSize === 'small' ? '8' : eyeSize === 'medium' ? '12' : '16');
          eye.setAttribute('width', eyeSize === 'small' ? '8' : eyeSize === 'medium' ? '12' : '16');
          eye.setAttribute('fill', 'black');
        });
      } else if (eyeShape === 'oval') {
        svg.querySelectorAll('.eye').forEach(eye => {
          eye.setAttribute('r', '0');
          eye.setAttribute('height', eyeSize === 'small' ? '10' : eyeSize === 'medium' ? '14' : '20');
          eye.setAttribute('width', eyeSize === 'small' ? '6' : eyeSize === 'medium' ? '8' : '12');
          eye.setAttribute('fill', 'black');
        });
      }

if (noseShape === 'triangle') {
        svg.querySelector('.nose').setAttribute('points', '50,50 45,65 55,65');
      } else if (noseShape === 'square') {
        svg.querySelector('.nose').setAttribute('points', '45,50 55,50 55,65 45,65');
      } else if (noseShape === 'oval') {
        svg.querySelector('.nose').setAttribute('points', '45,55 55,55 55,60 45,60');
      }

if (eyebrowStyle === 'thin') {
        svg.querySelectorAll('.eyebrow').forEach(eyebrow => eyebrow.setAttribute('height', '3'));
      } else if (eyebrowStyle === 'thick') {
        svg.querySelectorAll('.eyebrow').forEach(eyebrow => eyebrow.setAttribute('height', '5'));
      } else if (eyebrowStyle === 'arched') {
        svg.querySelector('.eyebrow').setAttribute('y', '30');
        svg.querySelector('.eyebrow:last-of-type').setAttribute('y', '32');
      }

if (lipStyle === 'thin') {
        svg.querySelector('.lip').setAttribute('height', '2');
      } else if (lipStyle === 'thick') {
        svg.querySelector('.lip').setAttribute('height', '4');
      } else if (lipStyle === 'smile') {
        svg.querySelector('.lip').setAttribute('y', '73');
        svg.querySelector('.lip').setAttribute('height', '10');
      }

// Replace existing face with the new one
      const faceContainer = document.getElementById('face');
      faceContainer.replaceChild(svg, faceContainer.firstElementChild);
    }

function randomItem(items) {
      return items[Math.floor(Math.random() * items.length)];
    }
  </script>
</head>
<body>
  <button onclick="generateFace()" style="background-color: red; color: white;">Generate Face</button>
  <div id="face"></div>
</body>
</html>
```

Here's how the game works:
- The game starts with a "Generate Face" button.
- When you click the button, a JavaScript function named `generateFace()` is called.
- The `generateFace()` function randomly selects features for each part of the face, such as gender, eye shape, eye size, nose shape, nose size, eyebrow style, and lip style.
- Using SVG shapes, it creates a face that incorporates the random choices made for each feature.
- The generated face is then displayed on the screen by replacing any previously generated face.
- You can continue clicking the "Generate Face" button to create new random faces to play with.

Note: The generated faces might not always appear realistic or aesthetically pleasing due to the nature of random choices. Feel free to modify the code and adjust the face features to suit your preferences.