AI game creator

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

No:31393

←

Prev Next

→

カナヘビ
Developer User15123｜Date and time 23/12/26 17:48:37
Build time 40.959 sec｜Game capacity 3.468KB｜

Script

以下は、リアルタイムで動作するカナヘビゲームのプログラムの例です。

このプログラムは、スマホのジャイロセンサーの値に基づいてヘビの移動方向を決定し、ヘビがエサを食べるとエサの位置がランダムに変わるシンプルなゲームです。スマホのジャイロセンサーを利用するため、スマホでの操作が前提となっています。絵文字は使用していませんが、CSSで緑色の四角形と赤色の四角形を表示して、ヘビとエサの役割を演じています。

←

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">
  <style>
    #game-board {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      position: relative;
    }

#snake-head {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: green;
    }

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

// 初期位置
    let positionX = 0;
    let positionY = 0;
    
    // ゲームボードのサイズ
    const boardWidth = 200;
    const boardHeight = 200;

// ゲームボードとヘビの参照
    const gameBoard = document.getElementById("game-board");
    const snakeHead = document.getElementById("snake-head");
    const food = document.getElementById("food");

// ヘビの移動処理
    function moveSnake() {
      switch (direction) {
        case "up":
          positionY -= 20;
          break;
        case "down":
          positionY += 20;
          break;
        case "left":
          positionX -= 20;
          break;
        case "right":
          positionX += 20;
          break;
      }

// ヘビがゲームボードの外に出ないように制御
      if (positionX < 0) {
        positionX = 0;
      }
      if (positionX >= boardWidth) {
        positionX = boardWidth - 20;
      }
      if (positionY < 0) {
        positionY = 0;
      }
      if (positionY >= boardHeight) {
        positionY = boardHeight - 20;
      }

// ヘビの位置を更新
      snakeHead.style.top = positionY + "px";
      snakeHead.style.left = positionX + "px";

// ヘビがエサを食べた場合
      if (positionX === parseInt(food.style.left) && positionY === parseInt(food.style.top)) {
        // エサの位置をランダムに変更
        const randomX = Math.floor(Math.random() * (boardWidth / 20)) * 20;
        const randomY = Math.floor(Math.random() * (boardHeight / 20)) * 20;
        food.style.left = randomX + "px";
        food.style.top = randomY + "px";
      }
    }

// スマホのジャイロセンサーイベントでヘビの移動方向を変更
    window.addEventListener("deviceorientation", (event) => {
      if (event.gamma > 20) {
        direction = "right";
      } else if (event.gamma < -20) {
        direction = "left";
      } else if (event.beta > 20) {
        direction = "down";
      } else if (event.beta < -20) {
        direction = "up";
      }
    });

// 100ミリ秒ごとにヘビを移動させる
    setInterval(moveSnake, 100);
  </script>
</body>
</html>
```