Create a constellation.'s game | AI game creator

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

No:7394

5767

Create a constellation.
Developer anonymous｜Date and time 70/1/1 9:44:34
Build time unknown sec｜Game capacity 2.674KB｜

了解しました。星座を作るゲームを実装します。以下が、1枚の HTML ファイルとして実装された JavaScript を含むプログラムです。このプログラムでは、JavaScript を使って星座を生成し、タップすることで星座の色が変わる仕組みとなっています。スマートフォンに最適化されており、絵文字も使用しています。

このプログラムでは、`constellations` という配列に星座の絵文字を用意し、`createConstellations` 関数で星座を生成しています。生成された星座には、クリックイベントをアタッチしており、`changeColor` 関数で色が切り替わるようになっています。実際にこの HTML ファイルをブラウザで開くと、星座が表示され、タップすると色が変わるゲームが楽しめるはずです。スマートフォンに最適化されているため、スマートフォンでの操作を前提としています。

→ 　

0　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

了解しました。星座を作るゲームを実装します。

以下が、1枚の HTML ファイルとして実装された JavaScript を含むプログラムです。このプログラムでは、JavaScript を使って星座を生成し、タップすることで星座の色が変わる仕組みとなっています。スマートフォンに最適化されており、絵文字も使用しています。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>星座ゲーム</title>
  <style>
    body {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .constellation {
      font-size: 50px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<script>
  const constellations = ["♈", "♉", "♊", "♋", "♌", "♍", "♎", "♏", "♐", "♑", "♒", "♓"];
  
  document.addEventListener("DOMContentLoaded", () => {
    const constellationElements = createConstellations(constellations);
    constellationElements.forEach(element => {
      element.addEventListener("click", changeColor);
      document.body.appendChild(element);
    });
  });
  
  function createConstellations(constellations) {
    const constellationElements = [];
    const width = window.innerWidth / 3;
    const height = window.innerHeight / 4;
    
    constellations.forEach(constellation => {
      const constellationElement = document.createElement("div");
      constellationElement.classList.add("constellation");
      constellationElement.innerText = constellation;
      constellationElement.style.width = `${width}px`;
      constellationElement.style.height = `${height}px`;
      constellationElements.push(constellationElement);
    });
    
    return constellationElements;
  }
  
  function changeColor(event) {
    const currentColor = event.target.style.color;
    
    if (currentColor === "red") {
      event.target.style.color = "blue";
    } else {
      event.target.style.color = "red";
    }
  }
</script>
</body>
</html>
```

このプログラムでは、`constellations` という配列に星座の絵文字を用意し、`createConstellations` 関数で星座を生成しています。生成された星座には、クリックイベントをアタッチしており、`changeColor` 関数で色が切り替わるようになっています。

実際にこの HTML ファイルをブラウザで開くと、星座が表示され、タップすると色が変わるゲームが楽しめるはずです。スマートフォンに最適化されているため、スマートフォンでの操作を前提としています。