当前位置：首页 > news >正文

TypeScript 学习笔记第三部分贪吃蛇游戏

news 2026/2/10 17:45:51

尚硅谷TypeScript教程（李立超老师TS新课）

1. 创建开发环境

创建工程，使用学习笔记的第二部分
安装css部分

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

对css部分处理，能够运行在低版本浏览器

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

修改webpack.config.json文件

// 设置less文件的处理{test: /\.less$/,use: ["style-loader","css-loader",{loader: "postcss-loader",options: {postcssOptions:{plugins: [["postcss-preset-env",{browsers:"last 2 versions"}]]}}},"less-loader"]}

2. 工程目录结构

在这里插入图片描述

3. 代码部分

index.js

import './style/index.less'import GameControl from "./modules/GameControl";new GameControl()

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>贪吃蛇</title>
</head>
<body>
<div id="main" ><div id="stage"><div id="snake"><div></div></div><div id="food"><div></div><div></div><div></div><div></div></div></div><div id="score-panel"><div>SCORE:<span id="score">0</span></div><div>LEVEL: <span id="level">1</span></div></div>
</div>
</body>
</html>

/style/index.less

// 设置变量
@bg-color:#b7d4a8;*{margin: 0;padding: 0;caret-color: transparent;// 改变盒子模型的计算方式box-sizing: border-box;
}
body{font: bold 20px "Courier";}#main{width: 360px;height: 420px;background-color: @bg-color;margin: 100px auto;border: 10px solid black;border-radius: 40px;//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: #000;border:1px solid @bg-color;// 开启绝对定位position: absolute;}}#food{width: 10px;height: 10px;border:1px solid @bg-color;// 开启绝对定位position: absolute;display: flex;flex-wrap: wrap;align-content: space-between;justify-content: space-between;&>div{width: 4px;height: 4px;background-color: black;transform: rotate(45deg);}}}#score-panel{width: 300px;display: flex;justify-content: space-between;}
}

/modules/snake.ts

export default class Snake{// 蛇头head:HTMLElement// 蛇身体，包括蛇头bodies:HTMLCollection// 蛇的父容器element:HTMLElementconstructor() {this.element = document.getElementById("snake")!this.bodies = this.element.childrenthis.head = this.element.firstElementChild as HTMLElement}// 蛇头的坐标get X(){return this.head.offsetLeft}get Y(){return this.head.offsetTop}// 设置蛇头的坐标set X(value){//  当蛇的第二节与蛇头的x轴坐标重合，说明发生了水平方向的掉头if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value) {if(value > this.X){value =  this.X - 10}else{value  =  this.X + 10}}this.moveBody()// 设置蛇头坐标this.head.style.left = value + 'px'}set Y(value){// 当蛇的第二节与蛇头的Y轴坐标重合，发生了垂直方向的掉头if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value){if(value > this.Y){value =  this.Y - 10}else{value  =  this.Y + 10}}this.moveBody()this.head.style.top = value + 'px'}// 蛇增加身体addBody(){this.element.insertAdjacentHTML("beforeend","<div></div>")}// 蛇的移动，从最后一个元素开始，修改坐标为前一个元素moveBody(){for (let i = this.bodies.length - 1; i > 0; i--) {let x = (this.bodies[i-1] as HTMLElement ).offsetLeft;let y = (this.bodies[i-1] as HTMLElement ).offsetTop;(this.bodies[i] as HTMLElement).style.left = x +'px';(this.bodies[i] as HTMLElement).style.top = y +'px';}}checkHandBody():boolean{for (let i = 1; i < this.bodies.length; i++) {if (this.X === (this.bodies[i] as HTMLElement).offsetLeft &&this.Y === (this.bodies[i] as HTMLElement).offsetTop){return false}}return true}
}

/modules/ScorePanel.ts

export default class ScorePanel{score = 0level = 1scoreElement : HTMLElementlevelElement : HTMLElementmaxLevel : numberupScore : numberconstructor(maxLevel = 10,upScore = 10) {this.scoreElement = document.getElementById('score')!this.levelElement = document.getElementById('level')!this.maxLevel = maxLevel // 最大等级this.upScore = upScore // 多少分升一级}// 增加积分，每吃一个食物增加1分，在此处设置等级的增加addScore(){this.score ++this.scoreElement.innerText = this.score.toString()if (this.score % this.upScore === 0){this.addLevel()}}// 增加等级addLevel(){if ( ++this.level <= this.maxLevel) {this.levelElement.innerText = this.level.toString()}}
}// const a = new ScorePanel()
// for (let i = 0; i < 200; i++) {
//     a.addScore()
// }

/modules/Gamecontrol.ts

import Snake from "./snake";
import Food from "./Food";
import ScorePanel from "./ScorePanel";export default class GameControl {snake: Snakefood: FoodscorePanel: ScorePaneldircter = '' // 保存按键的值constructor() {this.snake = new Snake()this.food = new Food()this.scorePanel = new ScorePanel()this.init()}// 初始化操作，监听按键事件init() {// 第二个参数如果不写bind(this),那调用的函数中的this就是document，而不是类的实例化对象document.addEventListener("keydown", this.keydownHandler.bind(this))this.run()}// 按键的回调函数keydownHandler(event: KeyboardEvent) {this.dircter = event.key}run() {// 蛇头的原坐标let x = this.snake.Xlet y = this.snake.Y// 按下按键后，4个方向中某一个方向的坐标需要修改switch (this.dircter) {case 'ArrowUp':case 'Up':y = y - 10break;case 'ArrowDown':case 'Down':y = y + 10breakcase 'ArrowLeft':case 'Left':x = x - 10breakcase 'ArrowRight':case 'Right':x = x + 10break}// 蛇头下一步是不是撞墙了if (x < 0 || x > 290 || y < 0 || y > 290) {alert("蛇撞墙了")return// 检测蛇头是否撞到自己} else if (!this.snake.checkHandBody()) {alert('你咬到自己尾巴了')return} else {this.eachFood()// 同一时间只可能有一个轴的位置发生改变if (this.snake.Y === y) {this.snake.X = x}else if (this.snake.X === x) {this.snake.Y = y}// 开启定时器，随着等级的升高，蛇的移动速度越来越快let time = this.scorePanel.level * 50setTimeout(this.run.bind(this), 250 - time)}}// 检测蛇是否吃到食物，吃到食物后：新增食物，增加积分，增加蛇的身体eachFood() {if (this.snake.X === this.food.X && this.snake.Y === this.food.Y) {this.food.change()this.scorePanel.addScore()this.snake.addBody()}}}

/modules/Food.ts

class Food{element:HTMLElementconstructor() {this.element = document.getElementById('food')!this.change()}// 获取食物坐标get X(){return this.element.offsetLeft}get Y(){return this.element.offsetTop}// 设置食物坐标set X(value ){this.element.style.left = value + 'px'}set Y(value){this.element.style.top = value + 'px'}// 随机在地图上新增食物change(){let top = Math.round(Math.random()*29) *10let left = Math.round(Math.random()*29) *10this.X = leftthis.Y = top}
}export default Food// const a = new Food()
// console.log(a.X,a.Y);
// a.change()
// console.log(a.X,a.Y);

4. 配置文件

package.json

{"name": "part2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","start": "webpack serve --open"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@babel/core": "^7.23.3","@babel/preset-env": "^7.23.3","babel-loader": "^9.1.3","clean-webpack-plugin": "^4.0.0","core-js": "^3.33.3","css-loader": "^6.8.1","html-webpack-plugin": "^5.5.3","less": "^4.2.0","less-loader": "^11.1.3","postcss": "^8.4.31","postcss-loader": "^7.3.3","postcss-preset-env": "^9.3.0","style-loader": "^3.3.3","ts-loader": "^9.5.1","typescript": "^5.3.2","webpack": "^5.89.0","webpack-cli": "^5.1.4","webpack-dev-server": "^4.15.1"}
}

tsconfig.json

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

webpack.config.js

// 引入一个包
const path = require('path')
const HTMlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack中的所有的配置信息都应该写在moudle.exports中
module.exports = {// 当前为开发模式mode: 'development',// 指定入口文件entry: "./src/index.ts",// 打包文件的设置项output: {// 打包后文件的目录path: path.resolve(__dirname,'dist'),//  打包后文件的名字filename: "bundle.js",// 打包后文件不使用箭头函数,不使用constenvironment: {arrowFunction: false,const:false},},// 指定webpack打包时要使用的模块module: {// 指定要加载的规则rules: [{// test指定的是规则生效的文件test: /\.ts$/,// 要使用的loaderuse: [// 将新版本的js转换为旧版本的js，提高代码的兼容性{// 指定加载器loader:'babel-loader',// 设置上面这个加载器的配置项options: {// 设置预定义的环境（代码要在那些浏览器中运行）presets: [['@babel/preset-env',{// 要兼容的目标浏览器targets:{// 'chrome':'88','ie':'10'},// 指定corejs的版本'corejs':'3',// 使用corejs的方式：usage 按需加载'useBuiltIns':'usage'}]]}},'ts-loader', // 将ts转换为js],// 要排除的文件exclude: /node_moudles/},// 设置less文件的处理{test: /\.less$/,use: ["style-loader","css-loader",{loader: "postcss-loader",options: {postcssOptions:{plugins: [["postcss-preset-env",{browsers:"last 2 versions"}]]}}},"less-loader"]}]},// 插件plugins: [// 自动生成html文件，并且引入相关资源new HTMlWebpackPlugin({// 自动生成的网页以路径中的网页为模板template: "./src/index.html"}),// 自动清除上次编译后的文件new CleanWebpackPlugin(),],// 设置那些文件可以作为模块可以被引用resolve: {extensions: ['.ts','.js']}
}

TypeScript 学习笔记第三部分贪吃蛇游戏

尚硅谷TypeScript教程（李立超老师TS新课） 1. 创建开发环境创建工程，使用学习笔记的第二部分安装css部分 npm i -D less less-loader css-loader style-loader对css部分处理，能够运行在低版本浏览器 npm i -D postcss postcss…...

编程日记 2023/11/24 11:56:28

【spring（一）】核心容器总结

🌈键盘敲烂，年薪30万🌈 目录 IOC 配置bean对象： DI 注入bean对象 ①.setter方法注入 ②.构造器注入 Bean的实例化 1.setter方法注入(重点) 2.静态工厂（了解） 3.实例工厂（了解&#xff0…...

编程日记 2023/11/24 11:55:26

易点易动固定资产管理系统：实现全面的固定资产采购管理

在现代企业中，固定资产采购管理是一项关键的任务。为了确保企业的正常运营和发展，有效管理和控制固定资产采购过程至关重要。易点易动固定资产管理系统为企业提供了一种全面的解决方案，整合了从采购需求、采购计划、询比价、采购合同到采购执…...

编程日记 2023/11/24 11:54:26

力扣：178. 分数排名（Python3）

题目： 表: Scores ---------------------- | Column Name | Type | ---------------------- | id | int | | score | decimal | ---------------------- 在 SQL 中，id 是该表的主键。该表的每一行都包含了一场比赛的分数。Score …...

编程日记 2023/11/24 11:53:25

raid磁盘阵列

在单机时代，采用单块磁盘进行数据存储和读写的方式，由于寻址和读写的时间消耗，导致I/O性能非常低，且存储容量还会受到限制。另外，单块磁盘极其容易出现物理故障，经常导致数据的丢失。此时，RAID技…...

编程日记 2023/11/24 11:52:23

SpringBoot学习笔记-实现微服务：匹配系统（上）

笔记内容转载自 AcWing 的 SpringBoot 框架课讲义，课程链接：AcWing SpringBoot 框架课。 CONTENTS 1. 配置WebSocket2. 前后端WebSocket通信2.1 WS通信的建立2.2 加入JWT验证 3. 前后端匹配业务3.1 实现前端页面3.2 实现前后端交互逻辑3.3 同步游戏地图 …...

编程日记 2023/11/24 11:49:20

重磅！全球首个“绿色黑灯工厂”落户中国，竟然是这家企业……

作者：叶蓁 “52”、“白加黑”、“无人看守作业”，这是九牧“绿色黑灯工厂”的几大关键词。九牧绿色黑灯工厂不仅是单体产量最大的工厂，也是全球首个入选的“绿色黑灯工厂”。 11月17日，中国节能协会授予九牧5G智能马桶工厂全球…...

编程日记 2023/11/24 11:48:19

go语言学习-异常处理

1、异常场景网络故障硬件故障组件故障输入错误逻辑错误链路调度错误 2、异常处理方式 # python或者java异常处理 try 可能出现的错误 catch对错误进行处理 xxx,err : 代码 if err ! nil {代码出现错误，需要做处理 }3、自定义错误有两种方法：1、通过…...

编程日记 2023/11/24 11:47:19

如何使用 JavaScript 实现图片上传并转换为 LaTeX 公式

在本教程中，我们将学习如何使用 JavaScript 创建一个上传图片的功能，并将所选图片转换为 LaTeX 公式。我们将使用 FileReader 对象来读取图片并将其转换为 Base64 格式，然后利用 img2latex API 将其转换为 LaTeX 公式。 1. HTML 结构首先&…...

编程日记 2023/11/24 11:46:17

深刻理解MySQL8游标处理中not found

深刻理解MySQL8游标处理中not found 最近使用MySQL的游标，在fetch循环过程中，程序总是提前退出 ，百思不得其解，经过测试，原来是对于游标处理中not found的定义理解有误，默认是视同Oracle的游标not found定…...

编程日记 2023/11/24 11:45:16

甄知燕千云与SAP、EBS、TC、NS等应用深度集成，智能提单一键畅通，效能一键提升

当今全球化时代下，全球商业环境面临前所未有的机遇和挑战，企业需要持续的业务变革、组织优化来进行降本增效，企业管理软件已成为中小企业、大型企业数字化转型不可或缺的管理工具，企业内管理软件系统也越来越多。为了适应当前企业…...

编程日记 2023/11/24 11:44:15

第99步深度学习图像目标检测：SSDlite建模

基于WIN10的64位系统演示一、写在前面本期，我们继续学习深度学习图像目标检测系列，SSD（Single Shot MultiBox Detector）模型的后续版本，SSDlite模型。二、SSDlite简介 SSDLite 是 SSD 模型的一个变种&#xff0c…...

编程日记 2023/11/24 11:43:14

用EasyAVFilter将网络文件或者本地文件推送RTMP出去的时候发现CPU占用好高，用的也是vcodec copy呀，什么原因？

最近同事在用EasyAVFilter集成在EasyDarwin中做视频拉流转推RTMP流的功能的时候，发现怎么做CPU占用都会很高，但是视频没有调用转码，vcodec用的就是copy，这是什么原因呢？ 我们用在线的RTSP流就不会出现这种情况&#x…...

编程日记 2023/11/24 11:42:13

Vatee万腾科技的独特力量：Vatee数字时代创新的新视野

在数字化时代的浪潮中，Vatee万腾科技以其独特而强大的创新力量，为整个行业描绘了一幅崭新的视野。这不仅是一场科技创新的冒险，更是对未来数字时代发展方向的领先探索。 Vatee万腾将创新视为数字时代发展的引擎，成为推动行业向前的…...

编程日记 2023/11/24 11:40:12

【JavaSE】基础笔记 - 异常（Exception）

目录 1、异常的概念和体系结构 1.1、异常的概念 1.2、异常的体系结构 1.3 异常的分类 2、异常的处理 2.1、防御式编程 2.2、异常的抛出 2.3、异常的捕获 2.3.1、异常声明throws 2.3.2、try-catch捕获并处理 3、自定义异常类 1、异常的概念和体系结构 1.1、异常的…...

编程日记 2023/11/24 11:39:10

QTableWidget——编辑单元格

文章目录前言熟悉QTableWiget，通过实现单元格的合并、拆分、通过编辑界面实现表格内容及属性的配置、实现表格的粘贴复制功能熟悉QTableWiget的属性一、[单元格的合并、拆分](https://blog.csdn.net/qq_15672897/article/details/134476530?spm1001.2014.3001.55…...

编程日记 2023/11/24 11:38:09

编译QT Mysql库并集成使用

安装MSVC编译器与Windows 10 SDK 打开Visual Studio Installer，如果已经安装过内容了可能是如下页面，点击修改（头一回打开的话不需要这一步）： 然后在工作负荷中勾选使用C的桌面开发，它会帮我们勾选好一些…...

编程日记 2023/11/24 11:37:08

利用企业被执行人信息查询API保障商业交易安全

前言在当今竞争激烈的商业环境中，企业为了保障商业交易的安全性不断寻求新的手段。随着技术的发展，利用企业被执行人信息查询API已经成为了一种强有力的工具，能够帮助企业在商业交易中降低风险，提高合作的信任度。企业被执行人…...

编程日记 2023/11/24 11:35:07

【深度学习】P1 深度学习基础框架 - 张量 Tensor

深度学习基础框架张量 Tensor 张量数据操作导入创建张量获取张量信息改变张量张量运算张量与内存张量 Pytorch 是一个深度学习框架，用于开发和训练神经网络模型。而其核心数据结构，则是张量 Tensor，类似于 Numpy 数组，但是可…...

编程日记 2023/11/24 11:33:04

vue2 识别页面参数中的html

在Vue 2中，你可以使用v-html指令来识别页面参数中的HTML内容。v-html指令允许你将HTML代码作为Vue模板的一部分进行渲染。以下是一个示例，演示了如何在Vue 2中使用v-html指令来识别页面参数中的HTML内容： <template><div v-html&…...

编程日记 2023/11/24 11:32:03

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园二、准备工作 1. 编译环境宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53

线程同步：确保多线程程序的安全与高效！

全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块第三部分&#xff…...

编程新知 2025/9/24 16:02:40

基于Docker Compose部署Java微服务项目

一. 创建根项目根项目（父项目）主要用于依赖管理一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2026/2/5 3:09:56

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...

编程新知 2025/12/14 17:38:21

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局：刀尖上的医学艺术 1.1 金标准背后的隐痛病理诊断被誉为"诊断的诊断"，医生需通过显微镜观察组织切片，在细胞迷宫中捕捉癌变信号。某省病理质控报告显示，基层医院误诊率达12%-15%，专家会诊…...

编程新知 2026/2/6 20:53:34

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装注意这里选择的是【release buids】，注意左上角标题例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量把你解压后的bin目录（即exe所在文件夹）加入系统变量…...

编程新知 2026/1/31 14:34:46

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录使用 erase 返回值继续迭代使用索引进行遍历我们知道类似 vector 的顺序迭代器被删除后，迭代器会失效，因为顺序迭代器在内存中是连续存储的，元素删除后，后续元素会前移。但一些场景中，我们又需要在执行删除操作…...

编程新知 2025/9/30 8:10:20

1. 创建开发环境

2. 工程目录结构

3. 代码部分

4. 配置文件

相关文章：