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

No:635

391

←

Prev Next

→

Falcon Punch!
Developer User3039｜Date and time 23/6/16 19:49:33
Build time 56.105 sec｜Game capacity 4.286KB｜

Script

Falcon Punch!

スマホを横にして、画面をフリックしてファルコンパンチを繰り出そう！

このアプリは「ファルコンパンチ！」というゲームです。スマートフォンを横にして、画面をフリックしてファルコンパンチを繰り出し、ランダムに動いているターゲットを倒すゲームです。画面をフリックすると、ターゲットに繰り出したファルコンパンチの回数がカウントされます。10回のファルコンパンチでゲームクリアとなり、クリアまでの時間と回数が表示されます。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Falcon Punch Game</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div id="game">
    <h1>Falcon Punch!</h1>
    <p>スマホを横にして、画面をフリックしてファルコンパンチを繰り出そう！</p>
    <div id="field"><span id="target"></span></div>
    <p id="result"></p>
  </div>
  <script>
    // ゲームオブジェクト
    const game = {
      score: 0,
      time: 0,
      interval: null,
      init: function() {
        const field = document.querySelector('#field');
        const target = document.querySelector('#target');
        const result = document.querySelector('#result');
        // スワイプイベントの設定
        field.addEventListener('touchstart', handleTouchStart, false);
        field.addEventListener('touchmove', handleTouchMove, false);
        field.addEventListener('touchend', handleTouchEnd, false);
        // ゲーム開始
        this.start(target, result);
      },
      start: function(target, result) {
        const maxX = window.innerWidth - target.offsetWidth;
        const maxY = window.innerHeight - target.offsetHeight;
        // ターゲットのランダムな初期化
        this.moveTarget(target, maxX, maxY);
        // ゲーム時間測定開始
        this.interval = setInterval(() => {
          this.time++;
        }, 1000);
        // スコアと終了判定のリセット
        this.score = 0;
        this.isGameOver = false;
        // 結果表示の初期化
        result.textContent = '';
      },
      moveTarget: function(target, maxX, maxY) {
        target.style.left = `${Math.floor(Math.random() * maxX)}px`;
        target.style.top = `${Math.floor(Math.random() * maxY)}px`;
      },
      punch: function() {
        if (!this.isGameOver) {
          this.score++;
          this.moveTarget(document.querySelector('#target'), window.innerWidth - target.offsetWidth, window.innerHeight - target.offsetHeight);
        }
      },
      end: function(result) {
        clearInterval(this.interval);
        this.isGameOver = true;
        result.textContent = `${this.time}秒で${this.score}回のファルコンパンチ！`;
      },
      isGameOver: false,
    };
    // スワイプ開始時の処理
    function handleTouchStart(event) {
      game.startX = event.touches[0].clientX;
      game.startY = event.touches[0].clientY;
    }
    // スワイプ中の処理
    function handleTouchMove(event) {
      event.preventDefault();
      game.moveX = event.touches[0].clientX;
      game.moveY = event.touches[0].clientY;
    }
    // スワイプ終了時の処理
    function handleTouchEnd(event) {
      const field = document.querySelector('#field');
      const target = document.querySelector('#target');
      const result = document.querySelector('#result');
      const maxX = window.innerWidth - target.offsetWidth;
      const maxY = window.innerHeight - target.offsetHeight;
      const diffX = game.moveX - game.startX;
      const diffY = game.moveY - game.startY;
      // スワイプの方向を判定
      if (Math.abs(diffX) > Math.abs(diffY)) {
        if (diffX > 0) {
          // 右にスワイプ
          game.punch();
        } else {
          // 左にスワイプ
          console.log('left swipe');
        }
      } else {
        if (diffY > 0) {
          // 下にスワイプ
          console.log('down swipe');
        } else {
          // 上にスワイプ
          console.log('up swipe');
        }
      }
      // スコアが10以上になったら終了
      if (game.score >= 10) {
        game.end(result);
      }
    }
    // ゲーム初期化
    game.init();
  </script>
</body>
</html>
```
このアプリは「ファルコンパンチ！」というゲームです。スマートフォンを横にして、画面をフリックしてファルコンパンチを繰り出し、ランダムに動いているターゲットを倒すゲームです。画面をフリックすると、ターゲットに繰り出したファルコンパンチの回数がカウントされます。10回のファルコンパンチでゲームクリアとなり、クリアまでの時間と回数が表示されます。