Eye drops from upstairs's game | AI game creator

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

No:5101

859

Eye drops from upstairs
Developer User3812｜Date and time 23/6/29 18:15:44
Build time 30.329 sec｜Game capacity 2.86KB｜

了解しました。以下に、部分的にゲーム化されたJavaScriptを含むHTMLファイルの例を提供します。

🙂

このプログラムは、「2階から目薬」というゲームを部分的に再現しています。プレイヤーは🙂の絵文字で表現され、スマートフォンで矢印キーの入力やタッチ操作によって上下の階層を移動することができます。ゲームボードはHTMLの5つの要素で構成され、各要素は「floor1」といったIDで識別されています。このゲームでは、プレイヤーを上下の階層で移動させることが目的です。例えば、下の方のボタンをクリックするとプレイヤーは1つ下の階層に移動します。プレイヤーが最上階または最下階に到達した場合、それ以上の移動はできません。以上が、要件に基づいて実現できる部分的なゲーム化の例です。他にどのようなゲームを作成するかについて、具体的な要望やアイデアがあれば教えてください。

→ 　

3　

1　

　
　

[PR]現在の売れ筋ゲームランキング

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

(C)2023 HisashiApp

了解しました。以下に、部分的にゲーム化されたJavaScriptを含むHTMLファイルの例を提供します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>2階から目薬</title>
  <style>
    #game-board {
      display: inline-block;
      text-align: center;
      font-size: 50px;
      line-height: 1;
    }
    
    .floor {
      background-color: #eee;
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .player {
      font-size: 80px;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div class="floor" id="floor1"></div>
    <div class="floor" id="floor2"></div>
    <div class="floor" id="floor3"></div>
    <div class="floor" id="floor4"></div>
    <div class="player">🙂</div>
  </div>
  
  <script>
    const player = document.querySelector('.player');
    const floors = document.querySelectorAll('.floor');

let currentFloor = 1;

function moveUp() {
      if (currentFloor < 4) {
        player.parentNode.removeChild(player);
        currentFloor++;
        floors[currentFloor - 1].appendChild(player);
      }
    }

function moveDown() {
      if (currentFloor > 1) {
        player.parentNode.removeChild(player);
        currentFloor--;
        floors[currentFloor - 1].appendChild(player);
      }
    }

window.addEventListener('keydown', function (event) {
      if (event.key === 'ArrowUp') {
        moveUp();
      } else if (event.key === 'ArrowDown') {
        moveDown();
      }
    });

// スマホ操作の場合
    window.addEventListener('touchstart', function (event) {
      const touchY = event.touches[0].clientY;

if (touchY < window.innerHeight / 2) {
        moveUp();
      } else {
        moveDown();
      }
    });
  </script>
</body>
</html>
```

このプログラムは、「2階から目薬」というゲームを部分的に再現しています。プレイヤーは🙂の絵文字で表現され、スマートフォンで矢印キーの入力やタッチ操作によって上下の階層を移動することができます。ゲームボードはHTMLの5つの要素で構成され、各要素は「floor1」といったIDで識別されています。

このゲームでは、プレイヤーを上下の階層で移動させることが目的です。例えば、下の方のボタンをクリックするとプレイヤーは1つ下の階層に移動します。プレイヤーが最上階または最下階に到達した場合、それ以上の移動はできません。

以上が、要件に基づいて実現できる部分的なゲーム化の例です。他にどのようなゲームを作成するかについて、具体的な要望やアイデアがあれば教えてください。