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

No:1170

235

←

Prev Next

→

A game that will be downloaded a million times
Developer User3267｜Date and time 23/6/18 6:58:13
Build time 29.219 sec｜Game capacity 2.542KB｜

Script

ご注文ありがとうございます。以下が100万ダウンロードされる可能性のあるゲームの実装例になります。

エモジ・キャッチャー

スマホを傾けてかごを動かし、エモジをキャッチ！

【遊び方】画面下部のかごをスマホを傾けて左右に移動させ、上部から降ってくるエモジをキャッチしよう！キャッチしたエモジはタップでポイントを獲得。落ちたエモジはスマホ画面を叩いて消してね。1分間にキャッチできるエモジの数でランキングが決まるよ！

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

ご注文ありがとうございます。以下が100万ダウンロードされる可能性のあるゲームの実装例になります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>エモジ・キャッチャー</title>
    <style>
      body {
        font-size: 2rem;
        text-align: center;
      }
      #wrapper {
        height: 80vh;
        display: grid;
        place-items: center;
      }
      #basket {
        width: 50px;
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: yellow;
        border-radius: 50%;
      }
      .emoji {
        position: absolute;
        display: inline-block;
        width: 35px;
        height: 35px;
        animation: fall 5s linear infinite;
      }
      @keyframes fall {
        0% {
          top: -50px;
        }
        100% {
          top: calc(80vh - 35px);
        }
      }
    </style>
  </head>
  <body>
    <h1>エモジ・キャッチャー</h1>
    <p>スマホを傾けてかごを動かし、エモジをキャッチ！</p>
    <div id="wrapper"></div>
    <div id="basket"></div>
    <script>
      let wrapper = document.getElementById('wrapper');
      let basket = document.getElementById('basket');
      let emojis = ['🐶','🐱','🐻','🐷','🐘','🦊','🦁','🐼','🐥','🦄'];
      
      window.addEventListener('devicemotion', function(event) {
        let x = event.accelerationIncludingGravity.x;
        let windowWidth = window.innerWidth;
        let basketWidth = basket.offsetWidth;
        let margin = (windowWidth - basketWidth) / 2;
        let basketX = x * 3 + margin;
        basket.style.left = basketX + 'px';
      });
      
      setInterval(function() {
        let emoji = document.createElement('div');
        emoji.classList.add('emoji');
        let emojiIndex = Math.floor(Math.random() * emojis.length);
        emoji.textContent = emojis[emojiIndex];
        wrapper.appendChild(emoji);
        emoji.addEventListener('click', function() {
          this.remove();
        });
      }, 1000);
    </script>
  </body>
</html>

【遊び方】
画面下部のかごをスマホを傾けて左右に移動させ、上部から降ってくるエモジをキャッチしよう！キャッチしたエモジはタップでポイントを獲得。落ちたエモジはスマホ画面を叩いて消してね。1分間にキャッチできるエモジの数でランキングが決まるよ！