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

No:20194

105

😸がご飯を食べる
Developer User8975｜Date and time 23/10/8 19:38:46
Build time 20.53 sec｜Game capacity 2.423KB｜

HTMLとJavaScriptを使用して、😸がご飯を食べるゲームを作ってみましょう。 HTMLファイルを作成し、以下のコードを追加します。

😸のご飯タイム

😸

このプログラムでは、😸の画像からご飯を取り上げることができます。ページを開くと、😸の画像が表示され、ボタンをクリックすると😸が🍚を食べます。🍚を食べ終わると、再び😸の画像が表示されます。 `

😸

`の部分では、`#cat-img`のスタイルを定義しています。`animation`プロパティを使用して、😸の画像を振るモーションを表現しています。 ``の部分では、「ごはんをあげる」ボタンを定義しています。`onclick`属性を使用して、ボタンをクリックしたときに`feedCat()`関数を呼び出しています。 `feedCat()`関数では、😸の画像を🍚に変えています。その後、3秒後に`shake`アニメーションを再開し、😸の画像に戻します。このコードを使用すると、HTMLファイルを開いてスマホで操作することで、😸がご飯を食べるゲームが遊べます。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

HTMLとJavaScriptを使用して、😸がご飯を食べるゲームを作ってみましょう。

HTMLファイルを作成し、以下のコードを追加します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>😸のご飯タイム</title>
  <style>
    body {
      text-align: center;
    }
    
    #cat-img {
      font-size: 100px;
      margin-top: 50px;
      animation: shake 0.5s infinite;
    }
    
    @keyframes shake {
      0% { transform: rotateZ(0); }
      25% { transform: rotateZ(-10deg); }
      75% { transform: rotateZ(10deg); }
      100% { transform: rotateZ(0); }
    }
    
    #feed-btn {
      font-size: 30px;
      margin-top: 50px;
      padding: 10px 20px;
      background-color: #FFC107;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
  <script>
    function feedCat() {
      var catImg = document.getElementById("cat-img");
      catImg.textContent = "🍚";
      catImg.style.animation = "";
      setTimeout(function() {
        catImg.style.animation = "shake 0.5s infinite";
        catImg.textContent = "😸";
      }, 3000);
    }
  </script>
</head>
<body>
  <h1>😸のご飯タイム</h1>
  <div id="cat-img">😸</div>
  <button id="feed-btn" onclick="feedCat()">🍽️ ごはんをあげる</button>
</body>
</html>
```

このプログラムでは、😸の画像からご飯を取り上げることができます。ページを開くと、😸の画像が表示され、ボタンをクリックすると😸が🍚を食べます。🍚を食べ終わると、再び😸の画像が表示されます。

`<div id="cat-img">😸</div>`の部分では、`#cat-img`のスタイルを定義しています。`animation`プロパティを使用して、😸の画像を振るモーションを表現しています。

`<button id="feed-btn" onclick="feedCat()">🍽️ ごはんをあげる</button>`の部分では、「ごはんをあげる」ボタンを定義しています。`onclick`属性を使用して、ボタンをクリックしたときに`feedCat()`関数を呼び出しています。

`feedCat()`関数では、😸の画像を🍚に変えています。その後、3秒後に`shake`アニメーションを再開し、😸の画像に戻します。

このコードを使用すると、HTMLファイルを開いてスマホで操作することで、😸がご飯を食べるゲームが遊べます。