Snake game with scores and leaderboard most scores's game

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

No:36049

111

←

Prev Next

→

Snake game with scores and leaderboard most scores
Developer User16442｜Date and time 24/1/16 10:30:20
Build time 20.359 sec｜Game capacity 4.18KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid #333;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  
  <canvas id="game-board" width="400" height="400"></canvas>

// Set up the initial score and leaderboard
    var score = 0;
    var leaderboard = [];

// Define the snake and initial position
    var snake = [
      { x: 200, y: 200 },
      { x: 190, y: 200 },
      { x: 180, y: 200 },
      { x: 170, y: 200 },
    ];

// Define the direction of the snake
    var dx = 10;
    var dy = 0;

// Define the food and initial position
    var food = { x: 0, y: 0 };

// Generate random position for the food
    function generateFoodPosition() {
      food.x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
      food.y = Math.floor(Math.random() * (canvas.height / 10)) * 10;

// Make sure the food doesn't overlap with the snake
      for (var i = 0; i < snake.length; i++) {
        if (snake[i].x === food.x && snake[i].y === food.y) {
          generateFoodPosition();
          break;
        }
      }
    }

// Function to draw objects on the canvas
    function drawObjects() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the snake
      for (var i = 0; i < snake.length; i++) {
        context.fillStyle = i === 0 ? "#000" : "#00a";
        context.fillRect(snake[i].x, snake[i].y, 10, 10);
        context.strokeStyle = "#fff";
        context.strokeRect(snake[i].x, snake[i].y, 10, 10);
      }

// Draw the food
      context.fillStyle = "#f00";
      context.fillRect(food.x, food.y, 10, 10);
      context.strokeStyle = "#fff";
      context.strokeRect(food.x, food.y, 10, 10);

// Draw the score
      context.fillStyle = "#000";
      context.font = "20px Arial";
      context.fillText("Score: " + score, 10, 25);
    }

// Function to handle game over event
    function gameOver() {
      // Update the leaderboard
      leaderboard.push(score);
      leaderboard.sort(function (a, b) {
        return b - a;
      });

// Reset the score and snake
      score = 0;
      snake = [
        { x: 200, y: 200 },
        { x: 190, y: 200 },
        { x: 180, y: 200 },
        { x: 170, y: 200 },
      ];

// Generate new food position
      generateFoodPosition();
    }

// Function to move the snake
    function moveSnake() {
      var head = { x: snake[0].x + dx, y: snake[0].y + dy };
      snake.unshift(head);

// Check for collision with food
      if (snake[0].x === food.x && snake[0].y === food.y) {
        score += 10;
        generateFoodPosition();
      } else {
        snake.pop();
      }

// Check for collision with walls
      if (
        snake[0].x < 0 ||
        snake[0].x >= canvas.width ||
        snake[0].y < 0 ||
        snake[0].y >= canvas.height
      ) {
        gameOver();
        return;
      }

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

drawObjects();
    }

// Function to handle keydown event
    function onKeyDown(event) {
      var key = event.keyCode;
      var goingUp = dy === -10;
      var goingDown = dy === 10;
      var goingLeft = dx === -10;
      var goingRight = dx === 10;

if (key === 37 && !goingRight) {
        dx = -10;
        dy = 0;
      }

if (key === 38 && !goingDown) {
        dx = 0;
        dy = -10;
      }

if (key === 39 && !goingLeft) {
        dx = 10;
        dy = 0;
      }

if (key === 40 && !goingUp) {
        dx = 0;
        dy = 10;
      }
    }

// Generate initial food position
    generateFoodPosition();

// Start the game loop
    setInterval(moveSnake, 100);

// Attach event listener for keydown event
    document.addEventListener("keydown", onKeyDown);
  </script>

</body>
</html>