![](https://img-blog.csdnimg.cn/2021072810305494.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 61
前端相关文章
John是橘红
...
展开
-
【CSS】flex布局使得一个元素向左靠齐,两个以上元素向右靠齐
场景一个li父节点,里边有input元素和两个button元素。要求input放在左边,两个button放在最右边解决方法先将布局设置为flex,并向右靠齐li { display: flex; justify-content: flex-end; ...}设置input的右边距为autoli button { margin-right: auto; ...}设置完后效果如下:...原创 2021-08-31 16:17:09 · 2684 阅读 · 0 评论 -
TypeScript入门(一):环境、类型和编译设置
0、TypeScript简介TypeScript是JavaScript的超集。它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。TS完全兼容JS,换言之,任何的JS代码都可以直接当成TS使用。相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;同样的功能,TS的代原创 2021-08-01 15:21:54 · 181 阅读 · 0 评论 -
TypeScript入门(二):面向对象编程
面向对象是程序中一个非常重要的思想,它被很多同学理解成了一个比较难,比较深奥的问题,其实不然。面向对象很简单,简而言之就是程序之中所有的操作都需要通过对象来完成。举例来说:操作浏览器要使用window对象操作网页要使用document对象操作控制台要使用console对象一切操作都要通过对象,也就是所谓的面向对象,那么对象到底是什么呢?这就要先说到程序是什么,计算机程序的本质就是对现实事物的抽象,抽象的反义词是具体,比如:照片是对一个具体的人的抽象,汽车模型是对具体汽车的抽象等等。程序也原创 2021-07-28 10:05:49 · 127 阅读 · 0 评论 -
TypeScript编译文件和tsconfig.json配置
自动编译文件编译文件时,使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。示例:tsc xxx.ts -w自动编译整个项目如果直接使用tsc指令,则可以自动将当前项目下的所有ts文件编译为js文件。但是能直接使用tsc命令的前提时,要先在项目根目录下创建一个ts的配置文件 tsconfig.jsontsconfig.json是一个JSON文件,添加配置文件后,只需只需 tsc 命令即可完成对整个项目的编译配置选项:原创 2021-07-28 10:05:09 · 1524 阅读 · 0 评论 -
用TypeScript写贪吃蛇(完结):蛇身体的移动
1. 蛇的身体移动逻辑蛇身体的移动属于蛇的事情,所以写在Snake类中。后一节移动后的位置刚好为前一节位置,依次移动即可。因此除了蛇头为键盘控制外,蛇身继承前一节的位置即可。移动身体的moveBody方法代码如下:// 添加一个蛇身体移动的方法moveBody() { /** * 将后边的身体设置为前边身体的位置 */ for (let i = this.bodies.length - 1; i > 0; i--) { // 获取前边身体的位置(类型断言,就是HT原创 2021-07-28 10:06:04 · 522 阅读 · 0 评论 -
用TypeScript写贪吃蛇(9):蛇撞墙和吃食物逻辑
1. 蛇撞墙机制在Snake类中修改setter。X和Y的setter用于控制蛇头的坐标移动,如果蛇的坐标在游戏区域以外,则表明撞墙,此时游戏结束。1.1 避免偶尔失灵的问题这是个应该处理的问题,因为每次蛇的移动只会移动一个方向,因此横坐标或纵坐标没发生改变的时候,就没有必要进行更改来消耗性能。因此新值和旧值相同的时候,则直接返回,不再修改。同时讲课的老师讲了不加这个代码,后面的身体的移动会有bug,虽然自己实测并没有测出来哈哈哈。// 设置蛇头的X坐标set X(value: number) {原创 2021-07-27 16:32:28 · 275 阅读 · 0 评论 -
用TypeScript写贪吃蛇(8):GameControl游戏逻辑(二)-蛇的移动和游戏结束
1. 蛇的移动实现方法在上篇文章可以得到,我们已经实现了在游戏初始化后,将键盘事件进行绑定,按下的按钮会被GameControl类中的direction属性记录。现在根据direction进行判断,假设此时的direction是左边,蛇头的坐标便向左移动一节(10px),并在游戏结束前不断地进行判断,以保持蛇的持续移动。run方法便是控制蛇持续移动的方法。最下边开启了定时器,保持了run方法的持续被调用。// 创建一个控制蛇移动的方法run() { /** * 根据方向 this.dir原创 2021-07-27 12:23:00 · 241 阅读 · 0 评论 -
用TypeScript写贪吃蛇(7):GameControl游戏逻辑(一)-键盘事件
1. 描述GameControl类用于控制游戏的核心逻辑。将所有的游戏逻辑写进GameControl后,index.ts只需要新建一个GameControl实例便可直接运行游戏。这两个文件的代码在下文可见。2. 代码初步代码初步书写如下:2.1 Index.ts// 引入样式import "./style/index.less";// 引入类import GameControl from "./modules/GameControl";new GameControl();2.2原创 2021-07-27 11:55:40 · 514 阅读 · 0 评论 -
用TypeScript写贪吃蛇(6):Snake类初步完成
Snake是整个项目最复杂的部分之一,而且游戏逻辑还没写,一下全写完不现实。因此Snake类目前先完成初步的功能。回想之前蛇在HTML里的结构:<!-- 设置蛇 --><div id="snake"> <!-- snake内部的div,表示蛇的各部分 --> <div></div></div>id为snake的div为蛇的容器,然后里边的div代表蛇的每一节。例如,里边的第一个div为蛇的头,如果蛇的容器里边有4个d原创 2021-07-27 11:43:25 · 100 阅读 · 0 评论 -
用TypeScript写贪吃蛇(5):代码模块化
1. 背景目前为止,咱们的代码都是写在入口文件index.ts中,但是所有的代码都写在这里边并不方便维护。如果能像Java那样,一个类一个文件,就会更容易维护和拓展。创建一个文件夹,modules文件夹,将类代码迁移到modules文件夹,主函数单独暴露在外。和Java比较不同的是,类的模块需要用export default 类名,将类作为默认模块暴露出去。其他的代码若要引入模块,使用import语句即可。2. 实施代码迁移后文件夹结构:2.1 Food.ts代码// 定义食物类Foodcl原创 2021-07-27 10:16:52 · 121 阅读 · 0 评论 -
用TypeScript写贪吃蛇(4):完成记分牌ScorePanel类
1. 需要实现的功能阐述贪吃蛇的游戏界面做好后,需要处理下方的记分牌。思考下ScorePanel类需要哪些属性,首先想到,记分牌需要记录分数(score)和等级(level)。同时为了将分数和等级展示到浏览器上,分数和等级在浏览器上对应的元素也必须是类的属性。// 定义表示记分牌的类class ScorePanel { // score和level用来记录分数和等级 private score: number = 0; private level: number = 1;原创 2021-07-27 10:10:03 · 120 阅读 · 0 评论 -
用TypeScript写贪吃蛇(3):完成Food类基本功能
1. Food类代码书写在贪吃蛇中,食物的基本属性是食物的坐标。首先在index.ts(webpack内约定的入口文件)构造Food类(代码模块化后边再处理):// 定义食物类Foodclass Food { // 定义一个属性表示食物所对应的元素 private element: HTMLElement; constructor() { // 获取页面中的food元素并将其赋值给element成员变量 // 感叹号! : 肯定获取的元素不可能原创 2021-07-27 09:39:36 · 193 阅读 · 0 评论 -
用TypeScript写贪吃蛇(2):HTML和Less代码书写
1. 目标效果书写前端项目的基本原则是,先完成静态页面代码后(HTML和Less)再完成动态代码(TypeScript)。目标效果图如下,大小和颜色等都有标注。下文的代码就不再详述,因为注释特别详细。2. HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=原创 2021-07-27 00:26:39 · 132 阅读 · 0 评论 -
用TypeScript写贪吃蛇(1):开发环境搭建
0. 参考资料尚硅谷2021版TypeScript教程: https://www.bilibili.com/video/BV1Xy4y1v7S2?p=22TypeScript官方文档:https://www.tslang.cn/docs/home.htmlwebpack官方文档:https://webpack.docschina.org/concepts/Babel官方文档:https://www.babeljs.cn/docs/**最终项目效果:**实现基本的贪吃蛇逻辑。1. 配置前端配置原创 2021-07-27 00:15:16 · 714 阅读 · 0 评论