TypeScript 项目实战：从零搭建贪吃蛇游戏环境

作者：构建工坊时间：2026-10-25 23:34:21浏览：205

本文详细讲解如何使用 TypeScript 结合 Webpack 搭建贪吃蛇游戏项目。内容涵盖基础环境初始化、Less 与 PostCSS 的配置流程，以及游戏界面 HTML 与样式的构建步骤，帮助开发者快速掌握前端工程化实战技巧。

前言：

经过前三天的学习，我们已经掌握了 TypeScript 的基本类型声明、编译过程以及 Webpack 的打包操作。这些基础内容已足够应对大部分场景，后续涉及的类、继承、构造函数、抽象类和泛型等进阶知识，若需详尽讲解篇幅较长，感兴趣的读者可自行查阅相关资料深入研习。

掌握代码或新语法的最佳途径莫过于通过实际项目来实践，在开发过程中体会如何正确调用及编写代码。

接下来，我们将直接进入今天的主题：贪吃蛇项目的初始化工作。

项目搭建，初始化：

回顾之前的配置，我们曾设置过一份 Webpack 配置文件，此处直接复用即可，不再赘述。此外，我们需要在项目中引入 Less 样式预处理器。

npm i -D less less-loader css-loader style-loader

所谓的“杠 loader”（如 less-loader），其作用是将特定的资源与 Webpack 进行整合处理。

安装完成后，我们需要进行配置。此前我们的文件仅处理了 TypeScript 代码，现在需要新增规则以处理 Less 文件，因此需在 rules 中添加一个新的规则对象。

{
    test:/\.less$/,
}

首先，使用 test 属性指定该规则生效的文件后缀名。

 {
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            }

接着，在 use 数组中配置 loader。需注意，use 的执行顺序是从下至上，因此这里配置顺序应为先执行 less-loader，最后执行 style-loader。

配置完成后，在 Less 文件中为 body 设置背景色，并在 TypeScript 代码中 import 引入该 Less 文件，最后在模板 index.html 中引用生成的 JS 文件。

打开 index.html 页面，若能看到背景色生效，则说明引入成功。

css的兼容性：

此前我们学习过利用 Babel 将 TypeScript 代码转换为其他版本以解决兼容性问题。对于 CSS，同样存在类似的工具，即 PostCSS。

npm i -D -S postcss postcss-loader postcss-preset-env

安装成功后进行配置。该 loader 需插入在 less-loader 和 css-loader 之间，因为我们需要在 Less 转换为 CSS 后，立即处理兼容性问题。

由于需要配置 PostCSS 的相关选项，因此这里是一个对象配置。

 {
                        loader:'postcss-loader',
                        options:{
                            postcssOptions:{
                                plugins:[
                                    "postcss-preset-env",
                                    {
                                        browsers:'last 3 versions'
                                    }
                                ]
                            }
                        },
                    },

loader 字段指定加载器为 postcss-loader。

options 字段用于详细配置，其中包含 postcssOptions。

plugins 字段指定 postcssOptions 要使用的插件，即 postcss-preset-env。

browsers 字段用于设置浏览器兼容范围，这里设置为 last 3 versions，意为兼容最新 3 个版本的浏览器。

项目初始化目录：

前言：

webpack.config.js 配置详情见文章末尾。

贪吃蛇，项目页面：

配置完成后，接下来开始构建项目页面。

首先启动开发服务器，执行命令 npm start。

启动成功后，我们将获得一个支持实时更新预览的 HTML 页面。

1，游戏主容器

第一步是构建游戏窗口，即贪吃蛇游戏的可视区域范围。

index.html 文件

 <div id="main"></div>

index.less 文件

@bg-color: #b7d4a8;

// 清楚默认
*{
    margin: 0;
    padding:0;
    // 改变盒子模型的计算方式
    box-sizing: border-box;
}
#main{
    width: 360px;
    height: 420px;
    background-color: @bg-color;
    margin: 100px auto;
    border: 10px solid black;
    border-radius: 10px;
}

2，贪吃蛇移动区域和菜单区域

主容器设置完毕后，开始编写贪吃蛇的移动区域和菜单区域。

index.html 文件

 <!-- 创建我们的游戏的主容器 -->
    <div id="main">
        <!-- 设置我们的游戏舞台 -->
        <div id="stage">
            
        </div>
        <!-- 设置我们游戏的记分牌 -->
        <div id="score_panel">
            <div id="score">
                SCORE:<span>0</span>
            </div>
            <div id="lecel">
                LECEL:<span>1</span>
            </div>
        </div>
    </div>

index.less 文件

// 设置
@bg-color: #b7d4a8;

// 清楚默认
body{
    font: bold 20px "Courier"
}
*{
    margin: 0;
    padding:0;
    // 改变盒子模型的计算方式
    box-sizing: border-box;
}
// 设置我们的主窗口
#main{
    width: 360px;
    height: 420px;
    background-color: @bg-color;
    margin: 100px auto;
    border: 10px solid black;
    border-radius: 10px;
    // 设置弹性盒
    display: flex;
    flex-flow:column;
    align-items: center;
    justify-content: space-around;
    #stage{
        width: 304px;
        height: 304px;
        border:2px solid black;
    }
    #score_panel{
        width: 300px;
        display: flex;
        justify-content:space-between; 
    }
}

3，蛇和食物

在游戏舞台中编写两个 div，分别代表蛇和食物。两者使用相同的 CSS 样式，但食物额外增加了 top 和 left 属性以定位。

 .snake>div{
            width: 10px;
            height: 10px;
            background-color: black;
            border: 1px solid @bg-color;
            position: absolute;
        };   
        #food{
            width: 10px;
            height: 10px;
            background-color: black;
            border: 1px solid @bg-color;
            position: absolute;
            top: 40px;
            left: 40px;
        }

至此，游戏页面部分已完成，以下是全部相关代码。

前言：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃蛇项目</title>
</head>
<body>
    <!-- 创建我们的游戏的主容器 -->
    <div id="main">
        <!-- 设置我们的游戏舞台 -->
        <div id="stage">
            <!-- 设置我们的蛇 -->
            <div id="#snake" class="snake">
                <!-- 蛇的各部分 -- 长度 -->
                <div></div>
            </div>
            <!-- 食物 -->
            <div id="food">

            </div>
        </div>
        <!-- 设置我们游戏的记分牌 -->
        <div id="score_panel">
            <div id="score">
                SCORE:<span>0</span>
            </div>
            <div id="lecel">
                LECEL:<span>1</span>
            </div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

Less代码：

// 设置
@bg-color: #b7d4a8;

// 清楚默认
body{
    font: bold 20px "Courier"
}
*{
    margin: 0;
    padding:0;
    // 改变盒子模型的计算方式
    box-sizing: border-box;
}
// 设置我们的主窗口
#main{
    width: 360px;
    height: 420px;
    background-color: @bg-color;
    margin: 100px auto;
    border: 10px solid black;
    border-radius: 10px;
    // 设置弹性盒
    display: flex;
    flex-flow:column;
    align-items: center;
    justify-content: space-around;
    #stage{
        width: 304px;
        height: 304px;
        border:2px solid black;
        position: relative;
        .snake>div{
            width: 10px;
            height: 10px;
            background-color: black;
            border: 1px solid @bg-color;
            position: absolute;
        };   
        #food{
            width: 10px;
            height: 10px;
            background-color: black;
            border: 1px solid @bg-color;
            position: absolute;
            top: 40px;
            left: 40px;
        }        
    }
    #score_panel{
        width: 300px;
        display: flex;
        justify-content:space-between; 
    }
}

tsconfig.json 配置

{
    "compilerOptions":{
        "module": "ES2015",
        "target": "ES2015",
        "strict": true,
        "noEmitOnError": true,
    }
}

webpack.config.js 配置

// 引入一个包
const path = require('path'); // 用户拼接路径
// 引入 html 插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入 clean 插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// webpack 中所有的配置信息都应该写到我们的 module.exports 里
module.exports = {
    "mode": 'development',
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在的目录
    output:{
        path:path.resolve(__dirname,'dist'),
        // 打包后文件的文件
        filename:"index.js"
    },
    // 指定webpack 打包时要使用的模块
    module:{
        // 指定加载的规则
        rules:[
            {
                // test 指定的是规则生效的文件
                test:/\.ts$/, // 所有以 ts 结尾的文件
                // use:'ts-loader',
                use:[
                    // 配置我们的 babel
                    {
                        //  指定我们的加载器
                        loader:"babel-loader",
                        // 配置我们的babel
                        options:{
                            // 设置预定的环境
                            presets:[
                                [
                                    // 指定我们的环境插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        targets:{
                                            "chrome":"88",
                                            "ie":"11" // 指定浏览器的一个版本
                                        },
                                        // 指定 corejs 版本
                                        "corejs":"3", // 用那个版本的 js
                                        // 使用 corejs 的方式
                                        "useBuiltIns":"usage", // usage 按需加载
                                    }
                                ]
                            ]
                        },
                    },
                    'ts-loader',
                ],
            },
            // 设置我们 less 文件的处理
            {
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    // postcss
                    {
                        loader:'postcss-loader',
                        options:{  // 详细配置
                            postcssOptions:{ // 指定 postcssOptions 要使用的一个插件  postcss-preset-env
                                plugins:[
                                    [
                                        "postcss-preset-env", 
                                        {
                                            browsers:'last 3 versions' // 浏览器信息，兼容三个全新版本的浏览器
                                        }                                        
                                    ]
                                ]
                            }
                        },
                    },
                    "less-loader",
                ]
            }
        ]
    },
    // 配置 webpack 插件
    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template:'./src/index.html',
        })
    ],
    // 用来设置引用模块
    resolve:{
        extensions:['.ts','.js'] // 以 .ts 和 .js 结尾的都可以当模块去引用
    }
}

到此这篇关于亲自教你TypeScript 项目搭建过程的文章就介绍到这了,更多相关TypeScript 项目搭建内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JavaScript插件版本冲突怎么解决？npm安装报错排查

2026-11-03 23:58:39

怎么指定版本下载 pdf.js 旧版资源

2026-11-03 20:56:02

NW.js 应用打包指南：使用 nw-builder 生成多平台安装包

2026-11-03 20:07:02

JS控制台打印样式美化：使用%c自定义日志颜色

2026-11-02 10:29:52

Vue3 + Vite 项目创建与配置指南

2026-11-01 04:02:02