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

No:3366

627

←

Prev Next

→

most poisonous
Developer sayaensm｜Date and time 23/6/24 16:54:43
Build time 47.626 sec｜Game capacity 5.512KB｜

Script

最毒ゲーム

スマホで操作してください。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>最毒ゲーム</title>
    <style>
      body {
        font-size: 20px;
        text-align: center;
      }

#snake-board {
        margin: 0 auto;
        position: relative;
        width: 500px;
        height: 500px;
        border: solid 1px gray;
      }

.snake {
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: purple;
      }

#apple {
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: green;
      }

#score {
        font-size: 24px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <h1>最毒ゲーム</h1>
    <p>スマホで操作してください。</p>
    
    <div id="snake-board"></div>
    
    <div id="score">0</div>
    
    <script>
      // 変数定義
      var board = document.getElementById("snake-board");
      var score = document.getElementById("score");
      var snake = [];
      var apple = {};
      var direction = "right";
      var speed = 100;
      var timer;
      var highScore = 0;

// スタート画面表示
      function startScreen() {
        board.innerHTML = '<p>画面をタップしてスタート</p>';
        document.addEventListener("click", startGame);
      }

// ゲーム開始
      function startGame() {
        // 初期化
        snake = [
          { x: 5, y: 0 },
          { x: 4, y: 0 },
          { x: 3, y: 0 },
          { x: 2, y: 0 },
          { x: 1, y: 0 },
        ];
        apple = { x: 10, y: 10 };
        direction = "right";
        speed = 100;
        timer = null;
        score.innerHTML = "0";
        board.innerHTML = "";
        board.style.background = "white";

// スネークを表示
        for (var i = 0; i < snake.length; i++) {
          var div = createDiv(snake[i].x, snake[i].y, "snake");
          board.appendChild(div);
        }

// りんごを表示
        var appleDiv = createDiv(apple.x, apple.y, "apple");
        board.appendChild(appleDiv);

// ゲームループスタート
        timer = setInterval(gameLoop, speed);
      }

// ゲームループ
      function gameLoop() {
        // 移動処理
        var head = {
          x: snake[0].x,
          y: snake[0].y,
        };
        if (direction === "right") {
          head.x++;
        } else if (direction === "down") {
          head.y++;
        } else if (direction === "left") {
          head.x--;
        } else if (direction === "up") {
          head.y--;
        }
        snake.unshift(head);
        var tail = snake.pop();

// スネークが壁に当たったら
        if (head.x < 0 || head.x > 24 || head.y < 0 || head.y > 24) {
          clearInterval(timer);
          gameover();
          return;
        }

// スネークが自分に当たったら
        for (var i = 1; i < snake.length; i++) {
          if (head.x === snake[i].x && head.y === snake[i].y) {
            clearInterval(timer);
            gameover();
            return;
          }
        }

// スネークがりんごに当たったら
        if (head.x === apple.x && head.y === apple.y) {
          apple.x = Math.floor(Math.random() * 25);
          apple.y = Math.floor(Math.random() * 25);
          var appleDiv = createDiv(apple.x, apple.y, "apple");
          board.appendChild(appleDiv);
          var scoreNum = parseInt(score.innerHTML) + 10;
          score.innerHTML = scoreNum;
          if (scoreNum > highScore) {
            highScore = scoreNum;
          }
          // スピードアップ
          if (speed > 30) {
            speed -= 10;
            clearInterval(timer);
            timer = setInterval(gameLoop, speed);
          }
        }

// スネーク移動の反映
        var headDiv = createDiv(head.x, head.y, "snake");
        board.appendChild(headDiv);
        var tailDiv = document.querySelector(".snake:last-of-type");
        board.removeChild(tailDiv);
      }

// ゲームオーバー
      function gameover() {
        board.innerHTML = '<p>GAME OVER</p><p>クリックしてリトライ</p>';
        board.style.background = "pink";
        var highScoreDiv = document.createElement("div");
        highScoreDiv.innerHTML = "HighScore: " + highScore;
        board.appendChild(highScoreDiv);
        document.addEventListener("click", startGame);
      }

// div要素の生成
      function createDiv(x, y, className) {
        var div = document.createElement("div");
        div.className = className;
        div.style.left = x * 20 + "px";
        div.style.top = y * 20 + "px";
        return div;
      }

// スネークの方向変更
      document.addEventListener("keydown", function (event) {
        if (event.key === "ArrowRight" && direction !== "left") {
          direction = "right";
        } else if (event.key === "ArrowDown" && direction !== "up") {
          direction = "down";
        } else if (event.key === "ArrowLeft" && direction !== "right") {
          direction = "left";
        } else if (event.key === "ArrowUp" && direction !== "down") {
          direction = "up";
        }
      });

// スタート画面表示
      startScreen();
    </script>
  </body>
</html>