兔子吃月饼，探索前端技术与中秋节的奇妙结合

引言

中秋节，是中国传统的重要节日之一，也是家人团聚、共享美食的时刻。而作为一名后端开发者，我在这个特殊的节日里，尝试着用技术的力量创造出一款贪吃蛇游戏，以兔子吃月饼的形式，让大家在游戏中感受中秋的喜庆氛围。

痛苦

作为后端开发者，我平时主要负责处理服务器端的逻辑和数据，但是为了让游戏更加生动有趣，我也尝试着写一些前端代码。通过学习HTML和CSS等前端技术，我可以将自己的创意和想法转化为生动的网页。在编写HTML代码时，我学会了使用不同的标签和属性来构建网页的结构和内容，通过CSS样式的调整，我可以为网页增添美观和吸引力。然而，在写前端代码的过程中，我发现了一个问题，那就是CSS样式的调整十分困难。作为一个后端开发者，我对前端的了解并不深入，因此在调整样式的时候遇到了不少困难。不过，我并没有放弃，通过学习和查找相关资料，我逐渐解决了其中的问题，并且为游戏添加了一些简单但有趣的动画效果，使得兔子吃月饼的过程更加生动。

在游戏开发的过程中，我还遇到了一个问题，那就是寻找合适的免费矢量图片。很多网站都收费保护版权，对于我这样的非商业用途来说，这显然是不适用的。经过一番搜索，我终于找到了一些免费的兔子图片和月饼图片，虽然数量有限，但已足够满足我游戏的需求。在此特别声明，如果我使用的图片有侵权行为，请及时联系我，我会立即删除。

除了尝试调整CSS样式和寻找免费矢量图片外，我还尝试了使用区域录屏软件来录制游戏的效果图。这样可以更好地展示游戏的特点和动画效果。虽然初次使用这些软件有一些困难，但通过学习和实践，我成功录制了一些令人满意的效果图。

另外，我还尝试了使用码上掘金这个功能来分享我的代码和经验。然而，由于对这个功能不太熟悉，我遇到了一些困难。不过，我相信随着继续学习和实践，我会逐渐掌握这个功能，并能够更好地与其他开发者交流和分享我的经验。

成果

通过这个小小的游戏开发过程，我深刻体会到了技术的无限魅力。技术不仅仅是一种工具，更是一种创造力的表达方式。正是通过技术，我才能将中秋节的喜庆氛围与游戏相结合，带给大家一份独特的体验。

虽然实现的效果看起来很low，但实际上是因为我的前端能力有限。但是这并不让我气馁，相反，它激发了我不断学习和提升自己的动力。

代码

js样式如下：

document.addEventListener('DOMContentLoaded', () => {  
    const board = document.getElementById('game-board');  
    const gridSize = 45;  
    const boardSize = 400;  
    const snakeSize = 20;  
    const snakeSpeed = 900;  
    let snake = [{ x: 0, y: 0 }];  
    let direction = 'right';  
    let food = generateFood();  
    
    setInterval(moveSnake, snakeSpeed);  
    document.addEventListener('keydown', changeDirection);  
    
    function moveSnake() {  
      const head = Object.assign({}, snake[0]);  
    
      switch (direction) {  
        case 'right':  
          head.x += gridSize;  
          break;  
        case 'left':  
          head.x -= gridSize;  
          break;  
        case 'up':  
          head.y -= gridSize;  
          break;  
        case 'down':  
          head.y += gridSize;  
          break;  
      }  
    
      snake.unshift(head);  
      if (head.x === food.x && head.y === food.y) {  
        food = generateFood();  
      } else {  
        snake.pop();  
      }  
    
      renderSnake();  
      renderFood();  
    }  
    
    // function renderSnake() {  
    //   const snakeElements = document.getElementsByClassName('snake');  
    //   while (snakeElements.length > 0) {  
    //     snakeElements[0].parentNode.removeChild(snakeElements[0]);  
    //   }  
    //   snake.forEach((segment, index) => {  
    //     const element = document.createElement('div');  
    //     if(index ==0){
    //     element.className = 'rabbit';  
    //     element.style.left = segment.x + 'px';  
    //     element.style.top = segment.y + 'px';  
    //     board.appendChild(element);  
    //     }else{
    //         element.className = 'food';  
    //         element.style.left = segment.x + 'px';  
    //         element.style.top = segment.y + 'px';  
    //         board.appendChild(element);  
    //     }
    //   });  
       
    // }  
    
    function renderSnake() {  
        const snakeElements = document.getElementsByClassName('foods');  
        while (snakeElements.length > 0) {  
          snakeElements[0].parentNode.removeChild(snakeElements[0]);  
        }  
        const rabbitElements = document.getElementsByClassName('rabbit');  
        while (rabbitElements.length > 0) {  
            rabbitElements[0].parentNode.removeChild(rabbitElements[0]);  
        } 
        snake.forEach((segment, index) => {  
          const element = document.createElement('div');  
          if(index == 0){
                element.className = 'rabbit';  
            }else{
                element.className = 'foods';  
            }
          element.style.left = segment.x + 'px';  
          element.style.top = segment.y + 'px';  
          board.appendChild(element);  
        });  
      }  

    function renderFood() {  
      const foodElement = document.getElementsByClassName('food');  
      while (foodElement.length > 0) {  
        foodElement[0].parentNode.removeChild(foodElement[0]);  
      }  
      const element = document.createElement('div');  
      element.className = 'food';  
      element.style.left = food.x + 'px';  
      element.style.top = food.y + 'px';  
      board.appendChild(element);  
    }  
    
    function generateFood() {  
      const x = Math.floor(Math.random() * (boardSize / gridSize)) * gridSize;  
      const y = Math.floor(Math.random() * (boardSize / gridSize)) * gridSize;  
      return { x, y };  
    }  
    function changeDirection(event) {  
        switch (event.keyCode) {  
          case 37: // Left arrow key pressed.  
            if (direction !== 'right') { direction = 'left'; } break; // Only allow left if not moving right. (Prevents reverse direction.)   
          case 39: // Right arrow key pressed.  
            if (direction !== 'left') { direction = 'right'; } break; // Only allow right if not moving left. (Prevents reverse direction.)   
          case 38: // Up arrow key pressed.  
            if (direction !== 'down') { direction = 'up'; } break; // Only allow up if not moving down. (Prevents reverse direction.)   
          case 40: // Down arrow key pressed.  
            if (direction !== 'up') { direction = 'down'; } break; // Only allow down if not moving up. (Prevents reverse direction.)   
          default: break; // Do nothing if the key pressed isn't an arrow key.   
        }  
      }
});

html如下：

<!DOCTYPE html>  
<html>  
<head>  
  <title>贪吃蛇游戏</title>  
  <style>  
    #game-board {  
      width: 600px;  
      height: 600px;  
      border: 1px solid #000;  
      position: relative;  
      background-image: url('board.png');  
      z-index: -1;
    }  
  
    .snake {  
      width: 20px;  
      height: 20px;  
      background-color: #000;  
      position: absolute;  
    }  

    .rabbit {  
      width: 50px;  
      height: 50px;  
      background-image: url('th.jpg');  
      background-size: cover; 
      /* background-color: #000;   */
      position: absolute;  
    }  
  
 .food {  
  width: 50px;  
  height: 50px;  
  background-image: url('food.png');  
  background-size: cover; 
  position: absolute;  
}  

.foods {  
  width: 50px;  
  height: 50px;  
  background-image: url('food.png');  
  background-size: cover; 
  position: absolute;  
}  
  </style>  
</head>  
<body>  
  <div id="game-board"></div>  
  <script src="snake.js"></script>  
</body>  
</html>

结语

我意识到无论是前端还是后端，每个人都有自己独特的技能和见解，我们可以互相学习和启发。我深深地被技术的魅力和无限潜力所吸引，我相信，只要保持学习和努力，我们可以创造出更多有趣和有意义的作品。