Django框架课-创建菜单界面：三、创建菜单界面
三、创建菜单界面
下面大部分就都是写js了
ac_game的每一个结构都是一个js类(比如每一个矩形界面、菜单等)，一个比较大的对象都会写成一个class。
写js-菜单背景
js/src/zbase.js
AcGame类就是根类
class AcGame {
constructor(id){
this.id = id;
this.$ac_game = $('#' + id); // html对象，一个类名为id的div标签
this.menu = new AcGameMenu(this); // 创建menu对象,传入根对象
}
}
js/src/menu/zbase.js
先写菜单界面，进入菜单界面创建一个zbase.js，一般base.js前面都会加上一个z，(因为打包是按照字典序打包的)，保证先定义了类，再调用类
class AcGameMenu{
// 构造函数传参root根对象(最根的最原始的AcGame对象，因为可能需要根对象的一些信息)
constructor(root){
this.root = root;
// jquery中html对象一般会前面加一个$符号，初始化这个对象的时候会用一对``来括住
this.$menu = $(`
<div class="ac-game-menu">
</div>
`);
// 将根对象中的$ac_game(一个html对象)中加入$menu对象,就是将上面的html插入到$ac_game对象中
this.root.$ac_game.append(this.$menu);
}
}
css/game.css
.ac-game-menu{
width: 100%;
height : 100%;
background-image: url("/static/image/menu/background.gif");
}
然后ctrl + f5强制刷新页面
js/src/menu/zbase.js 修改
现在添加三个按钮
大项目中，最忌讳的就是重名，一个名字越长越不容易重名，在子div中写类名时一般用其母div的类名作为前缀。如果有多个类名用空格隔开就可
class AcGameMenu{
constructor(root){
this.root = root;
this.$menu = $(`
<div class="ac-game-menu">
<div class="ac-game-menu-field">
<div class="ac-game-menu-field-item ac-game-menu-item-single">
单人模式
</div>
</br>
<div class="ac-game-menu-field-item ac-game-menu-item-multi">
多人模式
</div>
</br>
<div class="ac-game-menu-field-item ac-game-menu-item-settings">
设置
</div>
</div>
</div>
`);
this.root.$ac_game.append(this.$menu);
this.$single = this.$menu.find('.ac-game-menu-item-single');
this.$multi = this.$menu.find('.ac-game-menu-item-multi');
this.$settings = this.$menu.find('.ac-game-menu-item-settings');
}
}
css/game.css
添加三个按钮的css
.ac-game-menu{
width: 100%;
height : 100%;
background-image: url("/static/image/menu/background.gif");
background-size: 100% 100%;
user-select:none;
}
.ac-game-menu-field{
width: 20vw;
position: relative;
top: 40vh;
left: 19vw;
}
.ac-game-menu-field-item{
color: white;
height: 7vh;
width: 18vw;
font-size: 6vh;
/* font-style: italic; */
padding: 2vh;
text-align: center;
background-color: rgba(29,21,28,0.6);
border-radius: 10px;
letter-spacing: 0.5vw;
cursor: pointer;
}
.ac-game-menu-field-item:hover{
transform: scale(1.1);
transition: 200ms;
}
补充：小技巧-如何将服务器中的文件整体复制出来？
- 退出
tmux cat filename：展示filename的文件内容- 鼠标选中文本开头的若干字符
- 用滚轮滑到文件结尾
- 按住
Shift，同时鼠标点击文件结尾，此时会选中文件所有内容 - Windows/Linux下，按
Ctrl + insert可以复制全文；Mac下，按Command + c可以复制全文。
在前端怎么切换页面
用js去硬操作就行
给我们的AcGameMenu这个对象定义几个操作函数，比如点某个按钮，就改变页面，就写js代码就行
加一个初始化函数start()，每次打开这个页面都要初始化一些东西
点击按钮触发事件，写add_listening_events()函数
class AcGameMenu{
constructor(root){
this.root = root;
this.$menu = $(`
<div class="ac-game-menu">
<div class="ac-game-menu-field">
<div class="ac-game-menu-field-item ac-game-menu-item-single-mode">
单人模式
</div>
</br>
<div class="ac-game-menu-field-item ac-game-menu-item-multi-mode">
多人模式
</div>
</br>
<div class="ac-game-menu-field-item ac-game-menu-item-settings">
设置
</div>
</div>
</div>
`);
this.root.$ac_game.append(this.$menu);
this.$single_mode = this.$menu.find('.ac-game-menu-item-single-mode');
this.$multi_mode = this.$menu.find('.ac-game-menu-item-multi-mode');
this.$settings = this.$menu.find('.ac-game-menu-item-settings');
this.start();
}
start(){
this.add_listening_events();
}
add_listening_events(){
let outer = this;
this.$single_mode.click(function(){
console.log("click single mode");
});
this.$multi_mode.click(function(){
console.log("click multi mode");
});
this.$settings.click(function(){
console.log("click settings");
});
}
// 退出游戏界面就要显示菜单，进入游戏界面要关闭菜单=> show、hide
show(){ // 显示menu界面(jQuery自带的api)
this.$menu.show();
}
hide(){
this.$menu.hide();
}
}
写playground界面
写static/js/src/playground/zbase.js
class AcGamePlayground{
constructor(root){
this.root = root;
this.$playground = $(`<div>游戏界面</div>`);
this.hide();
this.root.$ac_game.append(this.$playground);
this.start();
}
start(){
}
show(){ // 打开playground界面
this.$playground.show();
}
hide(){ // 关闭playground界面
this.$playground.hide();
}
}
改写static/js/src/zbase.js
class AcGame {
constructor(id){
this.id = id;
this.$ac_game = $('#' + id);
this.menu = new AcGameMenu(this);
this.playground = new AcGamePlayground(this);
this.start();
}
start(){ // 可能需要放一些初始化操作
}
}
界面切换
点击单人模式，将菜单隐藏，显示playground界面
outer.hide(); // 隐藏菜单界面
outer.root.playground.show(); // 显示游戏界面
流程梳理：
访问：http://47.94.107.232:8000/ ，
新建一个AcGame对象,对象初始化,调用AcGame对象构造函数（会初始化acgame的menu、playground对象）
menu对象渲染出来=>菜单界面
点击单人模式按钮
调用该按钮被点击后的函数，隐藏菜单界面，显示游戏界面。
rds_blogs
