AI game creator

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

No:40130

←

Prev Next

→

ヘビゲーム
Developer 食べる鶏と熱いタバスコ｜Date and time 24/2/1 7:19:48
Build time 16.638 sec｜Game capacity 4.12KB｜

Script

了解です。以下にヘビゲームのHTMLファイルの実装例を記述します。

この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>
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }
    .snake {
      width: 20px;
      height: 20px;
      background-color: green;
      border-radius: 50%;
      position: absolute;
    }
    .food {
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

function createSnake() {
      for (var i = 0; i < snake.length; i++) {
        var segment = document.createElement("div");
        segment.className = "snake";
        segment.style.left = snake[i].left + "px";
        segment.style.top = snake[i].top + "px";
        gameBoard.appendChild(segment);
      }
    }

function createFood() {
      food.left = Math.floor(Math.random() * (gameBoard.offsetWidth / size)) * size;
      food.top = Math.floor(Math.random() * (gameBoard.offsetHeight / size)) * size;

var foodElem = document.createElement("div");
      foodElem.className = "food";
      foodElem.style.left = food.left + "px";
      foodElem.style.top = food.top + "px";
      gameBoard.appendChild(foodElem);
    }

function moveSnake() {
      var head = { left: snake[0].left, top: snake[0].top };

if (direction === "right") {
        head.left += size;
      } else if (direction === "left") {
        head.left -= size;
      } else if (direction === "up") {
        head.top -= size;
      } else if (direction === "down") {
        head.top += size;
      }

snake.unshift(head);

if (head.left === food.left && head.top === food.top) {
        gameBoard.removeChild(gameBoard.lastChild);
        createFood();
      } else {
        snake.pop();
      }

if (isGameOver()) {
        clearInterval(intervalId);
        alert("ゲームオーバー");
      }

updateSnake();
    }

function updateSnake() {
      var segments = document.getElementsByClassName("snake");
      for (var i = 0; i < segments.length; i++) {
        segments[i].style.left = snake[i].left + "px";
        segments[i].style.top = snake[i].top + "px";
      }
    }

function isGameOver() {
      var head = snake[0];

if (head.left < 0 || head.left >= gameBoard.offsetWidth || head.top < 0 || head.top >= gameBoard.offsetHeight) {
        return true;
      }

for (var i = 1; i < snake.length; i++) {
        if (head.left === snake[i].left && head.top === snake[i].top) {
          return true;
        }
      }

return false;
    }

document.addEventListener("keydown", changeDirection);

createSnake();
    createFood();
    intervalId = setInterval(moveSnake, 200);
  </script>
</body>
</html>
```

このHTMLファイルは、スマホで遊ぶことを前提として、矢印キーを押すことでヘビの進行方向を操作します。ヘビの頭が画面外に出たり、自身の体に衝突したりした場合はゲームオーバーとなります。また、赤い点が餌で、餌に触れるとヘビが成長します。

なお、絵文字は説明文での使用となるため、HTMLファイル内では使用していませんが、必要であれば絵文字を組み込むこともできます。