Jumping on a trampoline's game

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

No:1434

131

←

Prev Next

→

Jumping on a trampoline
Developer User3307｜Date and time 23/6/18 15:57:44
Build time 36.447 sec｜Game capacity 3.456KB｜

Script

するゲームを作りました。プレイヤーはスマホのタッチ操作でトランポリン上でジャンプして、空中に浮いているコインを取得することが目的です。プレイヤーは画面の向きを変えたり、トランポリンの位置をスワイプで変えたりすることができます。絵文字を多めに使い、可愛らしい雰囲気にしています。以下が実際のプログラムです。

💰

画面下部にトランポリンが表示され、その上部にプレイヤーが表示されます。画面の真ん中上部にコインが表示され、ランダムに移動します。プレイヤーがトランポリンの左側をタップすると、プレイヤーが左側に移動し、右側をタップすると右側に移動します。プレイヤーがコインの上をジャンプすると、スコアが10点加算されます。スコアはタイトルバーに表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>トランポリンジャンプ！</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    #trampoline {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80%;
      background-color: #1abc9c;
    }
    
    #player {
      position: absolute;
      bottom: 80%;
      left: 50%;
      transform: translateX(-50%);
      width: 10%;
      height: 10%;
      background-color: #f1c40f;
      border-radius: 50%;
    }
    
    #coin {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 50px;
    }
  </style>
</head>

<body>
  <div id="trampoline"></div>
  <div id="player"></div>
  <div id="coin">💰</div>
  
  <script>
    var trampoline = document.getElementById('trampoline');
    var player = document.getElementById('player');
    var coin = document.getElementById('coin');
    var score = 0;
    
    trampoline.addEventListener('touchstart', function(e) {
      var x = e.touches[0].clientX;
      if (x < window.innerWidth / 2) {
        player.style.left = '20%';
      } else {
        player.style.left = '80%';
      }
    });
    
    trampoline.addEventListener('touchmove', function(e) {
      var x = e.touches[0].clientX;
      if (x < window.innerWidth / 2) {
        player.style.left = '20%';
      } else {
        player.style.left = '80%';
      }
    });
    
    setInterval(function() {
      coin.style.top = Math.floor(Math.random() * (window.innerHeight - coin.clientHeight)) + 'px';
      coin.style.left = Math.floor(Math.random() * (window.innerWidth - coin.clientWidth)) + 'px';
    }, 1000);
    
    setInterval(function() {
      var playerBottom = parseInt(player.style.bottom);
      var coinTop = parseInt(coin.style.top);
      var coinLeft = parseInt(coin.style.left);
      
      if (playerBottom > coinTop && playerBottom < (coinTop + coin.clientHeight)) {
        if (player.style.left === '20%' && coinLeft < (window.innerWidth / 2)) {
          score += 10;
          coin.style.display = 'none';
        } else if (player.style.left === '80%' && coinLeft > (window.innerWidth / 2)) {
          score += 10;
          coin.style.display = 'none';
        }
      }
      
      document.title = 'トランポリンジャンプ！ - スコア: ' + score;
    }, 100);
  </script>
</body>

</html>
```