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

No:3083

3253

fallout
Developer User3658｜Date and time 23/6/23 18:40:19
Build time 38.709 sec｜Game capacity 4.348KB｜

のパロディゲームを作ってみました！

フォールアウトスマホ

クリックしてスタート！

画面上に表示される「フォールアウトスマホ」というタイトルが、フォールアウトのパロディになっています。スタートボタンをクリックすると、「スマホに隠れている敵を見つけよう！」というメッセージが表示されます。背景画像は1秒ごとに100×100のランダムな人物画像が表示され、その中に敵がいるかもしれません。シュートボタンをクリックすると、マウスポインタが敵と重なっていた場合は「敵を撃破！」というメッセージが表示され、スコアが1点加算されます。重なっていなかった場合は、「命中せず…」というメッセージが表示されます。また、敵がまだ発見されていない場合にシュートボタンがクリックされた場合は「敵が見つかりません」というメッセージが表示されます。スコアは画面下部に表示されます。最終的なスコアは、できれば「GAME OVER」画面を兼ねたポップアップ画面で表示させたいですね。

→ 　

1　

0　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

のパロディゲームを作ってみました！

<!DOCTYPE html>
<html>
<head>
  <title>フォールアウトスマホ</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #game-body {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #111;
      color: #FFF;
      font-family: 'Courier New', monospace;
    }
    #start-btn, #shoot-btn {
      width: 150px;
      height: 50px;
      margin: 10px;
      border-radius: 10px;
      text-align: center;
      line-height: 50px;
      font-size: 24px;
      background-color: #0F0;
      color: #111;
      cursor: pointer;
    }
    #message {
      margin: 10px;
      font-size: 18px;
    }
    #score {
      margin: 10px;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="game-body">
    <h1>フォールアウトスマホ</h1>
    <p>クリックしてスタート！</p>
    <button id="start-btn">スタート</button>
    <p id="message"></p>
    <p id="score"></p>
    <button id="shoot-btn" style="display: none;">シュート！</button>
  </div>

<script>
    let score = 0;
    let timer;

function startGame() {
      document.querySelector('#start-btn').style.display = 'none';
      document.querySelector('#message').innerHTML = 'スマホに隠れている敵を見つけよう！';
      
      timer = setInterval(() => {
        const min = 0;
        const max = 95;
        const x = Math.floor(Math.random() * (max - min + 1) + min);
        const y = Math.floor(Math.random() * (max - min + 1) + min);
        document.querySelector('#game-body').style.backgroundImage = `url('https://placeimg.com/100/100/people?${Math.random()}')`;
        document.querySelector('#game-body').style.backgroundPosition = `${x}% ${y}%`;
        document.querySelector('#game-body').style.backgroundRepeat = `no-repeat`;
      }, 1000);

document.querySelector('#shoot-btn').style.display = 'inline-block';
      document.querySelector('#message').innerHTML = '';
      document.querySelector('#score').innerHTML = `スコア: ${score}`;
    }

function shoot() {
      if (document.querySelector('#game-body').style.backgroundImage === 'none') {
        document.querySelector('#message').innerHTML = '敵が見つかりません';
        return;
      }
      const x = event.clientX;
      const y = event.clientY;
      const enemy = document.querySelector('#game-body').getBoundingClientRect();
      if (enemy.left <= x && x <= enemy.right && enemy.top <= y && y <= enemy.bottom) {
        score++;
        document.querySelector('#message').innerHTML = '敵を撃破！';
      } else {
        document.querySelector('#message').innerHTML = '命中せず…';
      }
      document.querySelector('#score').innerHTML = `スコア: ${score}`;
      document.querySelector('#game-body').style.backgroundImage = 'none';
    }

document.querySelector('#start-btn').addEventListener('click', startGame);
    document.querySelector('#shoot-btn').addEventListener('click', shoot);
  </script>
</body>
</html>

画面上に表示される「フォールアウトスマホ」というタイトルが、フォールアウトのパロディになっています。スタートボタンをクリックすると、「スマホに隠れている敵を見つけよう！」というメッセージが表示されます。背景画像は1秒ごとに100×100のランダムな人物画像が表示され、その中に敵がいるかもしれません。シュートボタンをクリックすると、マウスポインタが敵と重なっていた場合は「敵を撃破！」というメッセージが表示され、スコアが1点加算されます。重なっていなかった場合は、「命中せず…」というメッセージが表示されます。また、敵がまだ発見されていない場合にシュートボタンがクリックされた場合は「敵が見つかりません」というメッセージが表示されます。スコアは画面下部に表示されます。最終的なスコアは、できれば「GAME OVER」画面を兼ねたポップアップ画面で表示させたいですね。