AI game creator

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

No:39665

←

Prev Next

→

ヘビゲーム
Developer User17765｜Date and time 24/1/29 19:24:36
Build time 33.247 sec｜Game capacity 5.508KB｜

Script

了解です。以下にHTMLとJavaScriptを使ったヘビゲームの例を示します。

このコードは、スマートフォン上でプレイ可能なヘビゲームです。ページをロードすると、ヘビが自動的に移動し、エサを取ることで長くなっていきます。壁や自分自身に衝突するとゲームオーバーになります。矢印キーをタップすることでヘビの移動方向を変えることができます。エサはランダムに生成されます。この例では、HTMLファイルとして1枚のファイルで実装されており、必ずJavaScriptが含まれています。また、スマートフォン上で遊べるように調整してあります。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にHTMLとJavaScriptを使ったヘビゲームの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ヘビゲーム</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

#game-board {
      width: 20em;
      height: 20em;
      margin: 0 auto;
      border: 1px solid black;
      position: relative;
    }

.snake-segment {
      position: absolute;
      width: 1em;
      height: 1em;
      display: inline-block;
      background-color: black;
    }

.food {
      position: absolute;
      width: 1em;
      height: 1em;
      display: inline-block;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// ゲームオブジェクト
    const game = {
      board: document.getElementById("game-board"),
      gameOver: false,
      direction: "right",
      snake: [
        { top: 0, left: 0 },
        { top: 0, left: segmentSize },
        { top: 0, left: segmentSize * 2 }
      ],
      food: {}
    };

// 初期化
    function init() {
      createFood();
      document.addEventListener("keydown", changeDirection);
      gameLoop();
    }

// ループ
    function gameLoop() {
      if (game.gameOver) return;

moveSnake();

if (checkCollision()) {
        game.gameOver = true;
        alert("ゲームオーバー！");
        return;
      }

if (checkFoodCollision()) {
        addToSnake();
        createFood();
      }

drawSnake();
      setTimeout(gameLoop, speed);
    }

// ヘビの移動
    function moveSnake() {
      const head = Object.assign({}, game.snake[0]);

switch (game.direction) {
        case "up":
          head.top -= segmentSize;
          break;
        case "down":
          head.top += segmentSize;
          break;
        case "left":
          head.left -= segmentSize;
          break;
        case "right":
          head.left += segmentSize;
          break;
      }

game.snake.unshift(head);
      game.snake.pop();
    }

// ヘビの描画
    function drawSnake() {
      game.board.innerHTML = "";

game.snake.forEach(segment => {
        const div = document.createElement("div");
        div.className = "snake-segment";
        div.style.top = segment.top + "px";
        div.style.left = segment.left + "px";
        game.board.appendChild(div);
      });

const foodDiv = document.createElement("div");
      foodDiv.className = "food";
      foodDiv.style.top = game.food.top + "px";
      foodDiv.style.left = game.food.left + "px";
      game.board.appendChild(foodDiv);
    }

// ヘビの向き変更
    function changeDirection(event) {
      switch (event.keyCode) {
        case 38: // up
          if (game.direction !== "down") {
            game.direction = "up";
          }
          break;
        case 40: // down
          if (game.direction !== "up") {
            game.direction = "down";
          }
          break;
        case 37: // left
          if (game.direction !== "right") {
            game.direction = "left";
          }
          break;
        case 39: // right
          if (game.direction !== "left") {
            game.direction = "right";
          }
          break;
      }
    }

// ヘビが壁や自分自身と衝突しているかチェック
    function checkCollision() {
      const head = game.snake[0];

// 壁に衝突しているかチェック
      if (
        head.left < 0 ||
        head.top < 0 ||
        head.left >= boardSize * segmentSize ||
        head.top >= boardSize * segmentSize
      ) {
        return true;
      }

// 自分自身に衝突しているかチェック
      for (let i = 1; i < game.snake.length; i++) {
        if (game.snake[i].top === head.top && game.snake[i].left === head.left) {
          return true;
        }
      }

return false;
    }

// ヘビがエサと衝突しているかチェック
    function checkFoodCollision() {
      const head = game.snake[0];
      return head.top === game.food.top && head.left === game.food.left;
    }

// ヘビにセグメントを追加する
    function addToSnake() {
      const tail = Object.assign({}, game.snake[game.snake.length - 1]);
      game.snake.push(tail);
    }

// エサを生成する
    function createFood() {
      const x = Math.floor(Math.random() * boardSize) * segmentSize;
      const y = Math.floor(Math.random() * boardSize) * segmentSize;
      game.food = { top: y, left: x };
    }

// ゲームを開始
    init();
  </script>
</body>
</html>
```

このコードは、スマートフォン上でプレイ可能なヘビゲームです。ページをロードすると、ヘビが自動的に移動し、エサを取ることで長くなっていきます。壁や自分自身に衝突するとゲームオーバーになります。矢印キーをタップすることでヘビの移動方向を変えることができます。エサはランダムに生成されます。

この例では、HTMLファイルとして1枚のファイルで実装されており、必ずJavaScriptが含まれています。また、スマートフォン上で遊べるように調整してあります。