二、创建菜单界面

胤凯o

已于 2022-09-23 17:23:18 修改

阅读量614

点赞数

分类专栏： django笔记文章标签：游戏

于 2022-09-19 13:36:00 首次发布

本文链接：https://blog.csdn.net/m0_62264224/article/details/126931982

版权

django笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这是实现后的效果：

项目系统设计

menu：菜单页面
playground：游戏界面
settings：设置界面
项目文件结构
templates目录：管理html文件
urls目录：管理路由，即链接与函数的对应关系
views目录：管理http函数
models目录：管理数据库数据
static目录：管理静态文件，比如：
css：对象的格式，比如位置、长宽、颜色、背景、字体大小等
js：对象的逻辑，比如对象的创建与销毁、事件函数、移动、变色等
image：图片
audio：声音
…
consumers目录：管理websocket函数

----------整理项目结构

1.创建文件夹templates #用于存放所有的html文件

2.将urls和views改成文件夹 #当文件较多时，方便分类管理

3.创建static文件夹 #用于存放静态文件

4.因为views、urls、models是python文件，后续需要将他们引用出来，所以需要分别在这三个文件夹里创建__init__.py
在game目录下，

touch views/__init__.py
touch urls/__init__.py
touch models/__init__.py

5.进入acapp/acapp目录下的urls.py文件，将之前的自己添加的路由注释掉,如下：

#path('', include('game.urls')),

6.统领全局，修改时区，将时间与北京时间进行统一：
进入acapp/acapp目录，找到"settings.py"，找到"TIME_ZONE"，将UTC改成"Asia/Shanghai"，注意大小写不能错

7.在game目录下，有一个apps.py，这里有一个app已经创建，我们需要手动将这里面的GameConfig加入到我们的全局配置文件settings.py里，找到INSTALLED_APPS，在里面加入'game.apps.GameConfig'。

8.设置静态文件的地址：
static存开发者文件 media存用用户文件

在文件最后加入三句话：

STATIC_ROOT = os.path.join(BASE_DIR, 'static') # 静态文件存在项目目录的哪一个文件夹里

#下面两句话暂时用不到先不讲了

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/mdeia/'

在文件开头，加入os包：

import os

设置之后重新启动一下服务器

9.在game/static中创建css、js、image文件夹：mkdir css js image
在image文件夹里创建menu、playground、settings三个文件夹，对不同类别的图片进行分类管理
在menu中输入

wget --output-document=bcground.gif https://git.acwing.com/ft666/acapp/-/raw/master/static/image/menu/Backgroundpicture.gif

下载菜单背景图片

在浏览器中输入http://106.55.250.226:8000/static/image/menu/bcground.gif，即可访问到我们的图片，说明下载成功

10.在css文件夹中创建game.css文件
在文件中写入：

.ac_game_menu{

}

在浏览器中输入http://106.55.250.226:8000/static/css/game.css即可访问

11.管理js文件：分成两个文件夹dist、src
mkdir dist src #创建文件夹
dist存放完整的js文件 src存放分散的文件，通过操作放到dist中

写脚本完成将src中的文件汇总到dist中：
在项目根目录acapp下创建一个文件scripts，用于存放脚本

mkdir scripts

进入scripts文件夹，创建压缩文件compress_game_js.sh:
vim 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`

给该脚本加上可执行权限：chmod +x compress_game_js.sh
./compress_game_js.sh，执行之后，在dist文件夹中会出现一个game.js，则说明脚本实现成功
12.git 一下代码，步骤不再重复，
注意修改一下 .gitignore文件，加入一行代码 *.swp，上传代码时忽略这些缓存文件13.进入templates文件夹，创建架构：
mkdir menu playground settings multiends
在multiends文件夹中创建文件web.html # 用于写网页端的页面
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>`

注释：1.这里引用了jquery的库，这样就可以用里面的语法塘
2.{% static 'css/game.css' %}，这里可以利用django快速查找文件的方法，找到static文件夹下的css下的game.css文件
在开头加上{% load static %}，就可以这样使用了
3.未来的界面都是在 js 中 AcGame 渲染的（这样就在前端渲染，不给服务器压力）14.继续细分js，在js下的src文件夹中创建三个文件夹：menu playground settings
创建文件zbase.js #打包工具安装字典序打包，总的class应该放在最后，所以这样能保证总的class会放在最后
文件内容如下：
`

class AcGame {
        constructor(id) {
        this.id = id;
        this.$ac_game = $('#' + id);
        this.menu = new AcGameMenu(this);
        this.playground = new AcGamePlayground(this);

        this.start();
        }

        start() {
        }
    }

15.写views：
在acapp/game/views下，创建menu playground settings

mkdir menu playground settings

在三个文件夹中分别加入__init__.py文件：

touch menu/__init__.py
touch playground/__init__.py
touch settings/__init__.py

在acapp/game/views下，创建index.py文件（总的视图文件）：
vim index.py
文件内容如下：
`

from django.shortcuts import render#调用django渲染页面的函数


              def index(request):
                  return render(request, "multiends/web.html")

16.写urls：在/acapp/game/urls下，创建menu playground settings 文件夹
mkdir menu playground settings

在每个文件夹中都加入__init__.py文件；在当前文件夹下创建index.py,内容如下：
`

from django.urls import path, include
      from game.views.index import index


      urlpatterns = [
          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")),
      ]

` 为了将 menu.index 、 playground.index 与 settings.index 引入，我们需要在相应模块创建 index.py
内容都如下：
`

from django.urls import path, include


          urlpatterns = [
          ]

这样/acapp/game/urls下的index就可以include刚刚定义的所有文件了。

然后去修改全局的urls：
将刚刚注释的部分写成 path('', include('game.urls.index')),

到这里项目结构配置就结束了

17.git一下代码

----------开始写js渲染函数1./acapp/game/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');

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

2.渲染playground对象：
/acapp/game/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();
    }
}

3.编写样式css：
/acapp/game/static/css$ vim game.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(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;
}

4.最后进行打包，在网页运行即可