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

【ts + webpack】贪吃蛇小游戏

news 2026/2/10 3:30:37

一、项目搭建

1.1 初始化项目

二、项目界面布局

三、完成Food类

四、完成记分牌类

五、初步完成snake类

六、创建游戏控制器类 - 键盘事件

七、GameControl - 使蛇移动

八、蛇撞墙和吃食检测

一、项目搭建

1.1 初始化项目

1.使用init命令生成package.json文件

npm init -y

2.在根目录创建src文件夹、tsconfig.json文件、weboack.config.js文件

3.在src文件夹下创建index.ts、index.html、style文件夹、module文件夹

4.在style文件夹内创建index.less文件

5.运行以下命令，安装所需的18个依赖

npm i webpack webpack-cli webpack-server typescript ts-loader style-loader less-loader less css-loader postcss postcss-loader postcss-preset-env core-js html-webpack-plugin clean-webpack-plugin babel-loader @babel/preset-env @babel/core -D

安装完毕后，你的文件结构应该是这样

安装依赖说明

6.配置package.json

在"script"对象中，添加如下命令

"build": "webpack",
"start": "webpack server --open"

7.配置tsconfig.json

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

8.配置webpack.config.js

// 引入一个包
const path = require("path")
// 引入hmtl插件
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")module.exports = {entry: "./src/index.ts",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js",// 告诉webpack不适用箭头函数environment: {arrowFunction: false,const: false,},},mode: 'development' ,// 指定webpack打包时使用的模块module: {// 指定要加载的规则rules: [{// test指定规则生效的文件test: /\.ts$/,use: [// 配置babel{// 指定加载器loader: "babel-loader",// 设置babeloptions: {// 设置定义的环境presets: [["@babel/preset-env",{// 要兼容的目标浏览器targets: {browsers: ["last 2 versions"],ie: 11,},// 指定corejs的版本corejs: 3,// 使用corejs的方式,"usage"表示按需加载useBuiltIns: "usage",},],],},},"ts-loader",],exclude: /node_modules/,},{test: /\.less$/,use: ["style-loader","css-loader",// 引入postcss{loader: "postcss-loader",options: {postcssOptions: {plugins: [["postcss-preset-env",{browsers: ["last 2 versions"],},],]},},},"less-loader",],},],},// 配置webpack插件plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: "./src/index.html",filename: "index.html",}),],// 用来设置模块resolve: {extensions: [".ts", ".js"],},
}

二、项目界面布局

1.打开src文件夹下index.html文件，设置游戏主容器、游戏舞台、蛇、食物、记分牌等元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贪吃蛇</title>
</head>
<body><!-- 创建游戏主容器 --><div id="main"><!-- 设置游戏的舞台 --><div id="stage"><!-- 设置蛇 --><div id="snake"><!-- snake内部的div  表示蛇的各部分 --><div></div></div><!-- 设置食物 --><div id="food"><!-- 添加4个div 设置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>

2.在index.ts中引入index.less

三、完成Food类

1.在modules文件夹中创建Food.ts文件

2.定义获取食物的x，y坐标的方法，修改食物的位置方法等

// 定义食物类Food
class Food {// 定义一个属性表示食物所对应的元素element: HTMLElement;constructor() {// 获取页面中的food元素并将其复制给elementthis.element = document.getElementById("food")!;}// 定义一个获取食物x轴坐标的方法get x() {return this.element.offsetLeft;}// 定义一个获取食物y轴坐标的方法get y() {return this.element.offsetTop;}// 修改食物的位置change() {// 生成一个随机的位置// 食物的位置最小是0，最大是290// 蛇移动一次就是一格，一格的大小就是10，所以就要求食物的位置必须是10的倍数let top = Math.round(Math.random() * 29) * 10;let left = Math.round(Math.random() * 29) * 10;this.element.style.left = left + "px";this.element.style.top = top + "px";}
}export default Food;

四、完成记分牌类

1.在modules文件夹下创建ScorePanel.ts文件

2.定义属性：分数、等级、最大等级以及升级所需分数

3.定义方法：加分方法、提升等级方法

// 定义表示记分牌的类
class ScorePanel {// score和level用来记录分数和等级score: number = 0;level: number = 1;// 分数和等级所在的元素，在构造函数中进行初始化scoreEle: HTMLElement;levelEle: HTMLElement;// 设置变量限制等级maxLevel: number;// 设置变量表示多少分升级upScore: number;constructor(maxLevel: number = 10, upScore: number = 10) {this.scoreEle = document.getElementById("score")!;this.levelEle = document.getElementById("level")!;this.maxLevel = maxLevel;this.upScore = upScore;}// 设置一个加分的方法addScore() {this.scoreEle.innerHTML = ++this.score + "";// 判断分数是多少if (this.score % this.upScore === 0) {this.levelUp();}}// 提升等级的方法levelUp() {if (this.level < this.maxLevel) this.levelEle.innerHTML = ++this.level + "";}
}export default ScorePanel;

五、初步完成snake类

1.在modules文件夹中创建Snake.ts文件

2.定义属性：蛇头、蛇的身体

3.定义方法：获取蛇的x，y坐标方法、设置x，y坐标的方法，蛇的身体增加的方法

class Snake {// 表示蛇头的元素hand: HTMLElement;// 蛇的身体（包括舌头）bodies: HTMLCollection;// 获取蛇的容器element: HTMLElement;constructor() {this.element = document.getElementById("snake")!;this.hand = document.querySelector("#snake > div")!;this.bodies = this.element.getElementsByTagName("div")!;}// 获取蛇的x坐标get X() {return this.hand.offsetLeft;}// 获取蛇的y坐标get Y() {return this.hand.offsetTop;}set X(value) {this.hand.style.left = `${value}px`;}set Y(value) {this.hand.style.top = `${value}px`;}// 蛇增加身体的方法addBody() {// 向element中添加一个divthis.element.insertAdjacentHTML("beforeend", "<div></div>");}}export default Snake;

六、创建游戏控制器类 - 键盘事件

1.在modules文件夹中创建GameControl.ts文件

2.引入其他3个文件

3.定义属性：蛇、食物、记分牌、移动方向

4.定义方法：游戏初始化、键盘按下事件

// 引入其他类
import Snake from "./Snake";
import Food from "./Food";
import ScorePanel from "./ScorePanel";// 游戏控制器，控制其他的所有类
class GameControl {// 定义三个属性// 蛇snake: Snake;food: Food;scorePanel: ScorePanel;// 创建一个属性来存储蛇的移动方向（也就是按键的方向）direction: string = "";constructor() {this.snake = new Snake();this.food = new Food();this.scorePanel = new ScorePanel();this.init();}// 游戏初始化方法，调用后游戏即开始init() {// 绑定键盘按下事件document.addEventListener("keydown", this.keydownHandle.bind(this));}/*Chrome           IEArrowUp          UpArrowDown       DownArrowLeft       LeftArrowRight      Right*/// 创建一个键盘按下的相应函数keydownHandle(event: KeyboardEvent) {// 修改direction属性this.direction = event.key;}
}export default GameControl;

七、GameControl - 使蛇移动

1.创建方法：使蛇移动

// 创建一个控制蛇移动的方法run() {/* 根据方向（this.direction）来使蛇的位置改变向上 top 减少向下 top 增加向左 left 减少向右 left 增加*/// 获取蛇现在的坐标let x: number = this.snake.X;let y: number = this.snake.Y;// 根据舍得方向计算坐标值switch (this.direction) {case "ArrowUp":case "Up":case "w":case "W":// 向上移动  top 减少y -= 10;break;case "ArrowDown":case "Down":case "s":case "S":// 向下移动 top 增加y += 10;break;case "ArrowLeft":case "Left":case "a":case "A":// 向左移动 left 减少x -= 10;break;case "ArrowRight":case "Right":case "d":case "D":// 向右移动 right 增加x += 10;break;}// 修改蛇的位置this.snake.X = x;this.snake.Y = y;}

2.在index.ts中引入GameControl文件，并new GameControl()调用

// 引入样式
import "./style/index.less";import GameControl from "./modules/GameControl";new GameControl();

3.此时我们的蛇已经可以移动了，但是它不是实时移动的，接下来我们添加定时调用方法

setTimeout(this.run.bind(this), 300);

4.接下来完成一些逻辑补充，创建一个变量用来检测蛇是不是还活着

// 创建一个属性用来记录游戏是否结束isLive: boolean = true;

八、蛇撞墙和吃食检测

1.修改Snake.ts中set x和 set y 的内容

set X(value) {// 如果新值和旧值相同，则直接返回不再修改if (this.X === value) return;// x的值的合法范围0-290之间if (value < 0 || value > 290) {// 进入判断说明蛇撞墙了，抛出一个异常throw new Error("蛇撞墙了");}this.hand.style.left = `${value}px`;}set Y(value) {// 如果新值和旧值相同，则直接返回不再修改if (this.Y === value) return;// x的值的合法范围0-290之间if (value < 0 || value > 290) {// 进入判断说明蛇撞墙了，抛出一个异常throw new Error("蛇撞墙了！");}this.hand.style.top = `${value}px`;}

2.在GameControl中添加异常捕获

// 使用异常捕获来处理所有的游戏结束事件，减少代码try {// 修改蛇的位置this.snake.X = x;this.snake.Y = y;} catch (e: any) {// 进入到catch，说明出现了异常，游戏结束，弹出一个提示信息alert(e.message + "GAME OVER，请刷新页面后重新开始游戏");// 将isLive设置为falsethis.isLive = false;}

3. 此时我们控制蛇撞墙就会弹窗，但是我们的蛇还能掉头，接下来我们处理这个问题

4.打开Snake文件，增加set x 和 set y 的逻辑

set X(value) {// 如果新值和旧值相同，则直接返回不再修改if (this.X === value) return;// x的值的合法范围0-290之间if (value < 0 || value > 290) {// 进入判断说明蛇撞墙了，抛出一个异常throw new Error("蛇撞墙了");}// 修改x时，是在修改水平坐标，蛇在左右移动，蛇在向左移动时，不能向右掉头，反之亦然if (this.bodies[1] &&(this.bodies[1] as HTMLElement).offsetLeft === value) {// 如果发生了掉头，让蛇向反方向继续移动if (value > this.X) {// 如果新值value大于旧值x，则说明蛇在向右走，此时发生掉头，应该使蛇继续向左走value = this.X - 10;} else {value = this.X + 10;}}this.hand.style.left = `${value}px`;}set Y(value) {// 如果新值和旧值相同，则直接返回不再修改if (this.Y === value) return;// x的值的合法范围0-290之间if (value < 0 || value > 290) {// 进入判断说明蛇撞墙了，抛出一个异常throw new Error("蛇撞墙了！");}// 修改y时，是在修改垂直坐标，蛇在上下移动，蛇在向上移动时，不能向下掉头，反之亦然if (this.bodies[1] &&(this.bodies[1] as HTMLElement).offsetLeft === value) {// 如果发生了掉头，让蛇向反方向继续移动if (value < this.Y) {// 如果新值value大于旧值y，则说明蛇在向上走，此时发生掉头，应该使蛇继续向下走value = this.Y - 10;} else {value = this.Y + 10;}}this.hand.style.top = `${value}px`;}

5.此时我们掉头蛇就不会掉头了，接下来我们处理我们的蛇的身体

// 添加一个蛇身体移动的方法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`;}}

6.在set x,set y中调用moveBody方法

7.现在我们发现我么的蛇还能够穿过自己的身体，接下来我们处理这个问题

// 检查蛇头是否撞到身体的方法checkHeadBody() {// 获取所有的身体，检查其是否和蛇头的坐标发生重叠for (let i = 1; i < this.bodies.length; i++) {let bd = this.bodies[i] as HTMLElement;console.log(this.X, bd.offsetLeft, this.Y, bd.offsetTop);if (this.X === bd.offsetLeft && this.Y === bd.offsetTop) {// 进入判断说明蛇头撞到了身体，游戏结束throw new Error("撞到自己了！");}}}

8.在set x,set y中调用checkHeadBody方法

9.完整Snake文件

class Snake {// 表示蛇头的元素hand: HTMLElement;// 蛇的身体（包括舌头）bodies: HTMLCollection;// 获取蛇的容器element: HTMLElement;constructor() {this.element = document.getElementById("snake")!;this.hand = document.querySelector("#snake > div")!;this.bodies = this.element.getElementsByTagName("div")!;}// 获取蛇的x坐标get X() {return this.hand.offsetLeft;}// 获取蛇的y坐标get Y() {return this.hand.offsetTop;}set X(value) {// 如果新值和旧值相同，则直接返回不再修改if (this.X === value) return;// x的值的合法范围0-290之间if (value < 0 || value > 290) {// 进入判断说明蛇撞墙了，抛出一个异常throw new Error("蛇撞墙了");}// 修改x时，是在修改水平坐标，蛇在左右移动，蛇在向左移动时，不能向右掉头，反之亦然if (this.bodies[1] &&(this.bodies[1] as HTMLElement).offsetLeft === value) {// 如果发生了掉头，让蛇向反方向继续移动if (value > this.X) {// 如果新值value大于旧值x，则说明蛇在向右走，此时发生掉头，应该使蛇继续向左走value = this.X - 10;} else {value = this.X + 10;}}// 移动的时候调用身体方法this.moveBody();this.hand.style.left = `${value}px`;// 检查有没有撞到自己this.checkHeadBody();}set Y(value) {// 如果新值和旧值相同，则直接返回不再修改if (this.Y === value) return;// x的值的合法范围0-290之间if (value < 0 || value > 290) {// 进入判断说明蛇撞墙了，抛出一个异常throw new Error("蛇撞墙了！");}// 修改y时，是在修改垂直坐标，蛇在上下移动，蛇在向上移动时，不能向下掉头，反之亦然if (this.bodies[1] &&(this.bodies[1] as HTMLElement).offsetLeft === value) {// 如果发生了掉头，让蛇向反方向继续移动if (value < this.Y) {// 如果新值value大于旧值y，则说明蛇在向上走，此时发生掉头，应该使蛇继续向左走value = this.Y - 10;} else {value = this.Y + 10;}}// 移动的时候调用身体方法this.moveBody();this.hand.style.top = `${value}px`;// 检查有没有撞到自己this.checkHeadBody();}// 蛇增加身体的方法addBody() {// 向element中添加一个divthis.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`;}}// 检查蛇头是否撞到身体的方法checkHeadBody() {// 获取所有的身体，检查其是否和蛇头的坐标发生重叠for (let i = 1; i < this.bodies.length; i++) {let bd = this.bodies[i] as HTMLElement;console.log(this.X, bd.offsetLeft, this.Y, bd.offsetTop);if (this.X === bd.offsetLeft && this.Y === bd.offsetTop) {// 进入判断说明蛇头撞到了身体，游戏结束throw new Error("撞到自己了！");}}}
}export default Snake;

10.完整GameControl文件

// 引入其他类
import Snake from "./Snake";
import Food from "./Food";
import ScorePanel from "./ScorePanel";// 游戏控制器，控制其他的所有类
class GameControl {// 定义三个属性// 蛇snake: Snake;food: Food;scorePanel: ScorePanel;// 创建一个属性来存储蛇的移动方向（也就是按键的方向）direction: string = "";// 创建一个属性用来记录游戏是否结束isLive: boolean = true;constructor() {this.snake = new Snake();this.food = new Food();this.scorePanel = new ScorePanel();this.init();}// 游戏初始化方法，调用后游戏即开始init() {// 绑定键盘按下事件document.addEventListener("keydown", this.keydownHandle.bind(this));this.run();}/*Chrome           IEArrowUp          UpArrowDown       DownArrowLeft       LeftArrowRight      Right*/// 创建一个键盘按下的相应函数keydownHandle(event: KeyboardEvent) {// 修改direction属性this.direction = event.key;}// 创建一个控制蛇移动的方法run() {/* 根据方向（this.direction）来使蛇的位置改变向上 top 减少向下 top 增加向左 left 减少向右 left 增加*/// 获取蛇现在的坐标let x: number = this.snake.X;let y: number = this.snake.Y;// 根据舍得方向计算坐标值switch (this.direction) {case "ArrowUp":case "Up":case "w":case "W":// 向上移动  top 减少y -= 10;break;case "ArrowDown":case "Down":case "s":case "S":// 向下移动 top 增加y += 10;break;case "ArrowLeft":case "Left":case "a":case "A":// 向左移动 left 减少x -= 10;break;case "ArrowRight":case "Right":case "d":case "D":// 向右移动 right 增加x += 10;break;}// 检查蛇是否吃到了食物this.checkEat(x, y);// 使用异常捕获来处理所有的游戏结束事件，减少代码try {// 修改蛇的位置this.snake.X = x;this.snake.Y = y;} catch (e: any) {// 进入到catch，说明出现了异常，游戏结束，弹出一个提示信息alert(e.message + "GAME OVER，请刷新页面后重新开始游戏");// 将isLive设置为falsethis.isLive = false;}// 开启一个定时调用this.isLive &&setTimeout(this.run.bind(this), 300 - (this.scorePanel.level - 1) * 30);}// 定义一个方法，用来检查蛇是否吃到了食物checkEat(x: number, y: number) {if (x === this.food.x && y === this.food.y) {// 食物的位置要进行重置this.food.change();// 分数增加this.scorePanel.addScore();// 蛇增加一节this.snake.addBody();}}
}export default GameControl;

gitee地址：Snake_Game: 使用ts实现一个简单的贪吃蛇小游戏

【ts + webpack】贪吃蛇小游戏

目录一、项目搭建 1.1 初始化项目二、项目界面布局三、完成Food类四、完成记分牌类五、初步完成snake类六、创建游戏控制器类 - 键盘事件七、GameControl - 使蛇移动八、蛇撞墙和吃食检测一、项目搭建 1.1 初始化项目 1.使用init命令生成package.json文件 …...

编程日记 2023/2/21 13:32:26

传统巨头生“变”，中国毫米波雷达市场战火再升级

进入2023年，中国车载毫米波雷达市场战火明显升级。一方面，愈演愈烈的份额抢夺战不仅仅存在于几大传统巨头之间，也快速转移到与国产供应商之间；随着部分外资巨头的本土化战略深入落地，同时对国产供应商造成了压力。 …...

编程日记 2023/2/21 13:31:18

26岁曾月薪15K，现已失业3个月，我依然没有拿到offer......

我做测试5年，一线城市薪水拿到15K，中间还修了一个专升本，这个年限不说资深肯定也是配得上经验丰富的。今年行情不好人尽皆知，但我还是对我的薪水不是很满意，于是打算出去面试，希望可以搏一个高薪。但真到面…...

编程日记 2023/2/21 13:30:10

华为OD机试 - 打印文件 | 机试题算法思路【2023】

最近更新的博客华为OD机试 - 简易压缩算法（Python） | 机试题算法思路【2023】华为OD机试题 - 获取最大软件版本号（JavaScript）华为OD机试 - 猜字谜（Python） | 机试题+算法思路【2023】华为OD机试 - 删除指定目录（Python） | 机试题算法思路【2023】华为OD机试 …...

编程日记 2023/2/21 13:29:01

【前端】浏览器的渲染流程（完整）

本文主要包含以下内容：浏览器渲染整体流程解析 HTML样式计算布局分层生成绘制指令分块光栅化绘制常见面试题浏览器渲染整体流程浏览器，作为用户浏览网页最基本的一个入口，我们似乎认为在地址栏输入 URL 后网页自动就出来了。殊不知在用户输入…...

编程日记 2023/2/21 13:27:52

华为OD机试 - 有效子字符串 | 机试题算法思路【2023】

编程日记 2023/2/21 13:26:45

抽象类和接口

抽象类和接口抽象类和接口的定义抽象类主要用来抽取子类的通用特性，作为子类的模板，它不能被实例化，只能被用作为子类的超类。接口是抽象方法的集合，声明了一系列的方法操作，如果一个类实现了某个接口，…...

编程日记 2023/2/21 13:25:37

STM32DSP库汇总

前言本文仅对stm32的DSP库进行汇总，具体函数使用方式持续更新…… 分类函数名描述 BasicMathFunctions 基础数学函数 abs绝对值add加法dot_prod向量点积mult乘法negate相反数offset 偏置 scale比例缩放shift移位sub减法 ComplexMathFunctions 复数数学函数 conj…...

编程日记 2023/2/21 13:24:31

C++类和对象----思想基础应用

类与对象的思想&基础应用一、类声明1.1、封装类的意义1.1.1、在设计类的时候，属性和行为写在一起，表现事物1.1.2、成员权限1.2、struct和class区别1.3、成员属性设置为私有二、对象的初始化和清理2.1、构造函数&析构函数2.2、构造函数分类方法一…...

编程日记 2023/2/21 13:23:20

力扣解法汇总1792. 最大平均通过率

目录链接： 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目： https://github.com/September26/java-algorithms 原题链接：力扣描述： 一所学校里有一些班级，每个班级里有一些学生，现在每个班…...

编程日记 2023/2/21 13:22:13

动手学深度学习（第二版）学习笔记第二章

官网：http://zh.d2l.ai/ 视频可以去b站找记录的是个人觉得不太熟的知识第二章预备知识代码地址：d2l-zh/pytorch/chapter_preliminaries 2.1 数据操作 2.1. 数据操作 — 动手学深度学习 2.0.0 documentation 如果只想知道张量中元素的总数&#…...

编程日记 2023/2/21 13:21:05

CMake构建静态库与动态库以及使用

CMake构建静态库与动态库一、任务二、准备工作三、编译共享库四、ADD_LIBRARY指令五、编译静态库5.1、SET_TARGET_PROPERTIES指令5.2、GET_TARGET_PROPERTY指令六、动态库版本号七、安装共享库和头文件八、使用外部共享库和头文件8.1、准备工作8.2、引入头文件搜索路径8.3、为 …...

编程日记 2023/2/21 13:19:53

Linux 系统目录结构

登录系统后，在当前命令窗口下输入命令： ls / 你会看到如下图所示: 树状目录结构： 以下是对这些目录的解释： /bin： bin 是 Binaries (二进制文件) 的缩写, 这个目录存放着最经常使用的命令。 /boot： 这里…...

编程日记 2023/2/21 13:18:44

stable diffusion webui安装与使用(官方超简单教程)

预备依赖下载miniconda 教程参考：https://blog.csdn.net/weixin_43828245/article/details/124768518安装git 参考教程：https://blog.csdn.net/weixin_46474921/article/details/127091723 下载sd-webui 官网 https://github.com/AUTOMATIC1111/stab…...

编程日记 2023/2/21 13:17:34

机器学习：学习k-近邻（KNN）模型建立、使用和评价

机器学习：学习k-近邻（KNN）模型建立、使用和评价文章目录机器学习：学习k-近邻（KNN）模型建立、使用和评价一、实验目的二、实验原理三、实验环境四、实验内容五、实验步骤1.数据读取2.数据理解3.数据准备4.算…...

编程日记 2023/2/21 13:16:25

Hive Sampling 抽样函数：Random随机抽样、Block 基于数据块抽样、Bucket table 基于分桶表抽样

Hive Sampling 抽样函数文章目录Hive Sampling 抽样函数Random随机抽样Block 基于数据块抽样Bucket table 基于分桶表抽样语法在HQL中，可以通过三种方式采样数据：随机采样，存储桶表采样和块采样。Random随机抽样随机抽样使用rand()函数确保…...

编程日记 2023/2/21 13:15:15

2023年中职网络安全竞赛跨站脚本渗透解析-1（超详细）

跨站脚本渗透任务环境说明：需求环境可私信博主！服务器场景：Server2125(关闭链接)服务器场景操作系统：未知访问服务器网站目录1，根据页面信息完成条件，将获取到弹框信息作为flag提交；访问服务器网站目录2，根据页面信息完成条件，将获取到弹框信息作为flag提交；访问服…...

编程日记 2023/2/21 13:14:07

虚拟 DOM 详解

什么是虚拟 dom？ 虚拟 dom 本质上就是一个普通的 JS 对象，用于描述视图的界面结构在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟 dom 树，这也就意味着每个组件都对应一棵虚拟 DOM 树查看虚拟…...

编程日记 2023/2/21 13:12:58

Delphi Http Https 最好的解决方法(一)

当前文章主要解决Delphi调用http、https的常见报错。开发工具: Delphi XE 10.1 Berlin版本可能所需的控件包： QDAC 请自行下载。 1. 接口描述 dll_init 接口初始化，程序启动时调用，主要是对工具类实例的创建 dll_post 发送post请求&am…...

编程日记 2023/2/21 13:11:49

Allegro无法打开10度走线命令的原因和解决办法

Allegro无法打开10度走线命令的原因和解决办法做PCB设计的时候，10度走线也是较为常见的设计方式，Allegro支持10度走线，如下图需要10度走线的时候，Options只需要勾选Route offset命令即可但有时options处会看不到10度走线的命令，如下图...

编程日记 2023/2/21 13:10:40

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。目录【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...

编程新知 2026/2/9 20:01:01

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2026/1/28 9:04:29

Linux云原生安全：零信任架构与机密计算

Linux云原生安全：零信任架构与机密计算构建坚不可摧的云原生防御体系引言：云原生安全的范式革命随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

大数据学习（132）-HIve数据分析

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2026/2/1 17:50:36

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案

在大数据时代，海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构，在处理大规模数据抓取任务时展现出强大的能力。然而，随着业务规模的不断扩大和数据抓取需求的日益复杂，传统…...

编程新知 2026/2/4 19:29:38

水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中，工业自动化网关起着至关重要的作用，尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关，为水泥厂实现高效生产与精准控制提供了有力支持。水泥厂设备众多，其中不少设备采用Devicenet协议。Devicen…...

编程新知 2026/2/7 14:33:24

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

第三周 Day 3 🎯 今日目标理解类（class）和对象（object）的关系学会定义类的属性、方法和构造函数（init）掌握对象的创建与使用初识封装、继承和多态的基本概念（预告） &a…...

编程新知 2025/11/12 9:47:25

表单设计器拖拽对象时添加属性

背景：因为项目需要。自写设计器。遇到的坑在此记录使用的拖拽组件时vuedraggable。下面放上局部示例截图。坑1。draggable标签在拖拽时可以获取到被拖拽的对象属性定义要使用 :clone, 而不是clone。我想应该是因为draggable标签比较特。另外在使用**:clone时要将…...

编程新知 2026/2/6 5:47:40

一、项目搭建

1.1 初始化项目

二、项目界面布局

三、完成Food类

四、完成记分牌类

五、初步完成snake类

六、创建游戏控制器类 - 键盘事件

七、GameControl - 使蛇移动

八、蛇撞墙和吃食检测

相关文章：