AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

用TS从零开始制作贪吃蛇游戏--1

2024-11-22 218
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本项目使用VSCode、Less、TypeScript及Webpack构建“贪吃蛇”游戏。首先初始化项目结构，创建Gluttonous snake文件夹并用VSCode打开，通过npm初始化package.json。接着配置Webpack，包括安装相关插件（如html-webpack-plugin、clean-webpack-plugin、webpack-dev-server）、设置TS编译环境及Less编译规则。最终实现自动打包、热更新及样式文件的正确处理。

​

本内容学习来自B站李立超老师 原文链接

本项目软件使用vscode,样式文件使用less,面对对象的TS,打包通过webpack进行制作

目录

初始化项目结构

1.新建项目文件夹 Gluttonous snake

2.通过vscode打开该文件夹

3.初始化package.json文件​编辑

4.进行webpack配置

1.配置html-webpack-plugin插件

2.配置webpack服务插件

2.配置TS编译插件

3.配置less编译

初始化项目结构

新建项目文件夹 Gluttonous snake
通过vscode打开该文件夹
 初始化package.json文件

点击终端-新建终端 打开命令行界面 

在命令行界面里输入npm init -y,初始化package.json文

进行webpack配置

     在命令行见面里输入 npm i webpack webpack-cli 回车进行安装包

安装成功后 如图

接下来进行配置webpack

新建webpack配置文件webpack.config.js如图
配置webpack的代码

     首先在根目录下新建src文件夹用来存放项目代码文件，在src文件夹里新建index.ts用来当作  webpack的入口文件，以及index.html文件。

    在webpack.config.js中写入如下内容

// 首先导入path模块
const exp = require('constants');
const path = require('path');

// 暴露内容
module.exports = {
// 打包模式 development 为开发模式 代码不会压缩 production 为部署模式 会压缩代码 默认为 production
mode:'development',

// 入口文件
entry:'./src/index.ts',

// 打包配置
output:{
// 打包后的文件存放路径 dirname 等于 当前项目的绝对路径
path:path.resolve(dirname,'dist') , // F:\GluttonousSnake\dist
// 打包后的js代码文件名
filename:'bundle.js'
}
}

现在基本的webpack配置已经好了，接下来在package.json添加webpack打包命令

​
{
"name": "gluttonoussnake",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"，
// 添加如下代码
"dev":"webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^5.75.0",
"webpack-cli": "^4.10.0"
}
}

​

3.启动webpack打包命令

在命令行界面输入 npm run dev 进行webpack打包命令，打包完成后会出现dist文件夹，该文件夹里包含了打包的文件，但现在有个问题，dist文件夹里只有bundle.js但没有html文件。接下来我们解决这个问题。
4.配置html-webpack-plugin插件

   首先进行安装，在命令行界面输入 npm i html-webpack-plugin，安装完成后在webpack.config.js文件里进行配置。

// 首先导入path模块
const path = require('path');
// 导入HTMLWebPackPlugin
const HTMLWebPackPlugin = require('html-webpack-plugin')

// 暴露内容
module.exports = {
// 打包模式 development 为开发模式 代码不会压缩 production 为部署模式 会压缩代码 默认为 production
mode:'development',

// 入口文件
entry:'./src/index.ts',

// 打包配置
output:{
// 打包后的文件存放路径 dirname 等于 当前项目的绝对路径
path:path.resolve(dirname,'dist') , // F:\GluttonousSnake\dist
// 打包后的js代码文件名
filename:'bundle.js'
},
// 配置webpack插件
plugins:[
new HTMLWebPackPlugin ({
// 网页文件标题
title:'GluttonousSnake',
// 网页文件模板
template:'./src/index.html'
})
]
}

配置完成后再输入打包命令 npm run dev ，就可以看到dist文件夹里有了html文件，并且自动引入了bundle.js文件。

接下来我们再安装一个插件CleanWebpackPlugin，该插件在我们每次打包时都会清空dist文件里的所有文件，以此来让我们每次打包文件都是相同的。

在命令行输入npm i clean-webpack-plugin,安装成功后进行配置

// 首先导入path模块
const path = require('path');
// 导入HTMLWebPackPlugin
const HTMLWebPackPlugin = require('html-webpack-plugin')
// 导入CleanWebpackPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 暴露内容
module.exports = {
// 打包模式 development 为开发模式 代码不会压缩 production 为部署模式 会压缩代码 默认为 production
mode: 'development',

// 入口文件
entry: './src/index.ts',

// 打包配置
output: {
clean: true,
// 打包后的文件存放路径 dirname 等于 当前项目的绝对路径
path: path.resolve(dirname, 'dist'), // F:\GluttonousSnake\dist
// 打包后的js代码文件名
filename: 'bundle.js'
},
// 配置webpack插件
plugins: [
// WebpackHtml模板插件
new HTMLWebPackPlugin({
// 网页文件标题
title: 'GluttonousSnake',
// 网页文件模板
template: './src/index.html'
}),
// 添加每次打包前清空dist文件夹插件
new CleanWebpackPlugin()
]
}

接下来我们每次打包前都会先清空dist文件夹里的所有文件才会再生成打包文件

接下来我们再安装一个webpack服务插件,现在我们每次编写完代码都需要手动进行webpack打包,非常不方便,接下来我们解决这个问题
5.配置webpack服务插件

    首先安装webpack-dev-server插件，在命令行输入npm i webpack-dev-server,安装完成后进行配置。在package.json添加命令

{
"name": "gluttonoussnake",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack",
// 添加如下命令
"server": "webpack server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"clean-webpack-plugin": "^4.0.0",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.75.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}

随后在命令行输入npm run server 等待命令执行完成后，出现一个网址，按ctrl+鼠标左键即可跳转到该网址界面

随后在index.ts随便写点东西,保存后都会自动打包编译。

但还有一个问题，我们不能书写TS代码，一旦书写就会打包错误

这是因为我们没有配置TS的编译器，接下来我们进行配置
6.配置TS编译插件

    首先安装typescript,ts-loader这两个包，安装完成后再webpack.config.js文件中进行配置。

// 首先导入path模块
const path = require('path');
// 导入HTMLWebPackPlugin
const HTMLWebPackPlugin = require('html-webpack-plugin')
// 导入CleanWebpackPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 暴露内容
module.exports = {
// 打包模式 development 为开发模式 代码不会压缩 production 为部署模式 会压缩代码 默认为 production
mode: 'development',

// 入口文件
entry: './src/index.ts',

// 打包配置
output: {
clean: true,
// 打包后的文件存放路径 dirname 等于 当前项目的绝对路径
path: path.resolve(dirname, 'dist'), // F:\GluttonousSnake\dist
// 打包后的js代码文件名
filename: 'bundle.js'
},
// 配置webpack插件
plugins: [
new HTMLWebPackPlugin({
// 网页文件标题
title: 'GluttonousSnake',
// 网页文件模板
template: './src/index.html'
}),
new CleanWebpackPlugin()
],
// 配置编译
module:{
// 编译规则
rules: [
{
// 编译以ts结尾的文件
test:/.ts$/,
// 使用该编译器编译TS文件
use:'ts-loader',
// 排除文件
exclude: /node_modules/
}
]
}
}

配置好后在根目录下新建tsconfig.jsonTS配置文件，写入以下内容。

{
"compilerOptions": {
// 模块版本
"module": "ES2015",
// 目标版本
"target": "ES2015",
// 是否开启严格模式
"strict": true,
}
}

以上都配置好后，运行npm run server命令。接下来在index.TS里就可以书写TS代码了也不会报错了。

但发现TS代码书写是没问题了，但是一但导入一个TS模块的话就会报错。

解决这个问题只需要在webpack.config.js文件中加入以下代码。

// 首先导入path模块
const path = require('path');
// 导入HTMLWebPackPlugin
const HTMLWebPackPlugin = require('html-webpack-plugin')
// 导入CleanWebpackPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 暴露内容
module.exports = {
// 打包模式 development 为开发模式 代码不会压缩 production 为部署模式 会压缩代码 默认为 production
mode: 'development',

// 入口文件
entry: './src/index.ts',

// 打包配置
output: {
clean: true,
// 打包后的文件存放路径 dirname 等于 当前项目的绝对路径
path: path.resolve(dirname, 'dist'), // F:\GluttonousSnake\dist
// 打包后的js代码文件名
filename: 'bundle.js'
},
// 配置webpack插件
plugins: [
new HTMLWebPackPlugin({
// 网页文件标题
title: 'GluttonousSnake',
// 网页文件模板
template: './src/index.html'
}),
new CleanWebpackPlugin()
],
// 配置编译
module: {
// 编译规则
rules: [
{
// 编译以ts结尾的文件
test: /.ts$/,
// 使用该编译器编译TS文件
use: 'ts-loader',
// 排除文件
exclude: /node_modules/
}
]
},

// 解析模块
resolve: {
// 解析js和ts文件的模块
extensions: ['.js', '.ts']
}
}

重新运行npm run server命令即可看到引入模块不会报错了。

最后我们配置一下less文件的编译。
7.配置less编译

    运行npm i less less-loader css-loader style-loader,安装完成在webpack.config.js配置如下

// 首先导入path模块
const path = require('path');
// 导入HTMLWebPackPlugin
const HTMLWebPackPlugin = require('html-webpack-plugin')
// 导入CleanWebpackPlugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 暴露内容
module.exports = {
// 打包模式 development 为开发模式 代码不会压缩 production 为部署模式 会压缩代码 默认为 production
mode: 'development',

// 入口文件
entry: './src/index.ts',

// 打包配置
output: {
clean: true,
// 打包后的文件存放路径 dirname 等于 当前项目的绝对路径
path: path.resolve(dirname, 'dist'), // F:\GluttonousSnake\dist
// 打包后的js代码文件名
filename: 'bundle.js'
},
// 配置webpack插件
plugins: [
new HTMLWebPackPlugin({
// 网页文件标题
title: 'GluttonousSnake',
// 网页文件模板
template: './src/index.html'
}),
new CleanWebpackPlugin()
],
// 配置编译
module: {
// 编译规则
rules: [
{
// 编译以ts结尾的文件
test: /.ts$/,
// 使用该编译器编译TS文件
use: 'ts-loader',
// 排除文件
exclude: /node_modules/
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
},

// 解析模块
resolve: {
// 解析js和ts文件的模块
extensions: ['.js', '.ts']
}
}

接下来在index.ts中引入

import './index.less'

配置好后再运行命令就可以看到less样式已经成功导入到网页中

到这里一个基本的TS项目已经配置好了，一些别的功能等要用的时候在进行配置。
​

文章标签：
云解析DNS
JavaScript
编译器
雨溪-yuxi
目录
相关文章
东风微鸣技术博客
|
Kubernetes 网络协议 Linux
Cilium 系列 -7-Cilium 的 NodePort 实现从 SNAT 改为 DSR
Cilium 系列 -7-Cilium 的 NodePort 实现从 SNAT 改为 DSR
东风微鸣技术博客
292 0
雨溪-yuxi
|
10月前
|
JavaScript 前端开发 C++
关于Vue2里 v-for和v-if一起用的时候会出现的问题
在 Vue 2 中，`v-for` 和 `v-if` 一起使用时可能会出现一些不可预料的问题，因为 `v-for` 的优先级高于 `v-if`，导致 `v-if` 会在每次循环中都执行。这可能导致条件渲染的文本多次显示。本文通过一个具体案例详细解析了这一问题，并提供了两种解决方案：1. 在 `del` 方法中处理逻辑，当 `list.length` 小于等于 2 时清空列表；2. 将 `v-else` 改为 `v-if="list.length === 2"`，避免多次渲染。最后，作者建议在 2024 年使用 Vue 3，因为它已经修复了这些问题并提升了性能。
雨溪-yuxi
125 0
雨溪-yuxi
|
10月前
|
前端开发
防抖和节流的区别，实现和用处。
防抖和节流是优化高频事件处理的两种技术。防抖确保在一系列连续事件后仅执行最后一次操作，如搜索输入完成后再发送请求；节流则保证在设定时间内仅执行一次操作，适用于滚动加载等场景。两者通过限制回调函数的执行频率，有效提升前端性能。示例代码展示了如何实现这两种技术。
雨溪-yuxi
316 2
雨溪-yuxi
|
10月前
|
移动开发 前端开发 JavaScript
前端H5使用canvas画爱心以及笑脸
本文介绍了HTML5中的canvas元素及其基本用法，通过JavaScript在canvas上绘制图形。首先简述了canvas的功能，接着详细展示了如何使用`bezierCurveTo`方法绘制爱心和`arc`方法绘制笑脸，并附有示例代码及效果说明。最后总结了canvas在网页图形绘制上的应用潜力。
雨溪-yuxi
286 2
雨溪-yuxi
|
10月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中，`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中，`bind`返回一个新函数，不立即执行；`call`和`apply`则立即执行，且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似，但在执行时机和参数传递方式上有所区别。
雨溪-yuxi
162 1
雨溪-yuxi
|
10月前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画，通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值，可以精细控制过渡效果。文末提供了HTML示例代码，展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
雨溪-yuxi
454 1
雨溪-yuxi
|
10月前
|
JavaScript 前端开发
vue2的响应式数据原理
`Object.defineProperty` 是 Vue 2 实现响应式数据的核心方法，通过定义 getter 和 setter 来追踪属性的变化。当访问或修改属性时，会触发相应的函数，从而实现数据的动态更新。本文介绍了该方法的基本用法、响应式原理及其简单实现，展示了如何通过监听属性变化来自动更新视图，体现了前端框架设计中的巧妙之处。
雨溪-yuxi
212 1
LucianaiB
|
10月前
|
存储 算法 C语言
【趣学C语言和数据结构100例】26-30
本文精选五个编程问题，涵盖递归、数字处理、字符串操作、组合数学和数论等领域，通过C语言实现，旨在提升编程能力和算法理解。包括递归逆序打印字符、正整数位数及逆序打印、回文数判断、0-7组成奇数个数计算及偶数分解为两素数之和。
LucianaiB
97 4
【趣学C语言和数据结构100例】26-30
雨溪-yuxi
|
10月前
|
JavaScript
使用node.js搭建一个express后端服务器
Express 是 Node.js 的一个库，用于搭建后端服务器。本文将指导你从零开始构建一个简易的 Express 服务器，包括项目初始化、代码编写、服务启动与项目结构优化。通过创建 handler 和 router 文件夹分离路由和处理逻辑，使项目更清晰易维护。最后，通过 Postman 测试确保服务正常运行。
雨溪-yuxi
634 1
爱吃香蕉的猫
|
10月前
|
C语言
数据流与缓冲区
数据流 就C程序而言，从程序移进，移出字节，这种字节流就叫做流。程序与数据的交互是以流的形式进行的。进行C语言文件的读写时，都会先进行“打开文件”操作，这个操作就是在打开数据流，而“关闭文件”操作就是关闭数据流。 缓冲区 在程序执行时，所提供的额外内存，可用来暂时存放准备执行的数据。它的设置是为了提高存取效率，因为内存的存取速度比磁盘驱动器快得多。 当使用标准I/O函数(包含在头文件stdio.h中)时，系统会自动设置缓冲区，并通过数据流来读写文件。当进行文件读取时，是先打开数据流，将磁盘上的文件信息拷贝到缓冲区内，然后程序再从缓冲区中读取所需数据。事实
爱吃香蕉的猫
92 4

热门文章

最新文章

  • 1
    CentOs7 安装 Mysql5.7
  • 2
    B站被删除的视频，该如何找回来？
  • 3
    轻量应用服务器支持带宽套餐升级至流量包套餐流程说明
  • 4
    react map使用方法详解
  • 5
    RIP&OSPF重分布例子（路由过渡）
  • 6
    NetApp提高收入预期 或将惠及EMC
  • 7
    第四季度数据中心网络设备销量达35亿美元
  • 8
    USB及手机平板设备插拔响应解决方案
  • 9
    如何为你的大脑提速
  • 10
    ASP.Net HttpHandler （转）
  • 1
    《用AI重构工业设备故障预警系统：从“被动维修”到“主动预判”的协作实践》
    29
  • 2
    《从0到1搭建客户画像系统：AI工具矩阵如何解决开发困局》
    26
  • 3
    快应用报错Module Error 分包要求 app.json#minPlatformVersion 不小于 1061, 当前值为 21解决方案-优雅草卓伊凡
    19
  • 4
    快应用打包rpk同时生成了rpk和rpks是为什么？怎么用？-优雅草卓伊凡
    16
  • 5
    Parameter ‘**‘ not found. Available parameters are [0, 1, param1, param2]解决办法
    15
  • 6
    【多光谱滤波器阵列设计的最优球体填充】使用MSFA设计方法进行各种重建算法时，图像质量可以提高至多2 dB，并在光谱相似性方面实现了显著提升（Matlab代码实现）
    19
  • 7
    【高创新】基于优化的自适应差分导纳算法的改进最大功率点跟踪研究（Matlab代码实现）
    30
  • 8
    机器会“看病”？深度学习正在颠覆医学成像！
    23
  • 9
    金融系统宕机一分钟，损失就是百万？聊聊智能化运维该怎么玩！
    29
  • 10
    【概率Copula分类器】实现d维阿基米德Copula相关的函数、HACs相关的函数研究（Matlab代码实现）
    15

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    2025云栖大会，阿里云百炼邀请您的参与和见证