3 创建菜单界面
项目系统设计
menu
:菜单页面playground
:游戏界面settings
:设置界面
项目文件结构
每个文件结构一般要对应项目系统设计三个模块
templates
目录:管理html文件urls
目录:管理路由,即链接与函数的对应关系views
目录:管理http函数models
目录:管理数据库数static
目录:管理静态文件,比如:
css
:对象的格式,比如位置、长宽、颜色、背景、字体大小等
js
:对象的逻辑,比如对象的创建与销毁、事件函数、移动、变色等
image
:图片
audio
:声音
*consumers
目录:管理websocket函数
素材地址
背景图片
下载方式:
wget --output-document=自定义图片名称 图片地址
jquery
库
<link rel="stylesheet" href="https://cdn.acwing.com/static/jquery-ui-dist/jquery-ui.min.css">
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
全局设置
cd acapp/acapp
vim settings.py
TIME_ZONE = 'Asia/Shanghai' # 更改时区
INSTALLED_APPS = [
'game.apps.GameConfig', # 把新建的app加进来 game文件夹下apps.py里的GameConfig类
...
]
# 设置静态文件地址
import os
STATIC_ROOT = os.path.join(BASE_DIR, 'static') # game/static
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
项目结构构建
cd game
# urls文件夹存储链接和函数对应关系
rm urls.py views.py models.py
mkdir urls views models static
cd urls
toch __init__.py
cd ../views
toch __init__.py
cd ../model
toch __init__.py
cd static
mkdir css js image
cd image
mkdir menu playground settings # 每个文件结构一般要对应项目系统设计三个模块
cd menu
wget --output-document=background.gif 链接
# rm wget-log
# 可查看 http://xxx.xxx.xxx.xxx:8000/static/image/menu/background.gif
cd ../../css/
vim game.css
cd ../js/
mkdir dist src # dist最终使用的js文件;src所有原始js文件
# 写脚本文件位置 只要改了js文件,最好都跑一下打包脚本
cd acapp
mkdir scripts
cd scripts
vim compress_game_js.sh
chomd +x compress_game_js.sh
./compress_game_js.sh
# 上传gitlab
git add .
git commit -m "create project structure"
git push
compress_game_js.sh
#! /bin/bash
JS_PATH=/home/acs/acapp/game/static/js/
JS_PATH_DIST=${JS_PATH}dist/
JS_PATH_SRC=${JS_PATH}src/
find $JS_PATH_SRC -type f -name '*.js' | sort | xargs cat > ${JS_PATH_DIST}game.js
web端
web.html
–> js代码执行 创建AcGame
类–> 调用构造函数
cd game/templates
mkdir menu playground settings
mkdir multiends # 名字瞎起的,用来存储不同终端
cd multiends
vim web.html
版本1.0 game/templates/multiends/web.html
Django 语法糖
{% load static %}
、{% static 'css/game.css' %}
、` {% static 'js/dist/game.js' %}
加载静态文件
后面的界面在js
中AcGame
渲染(在前端渲染,不给服务器压力)
{% load static %}
<head>
<!-- 加载jquery库 -->
<link rel="stylesheet" href="https://cdn.acwing.com/static/jquery-ui-dist/jquery-ui.min.css">
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
<!-- 按照前面的形式加载自己的 -->
<link rel="stylesheet" href="{% static 'css/game.css' %}">
<script src="{% static 'js/dist/game.js' %}"></script>
</head>
<body style="margin: 0">
<div id="ac_game_12345678"></div>
<script>
$(document).ready(function(){
let ac_game = new AcGame("ac_game_12345678");
});
</script>
</body>
版本2.0 game/templates/multiends/web.html
1.0版本 src命令引入代码会导致类变成整个网页的全局变量,当引入多个js文件,不同js文件之间如果有重名,可能冲突。
2.0改进:模块化整理 第四节开头讲了
{% load static %}
<head>
<link rel="stylesheet" href="https://cdn.acwing.com/static/jquery-ui-dist/jquery-ui.min.css">
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="{% static 'css/game.css' %}">
</head>
<body style="margin: 0">
<div id="ac_game_12345678"></div>
<script type="module">
import {AcGame} from "{% static 'js/dist/game.js' %}";
$(document).ready(function(){
let ac_game = new AcGame("ac_game_12345678");
});
</script>
</body>
报错的话:game/static/js/src/zbase.js
里calss AcGame
–> export calss AcGame
JS实现
cd game/static/js/src
mkdir menu playground settings
vim zbase.js
# 命名习惯,总的Class排序放在最后,打包时要保证zbase.js在menu playground settings文件夹后面
1.0 版本 game/static/js/src/zbase.js
class AcGame {
constructor(id) {
}
}
返回数据views
cd games/views
mkdir menu playground settings
touch menu/__init__.py playground/__init__.py settings/__init__.py
vim index.py
games/views/index.py
总的函数,只会在web端被调用,返回html文件
from django.shortcuts import render # 渲染
def index(request):
return render(request, "multiends/web.html") # templates下
写路由
总index
cd games/urls
mkdir menu playground settings
touch menu/__init__.py playground/__init__.py settings/__init__.py
vim index.py
games/urls/index.py
参考
acapp/acapp/urls.py
from django.urls import path, include
from game.views.index import index
urlpatterns = [
path("", index, name="index"), # views/index.py
path("menu/", include("game.urls.menu.index")),
path("playground/", include("game.urls.playground.index")),
path("settings/", include("game.urls.settings.index")),
]
settings/index
cd game/urls/settings
vim index.py
cd ../
cp settings/index.py menu/index.py # 在相应模块创建相同的 index.py 。
cp settings/index.py playground/index.py
game/urls/settings /index.py
from django.urls import path, include
urlpatterns = [
]
修改全局urls
cd acapp/acapp
vim urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('', include('game.urls.index')),
path('admin/', admin.site.urls),
]
js渲染函数
html返回,创建AcGame类,调用构造函数
总的zbase
2.0 版本 game/static/js/src/zbase.js
class AcGame {
constructor(id) {
this.id = id;
this.$ac_game = $('#' + id); // id用#;class用.
this.menu = new AcGameMenu(this);
this.playground = new AcGamePlayground(this);
this.start();
}
start() {
}
}
menu/zbase
cd games/static/js/src/menu
vim zbase.js
games/static/js/src/menu/zbase.js
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-field-item-single-mode">
单人模式
</div>
<br>
<div class="ac-game-menu-field-item ac-game-menu-field-item-multi-mode">
多人模式
</div>
<br>
<div class="ac-game-menu-field-item ac-game-menu-field-item-settings">
设置
</div>
</div>
</div>
`);
this.root.$ac_game.append(this.$menu);
// 三个按钮
this.$single_mode = this.$menu.find('.ac-game-menu-field-item-single-mode');
this.$multi_mode = this.$menu.find('.ac-game-menu-field-item-multi-mode');
this.$settings = this.$menu.find('.ac-game-menu-field-item-settings');
this.start();
}
start() {
this.add_listening_events();
}
// 按钮对应的操作
add_listening_events() {
let outer = this;
this.$single_mode.click(function(){
outer.hide();
outer.root.playground.show();
console.log("click single mode");
});
this.$multi_mode.click(function(){
console.log("click multi mode");
});
this.$settings.click(function(){
console.log("click settings");
});
}
show() {//显示menu界面
this.$menu.show();
}
hide() {// 关闭menu界面
this.$menu.hide();
}
}
playground/zbase
cd games/static/js/src/playground
vim zbase.js
games/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();
}
}
修改css
和js渲染函数同步进行
cd games/static/css
vim game.js
games/static/css/game.js
.ac-game-menu {
width: 100%;
height: 100%;
background-image: url("/static/image/menu/background.gif");
background-size: 100% 100%; // 按容器比例撑满,图片变形;cover图片比例不变
user-select: none; // 页面不能被选中
}
// 按钮位置
.ac-game-menu-field {
width: 20vw; // px像素, v百分比
position: relative;
top: 25vh;
left: 24vw;
}
// 每个条目的格式
.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(39,21,28, 0.6);
border-radius: 10px; // 框圆边角
letter-spacing: 0.5vw; // 字间距
cursor: pointer; // 鼠标样式
}
// 鼠标悬浮效果
.ac-game-menu-field-item:hover {
transform: scale(1.2);
transition: 100ms;
}
测试前运行脚本打包
scripts/compress_game_js.sh
上传gitLab
git add .
git commit -m "write menu and playground scene"
git push
图片看不清下载下来应该可以