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

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

2024-11-22 262
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本项目使用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
目录
相关文章
我不是游客20240119
|
算法 调度 UED
深入理解操作系统：进程调度与优先级队列
【10月更文挑战第31天】在计算机科学的广阔天地中，操作系统扮演着枢纽的角色，它不仅管理着硬件资源，还为应用程序提供了运行的环境。本文将深入浅出地探讨操作系统的核心概念之一——进程调度，以及如何通过优先级队列来优化资源分配。我们将从基础理论出发，逐步过渡到实际应用，最终以代码示例巩固知识点，旨在为读者揭开操作系统高效管理的神秘面纱。
我不是游客20240119
475 2
雨溪-yuxi
|
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
139 0
kaixin321-44007
|
人工智能 监控 安全
安全和鲁棒性
安全和鲁棒性
kaixin321-44007
345 0
HermanYe996
|
编解码 机器人 C++
ROS2教程07 ROS2自定义消息接口
这篇文章是关于如何在ROS2（Robot Operating System 2）中创建和使用自定义消息类型的教程，包括消息类型的定义、特点、命令行工具的使用，以及如何编写和测试自定义消息类型接口的步骤。
HermanYe996
845 0
ROS2教程07 ROS2自定义消息接口
AI之家
|
机器学习/深度学习 人工智能 搜索推荐
【人工智能】人工智能在医疗健康中的应用以及实际案例和进展概述
人工智能（Artificial Intelligence, AI）在医疗健康领域的应用日益广泛，为医疗服务的提升和健康管理带来了革命性的变化。以下是人工智能在医疗健康中的主要应用
AI之家
4049 1
Want595
|
vr&ar 开发者 C++
游戏开发丨基于Panda3D的迷宫小球游戏
游戏开发丨基于Panda3D的迷宫小球游戏
Want595
489 4
朝阳39
|
JavaScript 前端开发 API
vue 开发规范
vue 开发规范
朝阳39
187 0
WCGhost-Netsafe
|
负载均衡 监控 网络协议
高防服务器如何处理DDoS攻击？关于高防服务器的一些技术细节
DDoS攻击是网络威胁，通过大量请求淹没服务器。防御措施包括：备份网站以备切换，拦截异常HTTP请求，增加带宽抵御流量攻击，使用CDN分发内容并隐藏源IP。防御策略涉及流量清洗、黑洞路由、负载均衡等。硬件如防火墙、IDS/IPS也重要，云服务提供自动防护和弹性扩容。
WCGhost-Netsafe
466 3
郏国上
|
Web App开发 编解码 iOS开发
iOS字体像素与磅的对应关系
iOS字体像素与磅的对应关系
郏国上
1230 1
Damon小智
|
机器学习/深度学习 数据挖掘 Python
Anaconda的常用命令总结
Anaconda作为一个强大的Python发行版，具备一系列方便的命令行工具，用于管理环境、安装包等任务。本文总结了Anaconda的常用命令。这些命令的灵活使用有助于用户高效地管理Python环境，使Anaconda成为数据科学和开发领域的理想工具。Anaconda的安装简化了Python库和工具的管理，为数据科学家、工程师和研究人员提供了一个强大、集成且易于使用的开发环境。这为快速开始数据分析、科学计算和机器学习项目提供了便捷的途径。
Damon小智
758 0

热门文章

最新文章

  • 1
    2019阿里云双11来袭,价格非常重要,但是懂得上云攻略更重要
  • 2
    西门子S7-1200编程实例，上升沿/下降沿指令如何使用？
  • 3
    推荐一款数据同步工具：FlinkX
  • 4
    OpenSearch大模型实践之Havenask篇
  • 5
    Hyper-V增强会话模式
  • 6
    SpringCloud Gateway的使用 + Nacos动态路由
  • 7
    顺丰基于 Flink CDC + Hudi 推进实时业务落地
  • 8
    Kotlin集合框架分析
  • 9
    替换指定目录以及其子目录下的字符串
  • 10
    JavaScript与ActionScript3那些事
  • 1
    Python 的基本类型
    34
  • 2
    【01】百万级混音师-如何提取纯伴奏-依据官方最专业的文档说明-优雅草卓伊凡
    29
  • 3
    GraphRAG进阶：基于Neo4j与LlamaIndex的DRIFT搜索实现详解
    31
  • 4
    Kubernetes 调度策略深度拆解：我如何帮团队省下 90% 的资源成本
    37
  • 5
    以 SLI/SLO 为驱动的可观测性：从定义到告警策略 — 写给在值班室里泡过夜的你
    46
  • 6
    数据湖 vs 数据仓库 vs 数据湖仓一体：何时选哪种架构？——写给正在做数据平台的你
    40
  • 7
    《音频格式优化的底层逻辑：场景拆解与解码兼容的实践指南》
    34
  • 8
    《iOS相机/定位的精准适配指南》
    34
  • 9
    Gemini 3 Nano Banana 的MCP服务器开发设计和 国内直连方案
    60
  • 10
    数字人实践案例分享
    30

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云负载均衡收费标准：ALB、NLB和CLB价格，包括LCU费用、实例费和公网带宽价格