3Dライオンガツンとマシマシゲーム

スコア: 0

ボタンを押してガツンと叩くか、スワイプしてマシマシしましょう！

このプログラムでは、画面上のライオンの画像をクリックすることでスコアが加算されると同時に、ライオンの画像が反転します。また、画面上でスワイプすることでライオンの画像が回転する機能も実装されています。このプログラムを実行することで、3Dライオンガツンとマシマシゲームを楽しむことができます。詳細な動作については、ブラウザ上で実際に試してみてください。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、3Dライオンガツンとマシマシゲームのプログラム例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>3Dライオンガツンとマシマシゲーム</title>
  <style>
    body {
      text-align: center;
      font-size: 24px;
    }
    img {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <h1>3Dライオンガツンとマシマシゲーム</h1>
  <img id="lion" src="lion.png">
  <p id="score">スコア: 0</p>
  <p>ボタンを押してガツンと叩くか、スワイプしてマシマシしましょう！</p>

lion.addEventListener("click", function() {
      score++;
      scoreDisplay.textContent = "スコア: " + score;
    });

var startX, startY;

lion.addEventListener("touchstart", function(event) {
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    });

lion.addEventListener("touchend", function(event) {
      var endX = event.changedTouches[0].clientX;
      var endY = event.changedTouches[0].clientY;
      var diffX = startX - endX;
      var diffY = startY - endY;

if (Math.abs(diffX) > Math.abs(diffY)) {
        if (diffX > 0) {
          lion.style.transform = "rotateY(180deg)";
        } else {
          lion.style.transform = "rotateY(0deg)";
        }
      } else {
        if (diffY > 0) {
          lion.style.transform = "rotateX(180deg)";
        } else {
          lion.style.transform = "rotateX(0deg)";
        }
      }
    });
  </script>
</body>
</html>
```

このプログラムでは、画面上のライオンの画像をクリックすることでスコアが加算されると同時に、ライオンの画像が反転します。また、画面上でスワイプすることでライオンの画像が回転する機能も実装されています。

このプログラムを実行することで、3Dライオンガツンとマシマシゲームを楽しむことができます。詳細な動作については、ブラウザ上で実際に試してみてください。