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

No:8185

1734

←

Prev Next

→

Snake game
Developer アーラ！｜Date and time 23/7/14 3:01:12
Build time 25.156 sec｜Game capacity 2.902KB｜

Script

了解です。ヘビゲームを実装してみます。以下が実際のプログラムです。

ヘビゲーム

スマホの画面をタップしてヘビを操作しよう！

このプログラムでは、スマホの画面をタップすることでヘビを操作することができます。ヘビは自動的に移動し、タップした方向に移動方向が変更されます。ヘビはゲームエリア内を移動し続けます。

←

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-area {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
    .cell {
      position: absolute;
      width: 20px;
      height: 20px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>ヘビゲーム</h1>
  <p>スマホの画面をタップしてヘビを操作しよう！</p>

// ゲームエリアのサイズ
    const areaWidth = 400;
    const areaHeight = 400;

// ヘビの初期位置
    let snakeX = 200;
    let snakeY = 200;

// ヘビの移動速度
    const snakeSpeed = 20;

// ヘビの移動方向
    let snakeDirection = 'right';

// ヘビを描画する関数
    function drawSnake() {
      const snakeElement = document.createElement('div');
      snakeElement.style.left = snakeX + 'px';
      snakeElement.style.top = snakeY + 'px';
      snakeElement.classList.add('cell');
      gameArea.appendChild(snakeElement);
    }

// ゲームループ
    function gameLoop() {
      // ヘビの現在の位置にセルを描画
      drawSnake();

// スワイプイベントを受け取る
      gameArea.addEventListener('touchstart', handleSwipe);

// 指定した方向にヘビを移動
      switch (snakeDirection) {
        case 'up':
          snakeY -= snakeSpeed;
          break;
        case 'down':
          snakeY += snakeSpeed;
          break;
        case 'left':
          snakeX -= snakeSpeed;
          break;
        case 'right':
          snakeX += snakeSpeed;
          break;
      }

// 一定の間隔でゲームループを再実行
      setTimeout(gameLoop, 100);
    }

// スワイプイベントを処理する関数
    function handleSwipe(event) {
      const x = event.touches[0].clientX;
      const y = event.touches[0].clientY;

if (x < snakeX && snakeDirection !== 'right') {
        snakeDirection = 'left';
      } else if (x > snakeX && snakeDirection !== 'left') {
        snakeDirection = 'right';
      } else if (y < snakeY && snakeDirection !== 'down') {
        snakeDirection = 'up';
      } else if (y > snakeY && snakeDirection !== 'up') {
        snakeDirection = 'down';
      }
    }

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