Make me a game with wormate.io's game

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

No:22945

←

Prev Next

→

Make me a game with wormate.io
Developer User10612｜Date and time 23/10/26 22:50:40
Build time 75.683 sec｜Game capacity 3.731KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<html>
<head>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize the game canvas and context
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Define the size of the game grid and tile
    const gridSize = 20;
    const tileCount = canvas.width / gridSize;

// Initialize game variables
    let snake = [{ x: 10, y: 10 }];
    let apple = { x: 15, y: 15 };
    let direction = { x: 0, y: 0 };
    let score = 0;

// Listen to touch events on mobile devices
    canvas.addEventListener("touchstart", handleTouchStart, false);
    canvas.addEventListener("touchmove", handleTouchMove, false);

// Handle touch start event
    let touchStartPos = null;
    function handleTouchStart(event) {
      touchStartPos = { x: event.touches[0].clientX, y: event.touches[0].clientY };
    }

// Handle touch move event
    function handleTouchMove(event) {
      if (!touchStartPos) return;
      
      const touchEndPos = { x: event.touches[0].clientX, y: event.touches[0].clientY };
      const dx = touchEndPos.x - touchStartPos.x;
      const dy = touchEndPos.y - touchStartPos.y;

if (Math.abs(dx) > Math.abs(dy)) {
        direction.x = dx > 0 ? 1 : -1;
        direction.y = 0;
      } else {
        direction.x = 0;
        direction.y = dy > 0 ? 1 : -1;
      }

touchStartPos = null;
    }

// Game loop
    function gameLoop() {
      clearCanvas();
      moveSnake();
      drawApple();
      drawSnake();
      checkCollision();

// Call the game loop recursively
      requestAnimationFrame(gameLoop);
    }

// Clear the canvas
    function clearCanvas() {
      ctx.fillStyle = "#f0f0f0";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

// Move the snake in the current direction
    function moveSnake() {
      const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
      snake.unshift(head);

// Remove tail segment if not eating an apple
      if (head.x !== apple.x || head.y !== apple.y) {
        snake.pop();
      } else {
        // Increase score and generate a new apple
        score++;
        generateApple();
      }
    }

// Draw the snake
    function drawSnake() {
      ctx.fillStyle = "#00aa00";
      snake.forEach(segment => {
        ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
      });
    }

// Draw the apple
    function drawApple() {
      ctx.fillStyle = "#ff0000";
      ctx.fillRect(apple.x * gridSize, apple.y * gridSize, gridSize, gridSize);
    }

// Generate a new apple at a random position
    function generateApple() {
      apple = {
        x: Math.floor(Math.random() * tileCount),
        y: Math.floor(Math.random() * tileCount)
      };
    }

// Check for collision with walls or self
    function checkCollision() {
      const head = snake[0];
      if (
        head.x < 0 ||
        head.x >= tileCount ||
        head.y < 0 ||
        head.y >= tileCount ||
        isSelfCollision()
      ) {
        // Game over - reset variables
        snake = [{ x: 10, y: 10 }];
        direction = { x: 0, y: 0 };
        score = 0;
      }
    }

// Check for collision with self
    function isSelfCollision() {
      const head = snake[0];
      for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
          return true;
        }
      }
      return false;
    }

// Start the game loop
    gameLoop();
  </script>
</body>
</html>