AI game creator

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

No:25241

←

Prev Next

→

Snik game
Developer User12323｜Date and time 23/11/19 19:07:18
Build time 251.874 sec｜Game capacity 4.616KB｜

Script

Sure! Here is a simple implementation of the "Snik" game using JavaScript, HTML, and pictograms. Save the code below in an HTML file and open it in a browser to play the game.

This code sets up a simple Snake game using JavaScript and HTML canvas. The game can be controlled using arrow keys on a smartphone. The snake moves through the canvas, eats apples represented by pictograms, and grows in length. The game ends if the snake collides with itself or the wall.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here is a simple implementation of the "Snik" game using JavaScript, HTML, and pictograms. Save the code below in an HTML file and open it in a browser to play the game.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Snik Game</title>
    <style>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>

// Pictograms for snake and apple
      var snakeImg = new Image();
      snakeImg.src = 'https://example.com/snake-pictogram.png';

var appleImg = new Image();
      appleImg.src = 'https://example.com/apple-pictogram.png';

// Pictogram size
      var pictogramSize = 40;

// Initialize the game
      function init() {
        canvas = document.getElementById('gameCanvas');
        ctx = canvas.getContext('2d');
        snake = [{ x: 200, y: 200 }];
        apple = { x: 120, y: 120 };
        score = 0;

document.addEventListener('keydown', changeDirection);

// Set game loop
        setInterval(gameLoop, 100);
      }

// Update game logic
      function gameLoop() {
        clearCanvas();
        moveSnake();
        drawSnake();
        drawApple();
        drawScore();

if (isCollision()) {
          endGame();
        }
      }

// Clear the canvas
      function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }

// Move the snake
      function moveSnake() {
        var newHead = {
          x: snake[0].x + direction.x,
          y: snake[0].y + direction.y
        };

snake.unshift(newHead); // Add new head
        if (!isAppleEaten()) {
          snake.pop(); // Remove tail if apple not eaten
        }
      }

// Draw the snake
      function drawSnake() {
        snake.forEach(function(segment) {
          ctx.drawImage(snakeImg, segment.x, segment.y, pictogramSize, pictogramSize);
        });
      }

// Draw the apple
      function drawApple() {
        ctx.drawImage(appleImg, apple.x, apple.y, pictogramSize, pictogramSize);
      }

// Draw the score
      function drawScore() {
        ctx.font = '20px Arial';
        ctx.fillText('Score: ' + score, 10, 30);
      }

// Check if there is a collision
      function isCollision() {
        var head = snake[0];

// Check self-collision
        for (var i = 1; i < snake.length; i++) {
          if (snake[i].x === head.x && snake[i].y === head.y) {
            return true;
          }
        }

// Check wall collision
        if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
          return true;
        }

return false;
      }

// Check if apple is eaten
      function isAppleEaten() {
        var head = snake[0];

if (head.x === apple.x && head.y === apple.y) {
          score++;
          generateApple();
          return true;
        }

return false;
      }

// Generate a new apple
      function generateApple() {
        apple.x = Math.floor(Math.random() * (canvas.width/pictogramSize)) * pictogramSize;
        apple.y = Math.floor(Math.random() * (canvas.height/pictogramSize)) * pictogramSize;
      }

// Handle keyboard input
      var direction = { x: 0, y: -pictogramSize }; // start direction: up

function changeDirection(event) {
        var key = event.keyCode;

if (key === 37 && direction.x !== pictogramSize) {
          direction = { x: -pictogramSize, y: 0 }; // left
        } else if (key === 38 && direction.y !== pictogramSize) {
          direction = { x: 0, y: -pictogramSize }; // up
        } else if (key === 39 && direction.x !== -pictogramSize) {
          direction = { x: pictogramSize, y: 0 }; // right
        } else if (key === 40 && direction.y !== -pictogramSize) {
          direction = { x: 0, y: pictogramSize }; // down
        }
      }

// End the game
      function endGame() {
        alert('Game Over! Your score: ' + score);
        window.location.reload();
      }

// Start the game
      init();
    </script>
  </body>
</html>
```