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

No:41167

Put the shapes back in Black outlines that just lo..ALL
Developer User15380｜Date and time 24/2/6 11:59:38
Build time 7.893 sec｜Game capacity 2.2KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file, using JavaScript and enclosed in script tags. It can be played on a smartphone and uses pictograms represented by shapes. The shapes will be displayed with black outlines resembling the pictograms.

Shape Matching Game

In this example, we have a game where four shapes (circle, square, triangle, and star) are displayed as div elements with black outlines resembling the pictograms. The shapes are randomly shuffled and assigned as background images to the shape elements. When a shape is clicked, a corresponding alert is shown indicating which shape was clicked. Note: Replace the placeholder image URLs (`emozi_hamuster.png`) with the actual URLs of your desired pictograms in PNG format.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shape Matching Game</title>
  <style>
    /* CSS styles for the shapes */
    .shape {
      width: 100px;
      height: 100px;
      background-color: transparent;
      border: 2px solid black;
      border-radius: 50%;
      margin: 10px;
      display: inline-block;
    }
  </style>
</head>
<body>
  <h1>Shape Matching Game</h1>
  <div>
    <div class="shape" id="shape1"></div>
    <div class="shape" id="shape2"></div>
    <div class="shape" id="shape3"></div>
    <div class="shape" id="shape4"></div>
  </div>

// Shuffle the shapes
    shapes.sort(function() {
      return 0.5 - Math.random();
    });

// Function to generate random shapes
    function generateShapes() {
      var shapeElements = document.getElementsByClassName("shape");

for (var i = 0; i < shapeElements.length; i++) {
        shapeElements[i].style.backgroundImage = `url(${shapes[i]}.png)`;
        shapeElements[i].onclick = function() {
          var clickedShape = this;
          var clickedShapeId = clickedShape.id;
          var clickedShapeName = clickedShapeId.replace("shape", "");
          alert("You clicked on the " + clickedShapeName + " shape!");
        };
      }
    }

// Call the generateShapes function to start the game
    generateShapes();
  </script>
</body>
</html>
```

Note: Replace the placeholder image URLs (`${shapes[i]}.png`) with the actual URLs of your desired pictograms in PNG format.