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

已于 2022-11-12 20:31:12 修改
阅读量1.2k 收藏 4
点赞数 2
分类专栏： TS贪吃蛇 文章标签： css html5 less npm javascript
于 2022-11-10 14:31:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57301042/article/details/127786321
版权

本内容学习来自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编译

初始化项目结构

  1. 新建项目文件夹 Gluttonous snake

  2. 通过vscode打开该文件夹

  3.  初始化package.json文件

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

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

  进行webpack配置

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

        

安装成功后 如图

 接下来进行配置webpack

  1. 新建webpack配置文件webpack.config.js如图
  2. 配置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项目已经配置好了，一些别的功能等要用的时候在进行配置。

瑞雨溪
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vscode--c语言实现的贪吃蛇
05-10
简单的贪吃蛇实现，c语言编写，黑框实现，工具vscode。代码简单，框架也是使用的最简单数据类型，方便C语言初学者学习，作为初学小项目。
贪吃蛇python游戏
ClintonCSDN的博客
09-25 1091
python版贪吃蛇snake1.4.5
TypeScript实战：下棋游戏，成体系化的神级前端进阶笔记,
最新发布
MC098的博客
04-02 783
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
用c语言写贪吃蛇（简易）（适用初学者）(保姆级)
热门推荐
Lu_shen_的博客
03-30 2万+
用c语言写带出贪吃蛇的代码，你上你也行！！
vs2022贪吃蛇全代码（留着自己纪念的）
m0_74100572的博客
01-07 1163
大一期末课设作业，自己留在CSDN上面保存一下
cocos（ts）游戏开发入门、一 （接苹果）
boyxgb的专栏
07-22 1937
一开始用godot，因为这个开发工具安装文件不大，而且运行速度也比较快，使用的dg脚本也比较接近python，可惜生成h5端还是比较多问题，之后考虑了layaair，由于它比较新，相对教程源码还是比较少，不太适合新手学习，最后选择了cocos，开发完之后可以直接发链接给朋友，不管电脑手机平板，只要能浏览网页就可以直接玩开发的游戏了。运行时候自动打开浏览器，鼠标点一下游戏，确定游戏焦点之后，就可以开始操作，这个时候就可以发现篮子可以通过左右键来控制了。可以通过图片边沿的8个点，用鼠标来拉伸。
ETSI TS 102 936-1.pdf
02-26
ETSI TS 102 936-1 for eCall Network Access Device (NAD) conformance specification Part 1- Protocol test specification
fp-ts-remote-data：fp-ts的远程数据类型
02-15
RemoteData类型 安装 NPM： npm i fp-ts-remote-data 纱线： yarn add fp-ts-remote-data 对等依赖 图书馆 版本 p ^2.9.0 文献资料 上的文档
3GPP TS 36.521-1-f12.zip
11-21
3GPP TS 36.521-1,LTE CA规定，在原来LTE基础上，对LTE CA的设定做了严格详实的规定，对测试项目和规范也有详细说明。
LCD.rar_TS1602-1_文字LCD
09-23
TS1602 LCD 显示的例子,包括,LCD的初始化,显示一行文字,清屏
ts-do:喜欢使用fp-ts的打字稿符号
05-02
只要在fp-ts中定义了它的种类，就可以将其与任何monad一起使用。 安装 要安装稳定版本： yarn add ts-do 使用扩展名 首先导入扩展名： import { some , map , option } from "fp-ts/lib/Option" import { pipe } ...
snake代码解析
www.jiav.net技术网站的加盟博客
08-13 353
snake代码解析 1.先运行SnakeView(Context context, AttributeSet attrs)->initSnakeView() 在initSnakeView()中resetTiles(4)设置图片的种类Bitmap[4]，loadTile(int key, Drawable tile) 为Bitmap[4]-》mTileArray[key] 赋值，其中RED_...
使用Ts编写一个贪吃蛇小游戏（完结版）
关于光在阳光下被反射的博客
05-29 998
ts编写贪吃蛇内部逻辑 这个小游戏主要包括积分面板，食物，蛇，还有我们的游戏控制器这四个部分，分为四个类来写。 创建一个食物的类（详解在代码注释）： // 定义一个食物的类 class Food{ // 属性 element:HTMLElement; constructor(){ this.element=document.getElementById("food")!; } // 定义获取食物的x轴坐标 get X(){ r
Node.js学习笔记III ---Express基本使用
qq_43057018的博客
05-12 3780
Express的作用和Node.js内置的http模块类似，是专门用来创建Web服务器的。
TS项目（贪吃蛇）
weixin_50236973的博客
09-06 397
TS项目（贪吃蛇）
游戏开发框架之数量级管理（TS脚本）
大猪的博客
08-16 1545
在游戏开发中，为了让用户有更好的体验和数值上的爽感或者策划hold不住数值，经常可能会使用到较大的数量级，大到系统的int或float类型都存储不下这样大的数值，比如：100万亿
用TS从零开始制作贪吃蛇游戏--2
m0_57301042的博客
11-12 818
用TS从零开始制作贪吃蛇游戏--2
[Small Game]Gluttonous Snake-V1.0
BIT_ACM_成长
01-26 829
今天写了人生第一条蛇——贪吃蛇的V1.0版本。         来分享下吧。            下面先贴代码。 #include #include #include #include /*====================================================================================================
QT-贪吃蛇
qq_43218657的博客
09-08 376
贪吃蛇（gluttonous snake） 基本要求： 完成贪吃蛇游戏，使得游戏具有可玩性，对用户友好的交互性。通过配色与背景的搭配，以及音效的结合，形成游戏的完整要素，体现QT学习的阶段性结果。 玩法介绍： 点击开始进入游戏界面。最初的模式很简单，随着你吃的食物量的增加，它会逐渐变成困难模式，然后继续魔鬼模式。区别在于不同的模式，食物刷新的频率和蛇的速度是不同的，在游戏进行到一半时，如果你想停...
nuxt3 ts 如何使用vue3-seamless-scroll
04-27
要在 Nuxt3 中使用 Vue3-seamless-scroll，你需要执行以下步骤： 1. 首先，你需要在项目中安装 Vue3-seamless-scroll： ``` npm install vue3-seamless-scroll --save ``` 2. 在你的 Nuxt3 项目中创建一个新的 Vue 文件，例如 `MyScroll.vue`。 3. 在 `MyScroll.vue` 文件中，导入 Vue3-seamless-scroll 组件： ```javascript import { Scroll } from 'vue3-seamless-scroll' ``` 4. 在 `MyScroll.vue` 文件中，定义一个新的组件，使用导入的 Scroll 组件： ```javascript <template> <scroll> <!-- 内容区域 --> </scroll> </template> <script> export default { components: { Scroll, }, } </script> ``` 5. 在你的 Nuxt3 项目中使用 `MyScroll` 组件，例如： ```html <template> <div> <my-scroll> <!-- 内容区域 --> </my-scroll> </div> </template> <script> import MyScroll from '~/components/MyScroll.vue' export default { components: { MyScroll, }, } </script> ``` 这样，你就可以在 Nuxt3 中使用 Vue3-seamless-scroll 组件了。当然，在使用过程中，你还需要根据具体的需求进行配置和调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

瑞雨溪

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

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

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

打赏作者

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

抵扣说明：

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

余额充值