AI game creator

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

No:34664

←

Prev Next

→

Snake Game
Developer User16297｜Date and time 24/1/11 7:03:18
Build time 23.931 sec｜Game capacity 5.61KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #canvas {
      display: block;
      margin: 0 auto;
      background: #ddd;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

var blockSize = 20;
    var widthInBlocks = canvas.width / blockSize;
    var heightInBlocks = canvas.height / blockSize;

var score = 0;

var snake;
    var apple;

// Función para dibujar bloques en el canvas
    var drawBlock = function(ctx, position) {
      var x = position[0] * blockSize;
      var y = position[1] * blockSize;
      ctx.fillRect(x, y, blockSize, blockSize);
    };

// Función para dibujar el marcador
    var drawScore = function() {
      ctx.font = "20px Arial";
      ctx.fillStyle = "black";
      ctx.textAlign = "left";
      ctx.textBaseline = "top";
      ctx.fillText("Puntuación: " + score, blockSize, blockSize);
    };

// Función para reiniciar el juego
    var gameOver = function() {
      clearInterval(intervalId);
      ctx.font = "60px Arial";
      ctx.fillStyle = "black";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2);
    };

// Objeto Snake y sus métodos
    var Snake = function() {
      this.segments = [[6, 4], [5, 4], [4, 4]];
      this.direction = "right";
      this.nextDirection = "right";
    };

Snake.prototype.draw = function() {
      for (var i = 0; i < this.segments.length; i++) {
        drawBlock(ctx, this.segments[i]);
      }
    };

Snake.prototype.move = function() {
      var head = this.segments[0];
      var newHead;

this.direction = this.nextDirection;

if (this.direction === "right") {
        newHead = [head[0] + 1, head[1]];
      } else if (this.direction === "left") {
        newHead = [head[0] - 1, head[1]];
      } else if (this.direction === "up") {
        newHead = [head[0], head[1] - 1];
      } else if (this.direction === "down") {
        newHead = [head[0], head[1] + 1];
      }

this.segments.unshift(newHead);

if (this.checkCollision()) {
        gameOver();
        return;
      }

if (this.eatApple()) {
        score++;
        generateApple();
      } else {
        this.segments.pop();
      }
    };

Snake.prototype.checkCollision = function() {
      var head = this.segments[0];
      var leftCollision = (head[0] === 0);
      var rightCollision = (head[0] === widthInBlocks - 1);
      var topCollision = (head[1] === 0);
      var bottomCollision = (head[1] === heightInBlocks - 1);

var selfCollision = false;
      for (var i = 1; i < this.segments.length; i++) {
        if (head[0] === this.segments[i][0] && head[1] === this.segments[i][1]) {
          selfCollision = true;
          break;
        }
      }

return leftCollision || rightCollision || topCollision || bottomCollision || selfCollision;
    };

Snake.prototype.eatApple = function() {
      var head = this.segments[0];
      return head[0] === apple.position[0] && head[1] === apple.position[1];
    };

Snake.prototype.setDirection = function(newDirection) {
      if (this.direction === "up" && newDirection === "down") {
        return;
      } else if (this.direction === "down" && newDirection === "up") {
        return;
      } else if (this.direction === "right" && newDirection === "left") {
        return;
      } else if (this.direction === "left" && newDirection === "right") {
        return;
      }

this.nextDirection = newDirection;
    };

// Objeto Apple y sus métodos
    var Apple = function() {
      this.position = [10, 10];
    };

Apple.prototype.draw = function() {
      ctx.save();
      ctx.fillStyle = "red";
      ctx.beginPath();
      var radius = blockSize / 2;
      var x = this.position[0] * blockSize + radius;
      var y = this.position[1] * blockSize + radius;
      ctx.arc(x, y, radius, 0, Math.PI * 2, true);
      ctx.fill();
      ctx.restore();
    };

// Función para generar una nueva posición para la manzana
    var generateApple = function() {
      var x = Math.floor(Math.random() * (widthInBlocks - 2)) + 1;
      var y = Math.floor(Math.random() * (heightInBlocks - 2)) + 1;
      apple = new Apple();
      apple.position = [x, y];
    };

// Función para convertir el evento de tecla en una dirección
    var directionByKeyCode = function(keyCode) {
      if (keyCode === 37) {
        return "left";
      } else if (keyCode === 38) {
        return "up";
      } else if (keyCode === 39) {
        return "right";
      } else if (keyCode === 40) {
        return "down";
      }
    };

// Funciones para capturar los eventos de tecla y cambiar la dirección de la serpiente
    document.addEventListener("keydown", function(event) {
      var newDirection = directionByKeyCode(event.keyCode);
      if (newDirection !== undefined) {
        snake.setDirection(newDirection);
      }
    });

// Función principal
    var main = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawScore();
      snake.move();
      snake.draw();
      apple.draw();
    };

// Generar posición inicial para la serpiente
    var init = function() {
      score = 0;
      snake = new Snake();
      generateApple();
      var intervalTime = 200;
      intervalId = setInterval(main, intervalTime);
    };

// Iniciar el juego
    init();
  </script>
</body>
</html>