用jquery实现Snake贪吃蛇游戏

封面图 • 2023-07-20 • jQuery

用jquery实现Snake贪吃蛇游戏

以下是使用 jQuery 实现的简单贪吃蛇游戏示例：

HTML 代码：

html
```
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="game-container">
    <div id="snake"></div>
    <div id="food"></div>
  </div>

css
```
#game-container {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  overflow: hidden;
}

#snake {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: green;
}

#food {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
}
```
JavaScript 代码（script.js）：

javascript
```
$(document).ready(function() {
  var gameContainer = $('#game-container');
  var snake = $('#snake');
  var food = $('#food');
  var direction = 'right';
  var interval;
  var speed = 150;
  var isGameOver = false;
  var score = 0;

var snakeBody = [
    { top: 0, left: 0 },
    { top: 0, left: 20 },
    { top: 0, left: 40 }
  ];

function startGame() {
    interval = setInterval(moveSnake, speed);
    generateFood();
  }

function moveSnake() {
    var head = Object.assign({}, snakeBody[0]);
    switch (direction) {
      case 'up':
        head.top -= 20;
        break;
      case 'down':
        head.top += 20;
        break;
      case 'left':
        head.left -= 20;
        break;
      case 'right':
        head.left += 20;
        break;
    }

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

snakeBody.unshift(head);
    if (head.top === food.position().top && head.left === food.position().left) {
      score++;
      $('#score').text('Score: ' + score);
      generateFood();
    } else {
      snakeBody.pop();
    }

updateSnake();
  }

function isCollision(position) {
    var collision = false;
    if (
      position.top < 0 ||
      position.left < 0 ||
      position.top >= gameContainer.height() ||
      position.left >= gameContainer.width()
    ) {
      collision = true;
    }

snakeBody.forEach(function(bodyPart) {
      if (position.top === bodyPart.top && position.left === bodyPart.left) {
        collision = true;
      }
    });

return collision;
  }

function updateSnake() {
    snake.empty();
    snakeBody.forEach(function(bodyPart) {
      var bodyPartElement = $('<div class="snake-body"></div>');
      bodyPartElement.css('top', bodyPart.top + 'px');
      bodyPartElement.css('left', bodyPart.left + 'px');
      snake.append(bodyPartElement);
    });
  }

function generateFood() {
    var maxX = gameContainer.width() / 20;
    var maxY = gameContainer.height() / 20;
    var foodLeft = Math.floor(Math.random() * maxX) * 20;
    var foodTop = Math.floor(Math.random() * maxY) * 20;

snakeBody.forEach(function(bodyPart) {
      if (foodTop === bodyPart.top && foodLeft === bodyPart.left) {
        generateFood();
        return;
      }
    });

food.css('top', foodTop + 'px');
    food.css('left', foodLeft + 'px');
  }

function endGame() {
    clearInterval(interval);
    isGameOver = true;
    alert('Game Over! Your score: ' + score);
  }

$(document).keydown(function(e) {
    if (isGameOver) {
      return;
    }
    switch (e.keyCode) {
      case 38: // Up arrow key
        if (direction !== 'down') {
          direction = 'up';
        }
        break;
      case 40: // Down arrow key
        if (direction !== 'up') {
          direction = 'down';
        }
        break;
      case 37: // Left arrow key
        if (direction !== 'right') {
          direction = 'left';
        }
        break;
      case 39: // Right arrow key
        if (direction !== 'left') {
          direction = 'right';
        }
        break;
    }
  });

startGame();
});
```
请注意，这只是一个简化的贪吃蛇游戏，可能还需要进行进一步的优化和改进来提高游戏的体验和可玩性。你可以根据需要自行修改和扩展代码。