印象深い直子のヘビゲーム's game

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

No:40036

←

Prev Next

→

印象深い直子のヘビゲーム
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/31 18:57:19
Build time 18.97 sec｜Game capacity 4.226KB｜

Script

以下のコードは、印象深い直子のヘビゲームの実装例です。HTMLファイルとして実行でき、JavaScriptを含んでいます。スマートフォンの操作を前提としており、絵文字も使用しています。

このプログラムでは、直子のヘビゲームが実装されています。HTMLの`game-board`という要素がボードの役割を果たし、JavaScriptでヘビの動きや食べ物の生成などの処理が行われます。ゲームはスマートフォン上でプレイされることを想定しており、キーボードの矢印キーでヘビの移動方向を制御します。ヘビが壁や自身に衝突するとゲームオーバーとなり、アラートが表示されます。

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>印象深い直子のヘビゲーム</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: black;
    }
    #game-board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      height: 300px;
      background-color: white;
    }
    .cell {
      width: 20px;
      height: 20px;
      border: 1px solid lightgray;
      box-sizing: border-box;
      background-color: white;
    }
    .food {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

function drawSnake() {
        gameBoard.innerHTML = '';
        snake.forEach((segment) => {
          const snakeSegment = document.createElement('div');
          snakeSegment.style.gridRowStart = segment.y + 1;
          snakeSegment.style.gridColumnStart = segment.x + 1;
          snakeSegment.classList.add('cell');
          gameBoard.appendChild(snakeSegment);
        });
      }

function drawFood() {
        const foodElement = document.createElement('div');
        foodElement.style.gridRowStart = food.y + 1;
        foodElement.style.gridColumnStart = food.x + 1;
        foodElement.classList.add('cell', 'food');
        gameBoard.appendChild(foodElement);
      }

function moveSnake() {
        const head = { ...snake[0] };

switch (direction) {
          case 'up':
            head.y -= 1;
            break;
          case 'down':
            head.y += 1;
            break;
          case 'left':
            head.x -= 1;
            break;
          case 'right':
            head.x += 1;
            break;
        }

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
          food = { x: Math.floor(Math.random() * gridSize), y: Math.floor(Math.random() * gridSize) };
        } else {
          snake.pop();
        }

drawSnake();
        drawFood();

if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize || snake.slice(1).some(s => s.x === head.x && s.y === head.y)) {
          clearInterval(gameInterval);
          alert('ゲームオーバー！');
        }
      }

document.addEventListener('keydown', changeDirection);

drawSnake();
      drawFood();

const gameInterval = setInterval(moveSnake, 200);
    });
  </script>
</body>
</html>
```