访问地址
项目地址

创建Django项目和APP

  1. 创建Django项目

    1
    django-admin startproject acapp # acapp为你的项目名称

  2. 通过git维护项目

    git帮助文档

    /posts/4ac0a166/#git

  3. 在git项目下创建.gitignore文件，用来过滤不必上传的文件

  4. 创建APP

    1
    python3 manage.py startapp game # game为你的应用名称

  5. 运行项目

    1
    python3 manage.py runserver 0.0.0.0:8000

  6. 更新数据

    1
    python3 manage.py migrate

  7. 创建管理员账号

    1
    python3 manage.py createsuperuser

创建项目基本结构

  1. 进入acapp中的acapp文件夹，修改setting.py配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # 在开头导入os
    import os
    # (app.py的GameConfig函数加入到setting.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/'

  2. 进入game文件夹，创建项目基本文件夹

    1
    2
    3
    4
    5
    6
    rm urls.py views.py models.py # 删除文件，以便创建文件夹
    mkdir tempaltes # 管理html文件
    mkdir urls # 管理路由，即链接与函数的对应关系
    mkdir views # 管理http函数,实现页面切换
    mkdir models # 管理数据库数据
    mkdir static # 管理静态文件

  3. 由于urls和views文件夹用来存放python代码，需要在该目录下创建__init__.py方便导入

    1
    2
    3
    # 以urls文件为例
    cd urls
    touch __init__.py

  4. 在static等文件夹下，继续创建css、js、image、audio文件夹

    1
    2
    cd static
    mkdir css js image audio

  5. 在image文件下，根据app模块再新建文件夹，audio文件夹类似

    1
    2
    cd image
    mkdir menu playground settings # 菜单 背景 设置(在大部分文件夹都按照这样的分类创建)

  6. 接着进入image文件夹中的menu，下载图片

    1
    2
    3
    cd menu
    # wget --output-document=自定义图片名称 图片地址
    wget --output-document=background.png https://pic.imgdb.cn/item/61c682cf2ab3f51d9173e049.png

  7. 返回static文件夹，进入css文件夹

    1
    2
    3
    cd css
    # 这里一般只需要一个css文件，一个app应用使用一个css文件，当然也可以创建多文件夹
    touch game.css

  8. 返回static文件夹，进入js文件夹

    1
    2
    cd js
    mkdir dist src  # 最终生成(使用)的js文件 js原文件(开发者操作的js文件)

  9. 返回acapp起始目录，新建scripts文件夹，并在其中编写整合/js/src文件的脚本

    1
    2
    3
    mkdir scripts # 创建一个存放脚本文件的文件夹
    vim compress_game_js.sh
    chmod +x compress_game_js.sh # 增加执行权限
    compress_game_js.sh
    1
    2
    3
    4
    5
    6
    7
    #! /bin/bash

    JS_PATH=/home/jezer/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

    shell帮助文档

    /posts/4ac0a166/#shell

  10. 退出static文件，进入tempaltes文件夹

    1
    2
    mkdir menu playground settings
    mkdir multiends # 用来在各种前端显示（web，app等）

创建菜单界面

  1. 进入tempaltes下的multiends文件夹

    1
    2
    cd multiends
    vim web.html
    web.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    {% 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>

    html帮助文档

    /posts/98f3a6d9

  2. 配置views文件夹

    1
    2
    3
    mkdir menu playground settings
    touch __int__.py # 三个文件夹都进行创建
    vim index.py # view目录下
    index.py
    1
    2
    3
    4
    from django.shortcuts import render

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

  3. 配置urls

    1
    2
    3
    4
    cd /game/urls
    mkdir menu playground settings
    touch __int__.py # 三个文件夹都进行创建
    touch index.py # 三个文件夹及urls下均创建
    (root)index.py
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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、playground、settings)index.py
    1
    2
    3
    4
    5
    from django.urls import path

    urlpatterns = [

    ]
    1
    2
    3
    # 修改全局urls
    cd ~/acapp/acapp
    vim urls.py

    添加path('', include('game.urls.index')),

  4. 进入/js/src文件下，创建代码（一般在每个js源文件夹下会新建zbase.js)

    1
    2
    3
    4
    5
    cd /game/static/js/src
    # 根据模块新建文件夹
    mkdir menu playground settings
    # 在/js/src目录下，新建zbase.js
    vim zbase.js
    (root)zbase.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    class AcGame {
        constructor(id) {
            this.id = id;
            this.$ac_game = $('#' + id);
            this.menu = new AcGameMenu(this);
            this.playground = new AcGamePlayground(this);

            this.start();
        }

        start() {
        }
    }

  5. 分别进入/js/src下的menu和playground文件夹，编写zbase.js代码

    (menu)zbase.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    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();
        }
    }
    (playground)zbase.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    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();
        }
    }

  6. 进入/static/css文件下，编写game.css

    game.css
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    .ac-game-menu {
        width: 100%;
        height: 100%;
        background-image: url("/static/image/menu/background.png");
        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;
    }

    css帮助文档

    /posts/95f6ae7f

  7. 返回acapp目录下的scripts，执行js整合脚本

    1
    2
    cd ~/acapp/scripts
    ./compress_game_js.sh