おまめちゃんめいろでおとしあなにおちないようにごーるにいくめいろ's game

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

No:13703

140

←

Prev Next

→

おまめちゃんめいろでおとしあなにおちないようにごーるにいくめいろ
Developer おまめちゃん｜Date and time 23/8/29 13:42:11
Build time 24.643 sec｜Game capacity 4.434KB｜

Script

了解しました。以下に、おまめちゃんがおとしあなに落ちないようにゴールに向かう迷路のゲームを実装したHTMLファイルを示します。

🐻

🏆

このHTMLファイルをブラウザで開くと、おまめちゃんがスワイプ操作で迷路を移動し、ゴールに到着したかどうかをアラートで表示します。スマホ操作が前提となっており、絵文字も使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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>
    #maze {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
      gap: 5px;
    }
    
    .cell {
      background-color: #ffffff;
      border: 1px solid #000000;
      text-align: center;
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .start {
      background-color: #00ff00;
    }
    
    .goal {
      background-color: #ff0000;
    }
  </style>
</head>
<body>
  <div id="maze">
    <div class="cell start">🐻</div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell goal">🏆</div>
  </div>

let currentCell = startCell;

function moveUp() {
        const nextCell = currentCell.previousElementSibling;
        if (nextCell && !nextCell.classList.contains('start')) {
          currentCell.classList.remove('start');
          currentCell = nextCell;
          currentCell.classList.add('start');
        }
        checkGameOver();
      }

function moveDown() {
        const nextCell = currentCell.nextElementSibling;
        if (nextCell && !nextCell.classList.contains('start')) {
          currentCell.classList.remove('start');
          currentCell = nextCell;
          currentCell.classList.add('start');
        }
        checkGameOver();
      }

function moveLeft() {
        const nextCell = currentCell.parentElement.previousElementSibling.querySelector(':nth-child(' + (Array.prototype.indexOf.call(currentCell.parentElement.children, currentCell) + 1) + ')');
        if (nextCell && !nextCell.classList.contains('start')) {
          currentCell.classList.remove('start');
          currentCell = nextCell;
          currentCell.classList.add('start');
        }
        checkGameOver();
      }

function moveRight() {
        const nextCell = currentCell.parentElement.nextElementSibling.querySelector(':nth-child(' + (Array.prototype.indexOf.call(currentCell.parentElement.children, currentCell) + 1) + ')');
        if (nextCell && !nextCell.classList.contains('start')) {
          currentCell.classList.remove('start');
          currentCell = nextCell;
          currentCell.classList.add('start');
        }
        checkGameOver();
      }

function checkGameOver() {
        if (currentCell === goalCell) {
          alert('ゴールに到着しました！');
        }
      }

document.addEventListener('touchstart', function(event) {
        startX = event.touches[0].clientX;
        startY = event.touches[0].clientY;
      });

document.addEventListener('touchend', function(event) {
        const endX = event.changedTouches[0].clientX;
        const endY = event.changedTouches[0].clientY;
        const diffX = endX - startX;
        const diffY = endY - startY;

if (Math.abs(diffX) > Math.abs(diffY)) {
          if (diffX > 0) {
            moveRight();
          } else {
            moveLeft();
          }
        } else {
          if (diffY > 0) {
            moveDown();
          } else {
            moveUp();
          }
        }
      });
    });
  </script>
</body>
</html>
```