ライオンゲーム

🦁

このゲームでは、「色を変える」ボタンをクリックすると、ライオンの色がランダムに変化します。「動かす」ボタンをクリックすると、ライオンが画面内のランダムな位置に移動します。以上が、簡単なスマホゲームの実装例となります。

←

Prev　Next

→ 　

Back　

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

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

了解です！以下に、スマホで遊べる簡単なゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ライオンゲーム</title>
  <style>
    body {
      text-align: center;
    }
    #lion {
      font-size: 6rem;
    }
    #buttonContainer {
      margin-top: 2rem;
    }
    .button {
      display: inline-block;
      margin: 0 1rem;
      font-size: 2rem;
      padding: 0.5rem 1rem;
      background-color: #2196f3;
      color: white;
      border-radius: 0.3rem;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>ライオンゲーム</h1>
  <p id="lion">🦁</p>
  <div id="buttonContainer">
    <button class="button" onclick="changeColor()">色を変える</button>
    <button class="button" onclick="moveLion()">動かす</button>
  </div>
  
  <script>
    function changeColor() {
      var lion = document.getElementById("lion");
      var colors = ["#ff0000", "#00ff00", "#0000ff", "#ff00ff", "#ffff00", "#00ffff"];
      var randomColor = colors[Math.floor(Math.random() * colors.length)];
      lion.style.color = randomColor;
    }
    
    function moveLion() {
      var lion = document.getElementById("lion");
      var screenWidth = window.innerWidth;
      var screenHeight = window.innerHeight;
      var randomX = Math.random() * screenWidth;
      var randomY = Math.random() * screenHeight;
      lion.style.left = randomX + "px";
      lion.style.top = randomY + "px";
    }
  </script>
</body>
</html>
```