AI game creator

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

No:34485

←

Prev Next

→

Snake
Developer User15743｜Date and time 24/1/10 20:44:28
Build time 17.848 sec｜Game capacity 3.612KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<html>
<head>
    <style>
        body {
            background-color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        canvas {
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
          const canvas = document.getElementById('gameCanvas');
          const context = canvas.getContext('2d');
          const grid = 16;
          let score = 0;
          let snake = {
            x: 160,
            y: 160,
            speedX: grid,
            speedY: 0,
            cells: [],
            maxCells: 4
          };
          let apple = {
            x: 320,
            y: 320
          };
        
          function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
          }
        
          function loop() {
            requestAnimationFrame(loop);
            if (++score % 5 === 0) {
              snake.maxCells++;
            }
            context.clearRect(0, 0, canvas.width, canvas.height);
            snake.x += snake.speedX;
            snake.y += snake.speedY;
            if (snake.x < 0) {
              snake.x = canvas.width - grid;
            }
            else if (snake.x >= canvas.width) {
              snake.x = 0;
            }
            if (snake.y < 0) {
              snake.y = canvas.height - grid;
            }
            else if (snake.y >= canvas.height) {
              snake.y = 0;
            }
            snake.cells.unshift({ x: snake.x, y: snake.y });
            if (snake.cells.length > snake.maxCells) {
              snake.cells.pop();
            }
            context.fillStyle = 'green';
            snake.cells.forEach(function (cell, index) {
              context.fillRect(cell.x, cell.y, grid - 1, grid - 1);
              if (cell.x === apple.x && cell.y === apple.y) {
                snake.maxCells++;
                apple.x = getRandomInt(0, 25) * grid;
                apple.y = getRandomInt(0, 25) * grid;
              }
              for (var i = index + 1; i < snake.cells.length; i++) {
                if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
                  snake.x = 160;
                  snake.y = 160;
                  snake.cells = [];
                  snake.maxCells = 4;
                  snake.speedX = grid;
                  snake.speedY = 0;
                  apple.x = getRandomInt(0, 25) * grid;
                  apple.y = getRandomInt(0, 25) * grid;
                  score = 0;
                }
              }
            });
            context.fillStyle = 'red';
            context.fillRect(apple.x, apple.y, grid - 1, grid - 1);
          }
        
          document.addEventListener('keydown', function (e) {
            if (e.which === 37 && snake.speedX === 0) {
              snake.speedX = -grid;
              snake.speedY = 0;
            }
            else if (e.which === 38 && snake.speedY === 0) {
              snake.speedX = 0;
              snake.speedY = -grid;
            }
            else if (e.which === 39 && snake.speedX === 0) {
              snake.speedX = grid;
              snake.speedY = 0;
            }
            else if (e.which === 40 && snake.speedY === 0) {
              snake.speedX = 0;
              snake.speedY = grid;
            }
          });
        
          requestAnimationFrame(loop);
        });
    </script>
</body>
</html>