AI game creator

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

No:16067

106

←

Prev Next

→

Snake Game
Developer User7110｜Date and time 23/9/15 20:57:22
Build time 38.869 sec｜Game capacity 3.881KB｜

Script

Sure! Here's a simple implementation of the classic Snake game using JavaScript and enclosed in HTML script tags. It can be played on a smartphone and uses pictograms for visuals:

Note: Make sure to replace `'emozi_cat.png'` in the CSS with the path to your actual food pictogram image.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the classic Snake game using JavaScript and enclosed in HTML script tags. It can be played on a smartphone and uses pictograms for visuals:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #game-board {
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid #000;
      }
      .cell {
        position: absolute;
        width: 20px;
        height: 20px;
      }
      .snake {
        background-color: #333;
      }
      .food {
        background-image: url('food.png');
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

// Initial snake position and direction
      let snake = [
        { x: Math.floor(boardSize / 2), y: Math.floor(boardSize / 2) }
      ];
      let direction = { x: 0, y: -1 };

// Initialize game board
      const gameBoard = document.getElementById('game-board');
      gameBoard.style.width = `${boardSize * cellSize}px`;
      gameBoard.style.height = `${boardSize * cellSize}px`;

// Draw cell
      function drawCell(x, y, className) {
        const cell = document.createElement('div');
        cell.className = `cell ${className}`;
        cell.style.left = `${x * cellSize}px`;
        cell.style.top = `${y * cellSize}px`;
        gameBoard.appendChild(cell);
      }

// Update game board
      function updateBoard() {
        gameBoard.innerHTML = '';

// Draw snake
        snake.forEach((cell, index) => {
          const className = index === 0 ? 'snake' : '';
          drawCell(cell.x, cell.y, className);
        });

// Draw food
        drawCell(food.x, food.y, 'food');
      }

// Generate random food position
      function generateFood() {
        return {
          x: Math.floor(Math.random() * boardSize),
          y: Math.floor(Math.random() * boardSize)
        };
      }

// Game loop
      let isGameOver = false;
      let food = generateFood();
      setInterval(() => {
        if (isGameOver) return;
        moveSnake();
        updateBoard();
        checkCollision();
      }, 1000 / frameRate);

// Handle user input
      document.addEventListener('keydown', (event) => {
        // ArrowUp
        if (event.keyCode === 38 && direction.y !== 1) {
          direction = { x: 0, y: -1 };
        }
        // ArrowDown
        else if (event.keyCode === 40 && direction.y !== -1) {
          direction = { x: 0, y: 1 };
        }
        // ArrowRight
        else if (event.keyCode === 39 && direction.x !== -1) {
          direction = { x: 1, y: 0 };
        }
        // ArrowLeft
        else if (event.keyCode === 37 && direction.x !== 1) {
          direction = { x: -1, y: 0 };
        }
      });

// Move snake
      function moveSnake() {
        const newHead = {
          x: snake[0].x + direction.x,
          y: snake[0].y + direction.y
        };
        snake.unshift(newHead);
        snake = snake.slice(0, snake.length - 1);
      }

// Check collision
      function checkCollision() {
        const head = snake[0];

// Check if snake hits the wall
        if (
          head.x >= boardSize ||
          head.x < 0 ||
          head.y >= boardSize ||
          head.y < 0
        ) {
          isGameOver = true;
          alert('Game Over!');
          return;
        }

// Check if snake eats the food
        if (head.x === food.x && head.y === food.y) {
          snake.push({ x: food.x, y: food.y });
          food = generateFood();
        }
      }
    </script>
  </body>
</html>
```

Note: Make sure to replace `'food.png'` in the CSS with the path to your actual food pictogram image.