HTML+JavaScript案例分享：贪吃蛇游戏实现与详解

魏大帅。

已于 2024-10-25 17:22:22 修改

阅读量980

点赞数 14

分类专栏： JS 开发全攻略文章标签： 1024程序员节 javascript 前端 css html

于 2024-10-24 10:47:21 首次发布

本文链接：https://blog.csdn.net/weimengen/article/details/143202874

版权

在网页开发的领域中，利用 HTML 和 JavaScript 能够创造出各种引人入胜的互动游戏。其中，贪吃蛇作为一款经典之作，以其简单易玩的特性和紧张刺激的挑战，一直深受玩家的喜爱。本文将详细阐述如何运用 HTML 和 JavaScript 来打造一个具有美观度的贪吃蛇游戏，并深入剖析其代码。

一、游戏介绍

贪吃蛇是一款广为人知的游戏。玩家的任务是通过方向键控制蛇的移动来吞食食物。随着蛇不断吃到食物，其身体会逐渐变长。然而，如果蛇头撞击到边界或者蛇身自身，游戏就会宣告结束。

二、效果图

三、代码分析

HTML 结构：
- 页面主要包含一个<canvas>元素，用于绘制游戏画面。此外，还有一个<div>元素，用于放置开始按钮和显示当前分数。
JavaScript 部分：
- SnakeGame类是游戏的核心所在。在构造函数中，初始化了游戏所需的各种属性，包括蛇的初始位置、移动方向、食物位置以及得分等。同时，还添加了事件监听器，分别用于响应开始按钮的点击和键盘按下事件。
- generateFood方法负责生成随机的食物位置，确保食物在画布范围内随机出现。
- draw方法承担着绘制游戏画面的重任，它会遍历蛇的身体部分进行绘制，包括蛇头、眼睛、嘴以及蛇身，同时还会绘制红色的食物方块。
- update方法用于更新游戏状态，包括移动蛇的位置、检查是否吃到食物以及判断是否发生碰撞。如果蛇头与食物位置重合，蛇会吃到食物，身体变长且得分增加；如果发生碰撞，游戏结束并进行重置。
- checkCollision方法主要检查蛇是否撞到边界或者自身身体。如果蛇头超出画布边界或者与蛇身其他部分重合，就会返回碰撞状态。
- handleKeyDown方法处理键盘按下事件，根据按下的方向键改变蛇的移动方向，但不能直接反向移动。
- startGame方法启动游戏，设置游戏运行标志为true，重置上次更新时间，并开始游戏循环。
- gameLoop方法是游戏的循环核心，它根据时间间隔更新游戏状态并绘制游戏画面，通过不断请求动画帧来保持游戏的持续运行。

四、代码实现

以下是用 HTML 和 JavaScript 实现的贪吃蛇游戏代码：

<!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;
            flex-direction: column;
            align-items: center;
            background-color: #e8e8e8;
            font-family: 'Open Sans', sans-serif;
        }

        #gameCanvas {
            border: 4px solid #2e86c1;
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(46, 134, 193, 0.4);
            margin: 40px auto;
        }

     .controls {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            width: 420px