文章目录

创建菜单界面
- 项目系统设计
- 项目文件结构
- 素材地址
- 创建文件项目
- 配置settings.py
- 配置项目架构
- 配置tempaltes管理html
- 配置js
- 配置views
- 配置urls
- 编辑菜单界面
- - 配置menu的js
  - 添加按钮
  - 添加按钮

创建菜单界面

项目系统设计

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>

创建文件项目

rm urls.py views.py models.py 删除文件，以便创建文件夹
mkdir tempaltes 管理目录
mkdir urls 存储链接
mkdir views 管理函数
mkdir models 管理数据库
mkdir static 管理静态文件

每个文件夹下都要创建__init__.py 文件

touch __int__.py  创建索引文件防止无法import(目前仅在 urls views models文件夹下创建)

配置settings.py

acapp/settings.py 中修改时区 108行

TIME_ZONE = 'Asia/Shanghai'

在这里插入图片描述
在apps.py的GameConfig函数加入到settings.py中

INSTALLED_APPS = ['game.apps.GameConfig',]

指定静态文件最终的存储路径(一般static存储开发者，media存储用户)

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

配置项目架构

在static文件夹中创建css,js,image文件夹。
其中image文件夹用于存放菜单，游戏界面，设置的背景图片，使用wget命令下载背景图片：

cd static
mkdir css js imagecd image
mkdir menu playground settings 菜单 背景 设置(在大部分文件夹都进行创建以便项目修改)
cd menu
wget --output-document=自定义图片名称 图片地址

在这里插入图片描述
可以通过 http://8.130.51.245:8000/static/image/menu/image1.jpeg 访问

创建css文件js文件

cd css
touch game.css
cd js
mkdir dist src

在acapp里创建scripts文件夹,
vim compress_game_js.sh 创建一个整合的脚本
该脚本用于将src的js文件整合为一个文件存放在dist文件夹

#! /bin/bashJS_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

添加权限

chmod +x compress_game_js.sh

配置tempaltes管理html

在tempaltes中创建menu，palyground，settngs。multiends四个文件夹，在multiends中编写web.html

mkdir menu playground settings
mkdir multiends 
cd multiends 
vim web.html

在 templates下创建 web.html，因为用到了jQuery库，所以需要在标签中加入以下语句：
web.html

{% 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' %}"><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>

未来的界面都是在 js 中 AcGame 渲染的（这样就在前端渲染，不给服务器压力）

然后就可以使用$()对标签的id，class进行选择并进行各种逻辑的实现
由于是前后端分离，我们只需要在html中编写一小段 js代码，把用户的 id传入，并创建对应的 AcGame类，在 AcGame类中再加入 AcGameMenu和 AcGamePlayground，利用 append函数实现，页面跳转直接通过调用 show()和 hide()的 api接口来实现，所以跳转后想要返回只能通过刷新网页来实现

配置js

在js/src内创建 menu playground settings 三个文件夹

./compress_game_js.sh (进行一次打包)

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() {}
}

配置views

在views文件夹内创建menu playground settings 三个文件夹，并在每个文件夹内创建__init__.py
index.py：用于返回html文件
render是指渲染html文件

from django.shortcuts import render
def index(request):return render(request, "multiends/web.html")

配置urls

同上配置3个文件夹并写__init__.py
在urls下创建index.py用于include其他文件夹下的urls
index.py

from django.urls import path, include
from game.views.index import indexurlpatterns = [path("", index, name="index"),path("menu/", include("game.urls.menu.index")),path("playground/", include("game.urls.playground.index")),path("settings/", include("game.urls.settings.index")),
]

在另外三个文件夹下都创建index.py

from django.urls import path
urlpatterns = [
]

在这里插入图片描述
还需修改全局urls

cd ~/acapp/acapp 修改全局的urls.py
vim urls.py
修改为 path('', include('game.urls.index')),

编辑菜单界面

配置menu的js

此时根据页面源码，是先创建了一个AcGame对象，然后我们需要在AcGame对象的构造函数中创建AcGameMenu对象，之后再到AcGmesMenu对象的构造函数中去实现页面的内容。

进入static/js/src，写总的js，vim zbase.js：

class AcGame {constructor(id) {this.id = id;this.$ac_game = $('#' + id);   //将对象的id赋给ac_gamethis.menu = new AcGameMenu(this);  //创建菜单对象，调用其构造函数}
}

menu的js文件

class AcGameMenu{constructor(root){   //构造函数，传入acgame对象this.root=root;this.$menu=$(`
<div class="ac-game-menu">
</div>
`);this.root.$ac_game.append(this.$menu);}
}

game.css

.ac-game-menu {width: 100%;height: 100%;background-image: url("/static/image/menu/background.jpg");background-size: 100% 100%;user-select: none;
}

在这里插入图片描述
显示背景图

添加按钮

进入static/js/src/menu vim 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');}
}

更新game.css

.ac-game-menu {width: 100%;height: 100%;background-image: url("/static/image/menu/background.jpg");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: pink;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: 27px;letter-spacing: 0.5vw;cursor: pointer;
}.ac-game-menu-field-item:hover {    /*悬浮效果*/transform: scale(1.2);transition: 100ms;
}

添加按钮

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函数}start() {            //定义start函数this.add_listening_events();}add_listening_events() {    //监听函数let outer = this;this.$single_mode.click(function(){  //当被点击时调用outer.hide();outer.root.playground.show();});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();}
}

在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();}
}

在scr/zbase.js 内添加playground

class AcGame {constructor(id) {this.id = id;this.$ac_game = $('#' + id);this.menu = new AcGameMenu(this);this.playground = new AcGamePlayground(this);//console.log("create ac game");this.start();}start() {}
}

在这里插入图片描述
单人模式如下：