提示
如果你需要更基础的教程,请前往 菜鸟教程
CSS 是页面设计中最重要的部分,一个好的 CSS 设计可以使你的页面如虎添翼,让用户有更好的体验。本节将介绍 CSS 的基本概念和用法,包括选择器、盒模型、布局、动画等。
啥都想学,啥也不会
提示
如果你需要更基础的教程,请前往 菜鸟教程
CSS 是页面设计中最重要的部分,一个好的 CSS 设计可以使你的页面如虎添翼,让用户有更好的体验。本节将介绍 CSS 的基本概念和用法,包括选择器、盒模型、布局、动画等。
提示
这里不准备提供最基础的 HTML
知识,而是针对 Vue
项目中常用的语法进行介绍。如果你真的一点 HTML
都不会,你可以前往 菜鸟教程 先行学习。
软件工程与计算 II 这门课程,在经过 cx 老师毫无感情的纯理论教学之后,第二年我们又迎来了 67 老师的强而有力的纯实践开发教学。
然而,67 老师对于实践的要求历来极高,如果是第一次接触开发的同学,那么毫无基础的突然让你实践,就会感到十分痛苦。因为在课上并不会给你讲解项目中任何的代码,只会给你一个需求和一个示例项目,让你自己完成,一些简单的快速上手是有的,但是助教讲解的也并不是非常的清楚,而且ddl非常的短,直接导致整个学习过程十分的麻烦而且并不容易。
所以,为了让大家能够顺利的完成课程,我决定写一个系列的文章,来帮助大家完成课程的开发任务。
本教程将会尽量简短,一些用不上的内容就会略过不说,主要说需要用到的内容。
提示
你知道吗?
Vue.js 的官方文档实际上也非常不错!你可以通过这个链接学习如何使用 node.js 包管理器创建 Vue 项目!
Vue 是一款非常火爆的前端项目框架,它基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,可以高效地开发用户界面。无论是简单还是复杂的界面,Vue都可以胜任。是目前生产环境中使用最广泛的JavaScript框架之一。
提示
对于 Vue3
的 script
常用语法,显然 Vue3 互动教程 是最好的学习方式,建议你去那里学习。
对于 Element-Plus
的组件样式和用法查询,你应当前往 Element-Plus 官网 阅读。
我们都知道,我们游戏的场景之间的切换,都是依靠一个栈来实现。一个很简单的例子,当你启动游戏的时候,将标题画面的内容压入一个栈,当你选择开始游玩,将游戏的内容继续压入,当你结束游戏,游戏内容从栈中弹出,这时你又会重新看到原来的那个标题画面,我们想要达成这个简单的压入弹出。
那想法就很简单了,写一个栈!然后把各种界面都整成同一种通用类型的子类往里面压入不就完事了?行,开写。
StateStack
类:
为了让我们能够很轻松地用简单的几句话控制音乐的播放、音量还有暂停,以及游戏音效的随意施放,我们有必要写两个类来分别处理音乐和音效:
先给自己准备好的每一个音乐都准备好独特的id,在这里我们实际上还没有准备任何的音乐,所以我们这里只放上一个MusicCount用来占位。
然后就是MusicPlayer类:
在这里需要注意的是,音乐和其它文件是不一样的,音乐文件一般比较大,因为音乐很长,所以SFML的打开方式并不是像其他类型的文件一样,而是根据音乐播放的进度选取文件当中的某一段读入,在之后销毁掉换成另一段,也就是说这个音乐播放时需要保证文件一直能够访问到。
有的时候我们还是需要获取某个东西的绝对位置,以方便我们进行碰撞检测等操作,所以,我们需要根据4中的树形编排方式再实现一点点东西:
这样我们就也可以很轻松地借助相对位置得到绝对位置了。
在游戏中我们时常能见到某个实体围绕另一个实体做运动,它实际上是以这个被围绕的实体为参照的相对位置,如果直接使用绝对位置来计算固然可以,但是十分麻烦。比如某游戏中主角有一个闪电球始终环绕着旋转,这时我们既要考虑主角的运动情况,还要考虑到球绕着主角的旋转情况,计算起来非常地繁琐。
又没有更好的方法可以解决这个问题呢?
我们可以用“树”的结构来解决这个问题,依照上文的例子,我们把闪电球作为子节点连接到主角上,这时,我们便只需要考虑球的旋转就行,其他的位置已经由主角决定好,就相当于,坐标的变换从父节点到子节点一路叠Buff,用这种结构,我们甚至能为这个闪电球再添加围绕它的别的什么球。