You are a snake and needs to eat squares to become longer's game

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

No:10998

107

←

Prev Next

→

You are a snake and needs to eat squares to become..ALL
Developer User4715｜Date and time 23/8/6 12:32:13
Build time 27.262 sec｜Game capacity 3.736KB｜

Script

Sure, here's a simple implementation of the classic game "Snake" in a single HTML file with JavaScript code and pictograms for smartphone operation. Please note that the snake's movement in the game is controlled using arrow keys. Feel free to modify the code as needed.

Please note that the game is implemented without any additional libraries (such as jQuery) for simplicity. The game score is displayed with an alert box when the game is over.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game-container {
      width: 320px;
      height: 320px;
      margin: 0 auto;
      border: 1px solid black;
      position: relative;
      overflow: hidden;
    }
    
    .square {
      width: 20px;
      height: 20px;
      position: absolute;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  
<div id="game-container"></div>

// Generate random number for food position
  function getRandomNumber() {
    return Math.floor(Math.random() * gridSize);
  }

// Render game grid and elements
  function renderGame() {
    gameContainer.innerHTML = '';

// Render snake
    snake.forEach(function(segment) {
      var snakeSegment = document.createElement('div');
      snakeSegment.className = 'square snake';
      snakeSegment.style.left = (segment.x * squareSize) + 'px';
      snakeSegment.style.top = (segment.y * squareSize) + 'px';
      gameContainer.appendChild(snakeSegment);
    });

// Render food
    var foodElement = document.createElement('div');
    foodElement.className = 'square food';
    foodElement.style.left = (food.x * squareSize) + 'px';
    foodElement.style.top = (food.y * squareSize) + 'px';
    gameContainer.appendChild(foodElement);
  }

// Game loop
  function gameLoop() {
    var head = Object.assign({}, snake[0]);

// Update snake position based on direction
    if(direction === 'right') head.x += 1;
    if(direction === 'left') head.x -= 1;
    if(direction === 'down') head.y += 1;
    if(direction === 'up') head.y -= 1;

// Check collision with food
    if(head.x === food.x && head.y === food.y) {
      score += 10;
      food = {x: getRandomNumber(), y: getRandomNumber()};
    } else {
      // Remove tail segment if no food eaten
      snake.pop();
    }

// Check collision with snake body or game boundary
    if(head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize || checkCollision(head)) {
      clearInterval(interval);
      alert('Game Over!\nYour Score: ' + score);
      return;
    }

// Add new head segment
    snake.unshift(head);

// Render updated game state
    renderGame();
  }

// Check collision with snake body segments
  function checkCollision(head) {
    return snake.slice(1).some(function(segment) {
      return segment.x === head.x && segment.y === head.y;
    });
  }

// Handle arrow key events for direction control
  function handleDirection(event) {
    if(event.keyCode === 37 && direction !== 'right') direction = 'left';
    if(event.keyCode === 39 && direction !== 'left') direction = 'right';
    if(event.keyCode === 38 && direction !== 'down') direction = 'up';
    if(event.keyCode === 40 && direction !== 'up') direction = 'down';
  }

// Start the game
  function startGame() {
    document.addEventListener('keydown', handleDirection);
    interval = setInterval(gameLoop, 200);
  }

// Initialize game
  renderGame();
  startGame();
</script>

</body>
</html>
```

Please note that the game is implemented without any additional libraries (such as jQuery) for simplicity. The game score is displayed with an alert box when the game is over.