A happy face is drawing a flower's game

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

No:26567

←

Prev Next

→

A happy face is drawing a flower
Developer User13192｜Date and time 23/12/1 20:30:45
Build time 34.276 sec｜Game capacity 2.228KB｜

Script

Sure! Here's a simple game where you can control a happy face to draw a flower using pictograms. The game is designed for smartphone operation and is implemented as a single HTML file containing JavaScript enclosed in script tags.

😊

In the game, you can use the arrow pictograms to control the happy face and move it around on the canvas, which represents your smartphone screen. The happy face will draw a flower-like pattern as you move it across the screen. Feel free to customize the pictograms or add more features to the game based on your preferences or requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Draw a Flower Game</title>
  <style>
    #canvas {
      width: 100%;
      height: 400px;
      background-color: #eee;
      position: relative;
    }
    .emoji {
      font-size: 40px;
      position: absolute;
    }
    #happy-face {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .pictogram {
      display: inline-block;
      width: 50px;
      height: 50px;
      margin: 10px;
      text-align: center;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div id="canvas">
    <div id="happy-face" class="emoji">😊</div>
  </div>
  
  <div>
    <button class="pictogram" onclick="moveUp()">⬆️</button>
    <button class="pictogram" onclick="moveDown()">⬇️</button>
    <button class="pictogram" onclick="moveLeft()">⬅️</button>
    <button class="pictogram" onclick="moveRight()">➡️</button>
  </div>

// Move the happy face upwards
    function moveUp() {
      y -= 10;
      document.getElementById("happy-face").style.top = y + "px";
    }

// Move the happy face downwards
    function moveDown() {
      y += 10;
      document.getElementById("happy-face").style.top = y + "px";
    }

// Move the happy face to the left
    function moveLeft() {
      x -= 10;
      document.getElementById("happy-face").style.left = x + "px";
    }

// Move the happy face to the right
    function moveRight() {
      x += 10;
      document.getElementById("happy-face").style.left = x + "px";
    }
  </script>
</body>
</html>
```