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

No:5057

114

←

Prev Next

→

Monkey Crab Battle🐒🦀💥.
Developer User3694｜Date and time 23/6/29 14:24:32
Build time 35.439 sec｜Game capacity 4.205KB｜

Script

了解しました。以下に猿カニ合戦のゲームを実装したHTMLファイルを示します。

猿カニ合戦

スマホの画面をタップして猿を投げつけてください。

猿がカニに当たるとカニは倒れます。

カニが画面の端まで到達するとゲームオーバーです。

このHTMLファイルでは、スマホの画面をタップして猿を投げつけ、カニを倒すゲームをプレイすることができます。カニが画面の端まで到達するとゲームオーバーになります。画面上部にスコアが表示され、最終スコアも表示されます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に猿カニ合戦のゲームを実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>猿カニ合戦</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f5f5f5;
      font-family: sans-serif;
    }
    
    .game-board {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      background-color: white;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .game-board h1 {
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 24px;
      text-align: center;
    }
    
    .game-board p {
      margin-bottom: 10px;
      font-size: 16px;
    }
    
    .game-board button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .game-board button:hover {
      background-color: #45a049;
    }
    
    .game-board .result {
      font-size: 18px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="game-board">
    <h1>猿カニ合戦</h1>
    <p>スマホの画面をタップして猿を投げつけてください。</p>
    <p>猿がカニに当たるとカニは倒れます。</p>
    <p>カニが画面の端まで到達するとゲームオーバーです。</p>
    <button onclick="startGame()">ゲームスタート</button>
    <p class="result"></p>
  </div>

function startGame() {
      gameOn = true;
      score = 0;
      document.querySelector('.result').innerHTML = '';

document.body.addEventListener('mousedown', throwMonkey);
      document.body.addEventListener('touchstart', throwMonkey);

moveCrab();
    }

function updateScore() {
      document.querySelector('.result').innerHTML = `スコア: ${score}`;
    }

function endGame() {
      gameOn = false;
      document.body.removeEventListener('mousedown', throwMonkey);
      document.body.removeEventListener('touchstart', throwMonkey);
      document.querySelector('.result').innerHTML = `ゲームオーバー - 最終スコア: ${score}`;
    }

function throwMonkey(event) {
      if (!gameOn) return;
      
      const monkey = document.createElement('span');
      monkey.innerHTML = '🐒';
      monkey.classList.add('monkey');
      monkey.style.left = `${event.clientX}px`;
      document.body.appendChild(monkey);

const crab = document.querySelector('.crab');
      if (crab && event.clientY >= crab.getBoundingClientRect().top) {
        crab.remove();
        score++;
        updateScore();
      }

monkey.animate([
        { top: `${event.clientY}px` },
        { top: '0' }
      ], {
        duration: 500,
        easing: 'ease-in-out',
        fill: 'forwards'
      });

monkey.addEventListener('animationend', function() {
        monkey.remove();
      });
    }

function moveCrab() {
      if (!gameOn) return;

crab.addEventListener('animationend', function() {
          endGame();
        });
      } else {
        const crab = document.createElement('span');
        crab.innerHTML = '🦀';
        crab.classList.add('crab');
        document.body.appendChild(crab);

setTimeout(moveCrab, 2000);
      }
    }
  </script>
</body>
</html>
```