Changing shapes! Transforms with each tap! Size also changes! It does not move! It increases!'s game

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

No:6292

2653

←

Prev Next

→

Changing shapes! Transforms with each tap! Size al..ALL
Developer User3589｜Date and time 23/7/2 1:28:22
Build time 23.582 sec｜Game capacity 1.995KB｜

Script

以下は、JavaScriptを使用して変化する図形を作成するゲームの例です。このゲームの目的は、タップするたびに図形が変形し、大きさも変わることです。図形は移動せずに画面内に増えていきます。

このゲームでは、画面内のどこかをタップすると、新しい図形（絵文字◉）がランダムな色と大きさで表示されます。タップするたびに図形が増え、変形します。図形は画面内には移動せずに表示されます。

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>変化する図形ゲーム</title>
  <style>
    #game-container {
      position: relative;
      width: 100%;
      height: 100vh;
      background-color: #f1f1f1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

.shape {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
      cursor: pointer;
      transition: transform 0.3s, font-size 0.3s;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>

gameContainer.addEventListener("click", function(event) {
        var shape = document.createElement("div");
        shape.classList.add("shape");
        shape.textContent = "◉";
        shape.style.transform = "scale(" + Math.random() + ")";
        shape.style.fontSize = Math.floor(Math.random() * 40 + 20) + "px";
        shape.style.color = getRandomColor();
        gameContainer.appendChild(shape);
      });

function getRandomColor() {
        var letters = "0123456789ABCDEF";
        var color = "#";
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
    });
  </script>
</body>
</html>
```