Snake but made under one hour's game

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

No:38098

←

Prev Next

→

Snake but made under one hour
Developer User17003｜Date and time 24/1/22 12:25:52
Build time 14.782 sec｜Game capacity 3.736KB｜

Script

Sure! Here's a simple implementation of the classic game Snake using JavaScript, enclosed in script tags within a single HTML file. The game is designed for smartphone operation and uses pictograms to represent the snake and food.

You can save the code above into a single HTML file, for example, `snake.html`. Then, you can open the file with a web browser on your smartphone to play the game. The game uses the smartphone's arrow keys for controlling the snake. The snake is represented by green rectangles, the food by a red rectangle, and the score is displayed in the top-left corner of the canvas. Enjoy playing!

←

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>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
<script>
  // Initialize the game
  const canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  const context = canvas.getContext('2d');
  
  let score = 0;
  let direction = 'right';
  
  const snake = [
    { x: 20, y: 20 },
    { x: 19, y: 20 },
    { x: 18, y: 20 }
  ];
  
  let food = { x: 10, y: 10 };
  
  const grid = 20;
  const canvasSize = 400;
  
  let interval;
  
  // Generate random food location
  function generateFood() {
    food = {
      x: Math.floor(Math.random() * ((canvasSize / grid) - 1) + 1) * grid,
      y: Math.floor(Math.random() * ((canvasSize / grid) - 1) + 1) * grid
    };
  }
  
  // Handle keyboard input
  function handleInput(event) {
    if (event.key === 'ArrowUp' && direction !== 'down') {
      direction = 'up';
    } else if (event.key === 'ArrowDown' && direction !== 'up') {
      direction = 'down';
    } else if (event.key === 'ArrowLeft' && direction !== 'right') {
      direction = 'left';
    } else if (event.key === 'ArrowRight' && direction !== 'left') {
      direction = 'right';
    }
  }
  
  // Update snake position
  function updateSnake() {
    const head = { x: snake[0].x, y: snake[0].y };
  
    if (direction === 'up') head.y -= grid;
    if (direction === 'down') head.y += grid;
    if (direction === 'left') head.x -= grid;
    if (direction === 'right') head.x += grid;
  
    snake.unshift(head);
  
    // Check if snake eats food
    if (head.x === food.x && head.y === food.y) {
      score += 10;
      generateFood();
    } else {
      snake.pop();
    }
  }
  
  // Render game objects
  function draw() {
    context.clearRect(0, 0, canvasSize, canvasSize);
  
    // Draw snake
    snake.forEach(segment => {
      context.fillStyle = 'green';
      context.fillRect(segment.x, segment.y, grid, grid);
    });
  
    // Draw food
    context.fillStyle = 'red';
    context.fillRect(food.x, food.y, grid, grid);
  
    // Draw score
    context.fillStyle = 'black';
    context.font = '20px Arial';
    context.fillText(`Score: ${score}`, 10, 25);
  }
  
  // Check if the game is over
  function checkCollision() {
    const head = snake[0];
    const rest = snake.slice(1);
  
    // Check if snake hits walls
    if (
      head.x < 0 ||
      head.y < 0 ||
      head.x >= canvasSize ||
      head.y >= canvasSize
    ) {
      clearInterval(interval);
      alert('Game Over!');
    }
  
    // Check if snake hits itself
    if (rest.some(segment => segment.x === head.x && segment.y === head.y)) {
      clearInterval(interval);
      alert('Game Over!');
    }
  }
  
  // Start the game
  function startGame() {
    document.addEventListener('keydown', handleInput);
  
    canvas.width = canvasSize;
    canvas.height = canvasSize;
  
    interval = setInterval(() => {
      updateSnake();
      checkCollision();
      draw();
    }, 200);
  
    generateFood();
  }
  
  startGame();
</script>
</body>
</html>
```

You can save the code above into a single HTML file, for example, `snake.html`. Then, you can open the file with a web browser on your smartphone to play the game. The game uses the smartphone's arrow keys for controlling the snake. The snake is represented by green rectangles, the food by a red rectangle, and the score is displayed in the top-left corner of the canvas. Enjoy playing!