AI game creator

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

No:23798

←

Prev Next

→

Snake Game
Developer User11149｜Date and time 23/11/3 17:24:39
Build time 33.948 sec｜Game capacity 1.751KB｜

Script

了解です。以下にスマホで遊べるヘビゲームの実装例を示します。

このコードは、スマートフォン上でプレイできるシンプルなヘビゲームを実装しています。HTMLファイルの中にJavaScriptコードを記述し、スクリプトタグで囲んでいます。ゲームボードやヘビのパーツ、フードの要素を動的に生成し、ゲームの状態に応じて表示位置を更新しています。ゲームの操作は、スマートフォンの矢印キーを使用して行います。ヘビはフードを食べると成長し、スピードも徐々に上がります。ヘビが壁に衝突するとゲームオーバーとなります。このコードは1枚のHTMLファイルとして実装されており、スマートフォン上で動作します。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にスマホで遊べるヘビゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ヘビゲーム</title>
  <style>
    #game-board {
      position: relative;
      width: 320px;
      height: 320px;
      border: 1px solid #000;
      background-color: #ddd;
    }

.snake-part {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #0f0;
    }

#food {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// ヘビの初期位置
    const INITIAL_SNAKE_X = 100;
    const INITIAL_SNAKE_Y = 100;

// ヘビの初速度
    const INITIAL_SPEED = 200;

// ヘビの動き方向
    const DIRECTION = {
      UP: 'up',
      DOWN: 'down',
      LEFT: 'left',
      RIGHT: 'right'
    };

// ゲームの状態を表す変数
    let snake = [];
    let direction = DIRECTION.RIGHT;
    let speed = INITIAL_SPEED;
    let food = null;
    let intervalId = null;

// 初期化処理
    function initialize() {
      snake = [{x: INITIAL_SNAKE_X, y: INITIAL_SNAKE_Y}];
      direction = DIRECTION.RIGHT;
      generateFood();
      render();
      intervalId = setInterval(moveSnake, speed);
    }

// ヘビの移動処理
    function moveSnake() {
      let head = Object.assign({}, snake[0]);
      switch (direction) {
        case DIRECTION.UP:
          head.y -= 20;
          break;
        case DIRECTION.DOWN:
          head.y += 20;
          break;
        case DIRECTION.LEFT:
          head.x -= 20;
          break;
        case DIRECTION.RIGHT:
          head.x += 20;
          break;
      }

if (checkCollision(head)) {
        clearInterval(intervalId);
        alert('ゲームオーバー！');
        return;
      }

snake.unshift(head);
      if (!checkFoodCollision(head)) {
        snake.pop();
      } else {
        generateFood();
        speed -= 10; // 速度を上げる
        clearInterval(intervalId);
        intervalId = setInterval(moveSnake, speed);
      }

render();
    }

// ゲームボード上に要素を描画する処理
    function render() {
      const gameBoard = document.getElementById('game-board');
      gameBoard.innerHTML = '';

snake.forEach((part, index) => {
        const snakePart = document.createElement('div');
        snakePart.className = 'snake-part';
        snakePart.style.left = `${part.x}px`;
        snakePart.style.top = `${part.y}px`;
        gameBoard.appendChild(snakePart);
      });

const foodElement = document.createElement('div');
      foodElement.id = 'food';
      foodElement.style.left = `${food.x}px`;
      foodElement.style.top = `${food.y}px`;
      gameBoard.appendChild(foodElement);
    }

// 新しいフードを生成する処理
    function generateFood() {
      const x = getRandomPosition(20, BOARD_WIDTH - 20);
      const y = getRandomPosition(20, BOARD_HEIGHT - 20);
      food = {x, y};
    }

// ヘビとの衝突判定処理
    function checkCollision(head) {
      return (
        head.x < 0 || head.x >= BOARD_WIDTH ||
        head.y < 0 || head.y >= BOARD_HEIGHT ||
        snake.some(part => part.x === head.x && part.y === head.y)
      );
    }

// フードとの衝突判定処理
    function checkFoodCollision(head) {
      return head.x === food.x && head.y === food.y;
    }

// 指定範囲内のランダムな位置を生成する処理
    function getRandomPosition(min, max) {
      return Math.floor((Math.random() * (max - min) + min) / 20) * 20;
    }

// キー操作によるヘビの移動方向変更処理
    function changeDirection(event) {
      event.preventDefault();
      const key = event.key;
      switch (key) {
        case 'ArrowUp':
          if (direction !== DIRECTION.DOWN) {
            direction = DIRECTION.UP;
          }
          break;
        case 'ArrowDown':
          if (direction !== DIRECTION.UP) {
            direction = DIRECTION.DOWN;
          }
          break;
        case 'ArrowLeft':
          if (direction !== DIRECTION.RIGHT) {
            direction = DIRECTION.LEFT;
          }
          break;
        case 'ArrowRight':
          if (direction !== DIRECTION.LEFT) {
            direction = DIRECTION.RIGHT;
          }
          break;
      }
    }

document.addEventListener('keydown', changeDirection);
    initialize();
  </script>
</body>
</html>
```

このコードは、スマートフォン上でプレイできるシンプルなヘビゲームを実装しています。HTMLファイルの中にJavaScriptコードを記述し、スクリプトタグで囲んでいます。ゲームボードやヘビのパーツ、フードの要素を動的に生成し、ゲームの状態に応じて表示位置を更新しています。

ゲームの操作は、スマートフォンの矢印キーを使用して行います。ヘビはフードを食べると成長し、スピードも徐々に上がります。ヘビが壁に衝突するとゲームオーバーとなります。

このコードは1枚のHTMLファイルとして実装されており、スマートフォン上で動作します。