❤️创意网页:贪吃蛇游戏 - 创造一个经典的小游戏

博主:命运之光 

🌸专栏:Python星辰秘典

🐳专栏:web开发(简单好用又好看)

❤️专栏:Java经典程序设计

☀️博主的其他文章:点击进入博主的主页

前言:欢迎踏入我的Web项目专栏,一段神奇而令人陶醉的数字世界!

🌌在这里,我将带您穿越时空,揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力,我创造了一系列令人惊叹的Web项目,它们仿佛是从梦境中涌现而出。

🌌在这个专栏中,您将遇到华丽的界面,如流星划过夜空般迷人;您将感受到动态的交互,如魔法般让您沉浸其中;您将探索响应式设计的玄妙,让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师,这个专栏将成为您的魔法书。我将分享每个项目的秘密,解开编码的谜题,让您也能够拥有制作奇迹的力量。

🌌准备好了吗?拿起您的键盘,跟随我的指引,一起进入这个神秘而充满惊喜的数字王国。在这里,您将找到灵感的源泉,为自己创造出一段奇幻的Web之旅!

目录

简介

动态图展示

准备工作

创造贪吃蛇游戏

运行游戏

完整代码

代码的使用方法(超简单什么都不用下载)

🍓1.打开记事本 

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件(大功告成(●'◡'●))

总结


简介

欢迎来到本篇技术博客!今天,我们将一起学习如何使用HTML5 Canvas和JavaScript创造一个经典的小游戏 - 贪吃蛇游戏。我们将会为您提供代码解析以及游戏玩法说明。让我们开始吧!


动态图展示


准备工作

在开始之前,我们需要做一些准备工作:

  1. 确保您有一个支持HTML5的现代web浏览器(如Chrome、Firefox、Safari等)。
  2. 创建一个HTML文件,并复制以下代码作为基础:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>贪吃蛇游戏</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    canvas {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // JavaScript代码将在下面添加
  </script>
</body>
</html>

创造贪吃蛇游戏

我们已经有了一个基本的HTML结构,其中包含一个Canvas元素用于绘制游戏画面。接下来,我们将添加JavaScript代码来创造贪吃蛇游戏。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const boxSize = 20;
const canvasSize = 400;
const snake = [];
let direction = 'right';
let food = {};

function drawSnakePart(x, y) {
  // ... 绘制蛇身体的代码 ...
}

function drawFood(x, y) {
  // ... 绘制食物的代码 ...
}

function generateFood() {
  // ... 生成新食物的代码 ...
}

function checkCollision(x, y, array) {
  // ... 检查碰撞的代码 ...
}

function draw() {
  // ... 游戏循环的代码 ...
}

// 监听方向键事件,控制蛇的移动方向
document.addEventListener('keydown', (event) => {
  // ... 控制方向的代码 ...
});

// 初始化蛇身体,创建三个蛇身体部分
snake.push({ x: boxSize * 2, y: boxSize });
snake.push({ x: boxSize, y: boxSize });
snake.push({ x: 0, y: boxSize });

generateFood();
draw();

在这段代码中,我们定义了一些变量和函数用于创建和控制贪吃蛇游戏。

首先,我们定义了一些常量,包括每个格子的大小boxSize、画布的大小canvasSize、蛇的身体snake、蛇的运动方向direction以及食物的位置food

然后,我们定义了两个绘制函数drawSnakePartdrawFood,用于在画布上绘制蛇的身体和食物。

接着,我们定义了一个generateFood函数,用于在画布上随机生成新的食物。

我们还定义了一个checkCollision函数,用于检查蛇头是否与蛇身体或画布边界发生碰撞。

接下来,我们定义了一个draw函数,用于控制游戏的主循环。在该函数中,我们会根据蛇的运动方向更新蛇的位置,并检查蛇是否吃到了食物或碰到了边界或自身。

最后,我们通过监听方向键事件,来控制蛇的运动方向。初始化时,我们将蛇的身体设置为三个部分,并在画布上生成新的食物。


运行游戏

现在,将上述HTML代码保存为一个HTML文件,并在浏览器中打开它。您将会看到一个黑色边框的画布,即游戏的主界面。使用方向键控制蛇的运动,吃掉食物,并尝试不要碰到画布边界或自身。


完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>贪吃蛇游戏</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    canvas {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    const boxSize = 20;
    const canvasSize = 400;
    const snake = [];
    let direction = 'right';
    let food = {};

    function drawSnakePart(x, y) {
      ctx.fillStyle = 'green';
      ctx.fillRect(x, y, boxSize, boxSize);
      ctx.strokeStyle = 'black';
      ctx.strokeRect(x, y, boxSize, boxSize);
    }

    function drawFood(x, y) {
      ctx.fillStyle = 'red';
      ctx.fillRect(x, y, boxSize, boxSize);
      ctx.strokeStyle = 'black';
      ctx.strokeRect(x, y, boxSize, boxSize);
    }

    function generateFood() {
      food = {
        x: Math.floor(Math.random() * (canvasSize / boxSize)) * boxSize,
        y: Math.floor(Math.random() * (canvasSize / boxSize)) * boxSize,
      };
    }

    function checkCollision(x, y, array) {
      // Check if the given position collides with the snake's body
      for (let i = 0; i < array.length; i++) {
        if (x === array[i].x && y === array[i].y) {
          return true;
        }
      }
      return false;
    }

    function draw() {
      ctx.clearRect(0, 0, canvasSize, canvasSize);

      // Update snake position based on direction
      const headX = snake[0].x + (direction === 'right' ? boxSize : direction === 'left' ? -boxSize : 0);
      const headY = snake[0].y + (direction === 'down' ? boxSize : direction === 'up' ? -boxSize : 0);

      // Check if the snake hits the canvas boundaries or collides with its body
      if (
        headX < 0 ||
        headX >= canvasSize ||
        headY < 0 ||
        headY >= canvasSize ||
        checkCollision(headX, headY, snake)
      ) {
        // Game over
        alert('游戏结束!');
        snake.length = 0; // Clear the snake array
        direction = 'right'; // Reset direction
        snake.push({ x: boxSize * 2, y: boxSize }); // Reset snake position
        generateFood(); // Generate new food
      }

      // Check if the snake eats the food
      if (headX === food.x && headY === food.y) {
        generateFood();
      } else {
        // If not, remove the tail segment
        snake.pop();
      }

      // Add new head segment to the beginning
      const newHead = { x: headX, y: headY };
      snake.unshift(newHead);

      for (let i = 0; i < snake.length; i++) {
        const { x, y } = snake[i];
        drawSnakePart(x, y);
      }

      drawFood(food.x, food.y);

      setTimeout(draw, 100); // Control snake speed (100ms)
    }

    // Listen for arrow key presses to control the snake
    document.addEventListener('keydown', (event) => {
      const key = event.key;
      if (key === 'ArrowUp' && direction !== 'down') {
        direction = 'up';
      } else if (key === 'ArrowDown' && direction !== 'up') {
        direction = 'down';
      } else if (key === 'ArrowLeft' && direction !== 'right') {
        direction = 'left';
      } else if (key === 'ArrowRight' && direction !== 'left') {
        direction = 'right';
      }
    });

    // Initialize the snake with 3 parts
    snake.push({ x: boxSize * 2, y: boxSize });
    snake.push({ x: boxSize, y: boxSize });
    snake.push({ x: 0, y: boxSize });

    generateFood();
    draw();
  </script>
</body>
</html>

代码的使用方法(超简单什么都不用下载)

🍓1.打开记事本 

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件(大功告成(●'◡'●))


总结

在本篇博客中,我们学习了如何使用HTML5 Canvas和JavaScript创造一个经典的小游戏 - 贪吃蛇游戏。通过绘制蛇的身体和食物,并监听方向键事件,我们成功地实现了一个简单而有趣的游戏。

希望您享受了本次贪吃蛇游戏的创作过程,并对游戏开发产生了兴趣。感谢您的阅读,祝您编程愉快!


本章的内容就到这里了,觉得对你有帮助的话就支持一下博主把~

🌌点击下方个人名片,交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
运用记事本编写小游戏是一种简单又有趣的方式,下面是一个示例程序来说明如何使用记事本编写一个简单的扑克牌游戏。 打开记事本,创建一个新的批处理文件,将其命名为“poker.bat”。开始编写代码。 首先,需要定义一副扑克牌,可以使用数字和字母来表示每张牌。例如,使用“S”表示黑桃,“H”表示红桃,“C”表示草花,“D”表示方块。使用数字“2”到“10”表示相应的牌面数字,使用“A”表示“Ace”,“J”表示“Jack”,“Q”表示“Queen”,“K”表示“King”。 ``` @echo off setlocal enabledelayedexpansion REM 定义扑克牌 set cards=S2 S3 S4 S5 S6 S7 S8 S9 S10 SA SJ SQ SK set cards=!cards! H2 H3 H4 H5 H6 H7 H8 H9 H10 HA HJ HQ HK set cards=!cards! C2 C3 C4 C5 C6 C7 C8 C9 C10 CA CJ CQ CK set cards=!cards! D2 D3 D4 D5 D6 D7 D8 D9 D10 DA DJ DQ DK ``` 然后,需要编写代码来实现发牌功能。可以使用随机数来模拟发牌过程,将发到的牌存储在一个变量中。以下是一个简单的发牌示例代码: ``` REM 发牌 for /L %%i in (1,1,5) do ( call :rand 52 call set card=%%cards:~!rand!,2%% echo 发到的牌是:!card! ) goto :eof :rand set /a "rand=%random%%%1" goto :eof ``` 最后,编写代码来判断牌面的大小,比较大小或进行其他操作。以下是一个简单的判断牌面大小的示例代码: ``` REM 比较牌面大小 set preCard= for %%c in (!cards!) do ( if defined preCard ( set currentCard=%%c if !preCard:~1! leq !currentCard:~1! ( echo !preCard! 小于或等于 !currentCard! ) else ( echo !preCard! 大于 !currentCard! ) ) set preCard=%%c ) ``` 完成以上步骤后,保存文件并双击运行“poker.bat”文件即可开始游戏。这只是一个简单的示例,你可以根据自己的喜好和能力添加更多功能以及游戏规则。运用记事本编写小游戏是一种很好的学习编程的方式,希望这个示例能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

命运之光

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值