在 GitHub 主页畅享贪吃蛇游戏

2023-11-04 15:35:00

在探索如何为我的 GitHub 主页添加更多个性化元素的过程中，我偶然发现了一种在主页上展示贪吃蛇游戏的独特方法。受到这个想法的启发，我决定尝试实现它，并在此分享我的经验和学到的教训。

准备工作：

GitHub 账号： 您需要拥有一个 GitHub 账号。
文本编辑器： 您将需要一个文本编辑器来创建代码文件。推荐使用Visual Studio Code、Atom或Sublime Text等代码编辑器。
版本控制系统： 为了方便管理代码更改并与他人协作，您需要使用版本控制系统，例如Git。

实施步骤：

创建 GitHub 仓库： 首先，您需要创建一个 GitHub 仓库来存储您的代码。您可以通过访问GitHub网站并按照说明进行操作来创建仓库。
克隆仓库： 将仓库克隆到本地计算机。您可以在命令提示符或终端中使用以下命令完成此操作：

git clone https://github.com/your-username/your-repository-name.git

创建贪吃蛇代码文件： 在克隆的仓库中，创建一个名为index.html的文件。这将是您放置贪吃蛇游戏代码的地方。
添加贪吃蛇代码： 将以下代码复制并粘贴到index.html文件中：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var snake = [
      {x: 200, y: 200},
      {x: 190, y: 200},
      {x: 180, y: 200},
      {x: 170, y: 200},
      {x: 160, y: 200},
    ];

    var food = {
      x: Math.floor(Math.random() * 380 + 10),
      y: Math.floor(Math.random() * 380 + 10)
    };

    var dx = 10;
    var dy = 0;

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      for (var i = 0; i < snake.length; i++) {
        ctx.fillStyle = (i == 0) ? "green" : "white";
        ctx.fillRect(snake[i].x, snake[i].y, 10, 10);
      }

      ctx.fillStyle = "red";
      ctx.fillRect(food.x, food.y, 10, 10);

      var snakeX = snake[0].x + dx;
      var snakeY = snake[0].y + dy;

      if (snakeX == food.x && snakeY == food.y) {
        food = {
          x: Math.floor(Math.random() * 380 + 10),
          y: Math.floor(Math.random() * 380 + 10)
        };
      } else {
        snake.pop();
      }

      var newHead = {
        x: snakeX,
        y: snakeY
      };

      snake.unshift(newHead);
    }

    setInterval(draw, 100);

    document.addEventListener('keydown', function(e) {
      if (e.keyCode == 37 && dx == 10) {
        dx = -10;
        dy = 0;
      } else if (e.keyCode == 38 && dy == 10) {
        dx = 0;
        dy = -10;
      } else if (e.keyCode == 39 && dx == -10) {
        dx = 10;
        dy = 0;
      } else if (e.keyCode == 40 && dy == -10) {
        dx = 0;
        dy = 10;
      }
    });
  </script>
</body>
</html>

提交代码： 将您对代码所做的更改提交到您的 GitHub 仓库。您可以在命令提示符或终端中使用以下命令完成此操作：

git add .
git commit -m "Added贪吃蛇游戏到GitHub主页"
git push

部署代码： 您可以使用GitHub Pages来部署您的代码并使其在互联网上可用。您可以在GitHub 网站上找到有关如何部署您的网站的说明。
在 GitHub 主页上启用游戏： 在 GitHub 主页上，点击您的个人资料图片，然后点击“Settings”。在“Settings”页面中，点击“Pages”。在“Pages”页面中，选择您刚刚创建的仓库，然后点击“Save”。

结论：

通过以上步骤，您就可以在GitHub主页上玩到贪吃蛇游戏了。这个小游戏不仅有趣，而且可以帮助您学习一些基本的编程知识。如果您对编程感兴趣，我鼓励您尝试一下这个项目。

提示：