⚽ サッカーPK対戦 ⚽

🥅
⚽
💪 がんばって！ 💪
```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サッカーPK対戦ゲーム</title>
  <style>
    @keyframes goal {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }
    @keyframes miss {
      0% { transform: translateY(0); }
      25% { transform: translateY(-20px); }
      50% { transform: translateY(0); }
      75% { transform: translateY(-10px); }
      100% { transform: translateY(0); }
    }
    @keyframes kick {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(20deg); }
      100% { transform: rotate(0deg); }
    }
  </style>
</head>
<body>
  <div style="width: 400px; height: 400px; margin: 0 auto; position: relative; text-align: center; background-color: #f0f0f0; border: 2px solid #00a;">
    <h1 style="margin: 10px 0;">⚽ サッカーPK対戦 ⚽</h1>
    <div id="field" style="position: relative; width: 100%; height: 65%; background: green; text-align: center;">
      <div id="goal" style="position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 40px;">🥅</div>
      <div id="ball" style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 40px; cursor: pointer;">⚽</div>
    </div>
    <div style="margin-top: 20px;">
      <button id="leftBtn" style="font-size: 30px; cursor: pointer;">⬅️</button>
      <button id="kickBtn" style="font-size: 30px; cursor: pointer;">✨ キック ✨</button>
      <button id="rightBtn" style="font-size: 30px; cursor: pointer;">➡️</button>
    </div>
    <div id="message" style="margin-top: 10px; font-size: 20px;">💪 がんばって！ 💪</div>
  </div>

  <script>
    const ball = document.getElementById('ball');
    const goal = document.getElementById('goal');
    const message = document.getElementById('message');
    const leftBtn = document.getElementById('leftBtn');
    const kickBtn = document.getElementById('kickBtn');
    const rightBtn = document.getElementById('rightBtn');

    let ballPosition = 0; // -1: left, 0: center, 1: right

    leftBtn.addEventListener('click', () => {
      if (ballPosition > -1) {
        ballPosition--;
        updateBallPosition();
      }
    });

    rightBtn.addEventListener('click', () => {
      if (ballPosition < 1) {
        ballPosition++;
        updateBallPosition();
      }
    });

    kickBtn.addEventListener('click', () => {
      const randomPosition = Math.floor(Math.random() * 3) - 1;
      if (randomPosition === ballPosition) {
        goal.style.animation = 'goal 1s';
        message.innerHTML = '🎉 ゴール！ 🎉';
      } else {
        ball.style.animation = 'miss 1s';
        message.innerHTML = '😢 ミス！ 😢';
      }
      ball.style.animation = 'kick 0.5s';
    });

    ball.addEventListener('click', () => {
      kickBtn.click();
    });

    function updateBallPosition() {
      ball.style.left = `calc(50% + ${ballPosition * 50}px)`;
    }
  </script>
</body>
</html>
```