创建菜单界面

配置好环境的网址：
http://124.71.40.45:8000/

我的项目地址：
https://git.acwing.com/spideymen/django_acapp

项目系统设计

主导思想：自顶向下设计，将大项目分解成几个模块，模块仍可以细分，直到每个模块可以独立地用代码实现；自底向上，先实现小模块，在逐步整合实现大模块

• menu ：菜单页面
• 单人模式
• 多人模式
• 设置
• playground ：游戏界面
• settings ：设置界面

项目文件结构

• templates 目录：管理html文件
• 由于我们的项目是一个后端对接多种前端，因此我们可以创建一个文件夹 multiends 来管理多个前端的文件
• urls 目录：管理路由，即链接与函数的对应关系
• views 目录：管理 http 函数
• models 目录：管理数据库数据
• static 目录：管理开发者静态文件，比如：
• css ：对象的格式，比如位置、长宽、颜色、背景、字体大小等
  • 一般只需要一个文件
• js ：对象的逻辑，比如对象的创建与销毁、事件函数、移动、变色等
  • 一般有几十个文件，所以分成两个文件夹
  • src :放所有的js源文件
  • dist ：将 src 里的文件整合成一个js文件后放入 dist
    • 整合可以写个脚本，放到 acapp/scripts 里。脚本代码
• image ：图片
• audio ：声音
• …
• media 目录:管理用户静态文件
• consumers 目录：管理 websocket 函数

项目编写顺序

1. 修改设置
2. 编写js整合脚本
3. 编写html
4. 编写js用于渲染html
5. 编写views函数用于返回html或数据
6. 分成三个文件夹，每个文件夹都要整合成一个python模块
7. 添加一个总的python文件 index.py ，用于返回 web.html （只会在web端被调用）代码地址
8. 写urls，将链接对应到函数
9. 分成三个文件夹，每个文件夹都要整合成一个python模块
10. 在总文件夹和三个子文件夹下添加 index.py ，将该文件路径下所有python文件路径加入进来
11. 在总文件夹的 index.py 里，把 views 里的 index 函数直接加进来，这样用户登录网站后就能直接看见html页面
12. 以上步骤完成后，整个项目的结构就搭好了剩下的就是写业务逻辑了

初步编写逻辑

AcGame对象

1. AcGameMenu对象：管理菜单界面
2. 加入一个div对象，管理背景图片，并用jquery把该对象加入到总div对象里
3. 在背景div里加入一个div管理选项
   1. 一共三个选项，每个选项都用一个div来管理
   2. 调试css样式，可以在chrome的控制台里直接调参数，调到合适后写进css文件里
4. AcGamePlayground对象：管理游戏界面
5. AcGameSettings对象：管理设置界面

程序运行逻辑

1. 用户登录网站，系统将网址http发送到 acapp/urls.py ，对应到 '' ,进入 game/urls/index.py
2. 对应 "" ，调用 game/views/index.py 里的index函数
3. 该函数接收一个request参数，渲染并返回 game/templates/multiends/web.html
4. web.html 里链接了jQuery和 game/static 的css和js文件。body里一个div负责显示整个游戏，一个AcGame对象负责渲染整个游戏界面（这步把前端渲染的任务交给了用户的电脑，减轻了服务器的运算负担）
5. AcGame对象接收显示整个游戏的div的id。对象内，通过id找到该div对象，并创建AcGameMenu和AcGamePlayground对象（还没写settings）。
6. AcGameMenu对象接收父对象AcGame为参数。内部编写一个html对象menu，将menu加入到游戏界面div里；将菜单界面三个按钮的div提取出并绑定事件（目前只有点击“单人模式”关闭菜单界面，打开游戏界面）；编写 start() 函数启动事件；编写 show() 和 hide() 函数，在跳转时关闭菜单界面，在返回时显示菜单界面
7. AcGamePlayground对象接收父对象AcGame为参数。内部编写一个html对象playground，将playground先关闭，然后加入到游戏界面div里。playground的显示由AcGameMenu里的事件触发
8. 在js编写完之后，通过脚本把所有源文件压缩到一个js文件里，不仅减少了用户下载js文件的数量，还能对代码进行压缩加密，防止抄袭

本节课用到的素材地址

• 背景图片
• 下载方式： wget --output-document=自定义图片名称 图片地址
• 下载到 static/images/menu 里
• 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>

• 这两行代码在写 web.html 时直接抄到head里就行。抄好之后还要把自己的css js 文件加入到html中

{% load static %}   <!--   文件开头加上 --> 
<link rel="stylesheet" href="{% static 'css/game.css' %}">
<script src="{% static 'js/dist/game.js' %}"></script>

需要注意的点

• models views urls 整体是作为一个python文件使用的，因此要把三个文件夹整合成三个模块。方法就是在每个文件夹里创建 __init__.py 文件
• 网站默认时间是格林尼治时间，需要在 settings.py 里的 TIME_ZONE 修改时间
• 修改设置
• 将我们创建的app加入到框架中
  • 我们创建的app game 文件夹里的 apps.py 有个 GameConfig 类
  • 进入 settings.py ，把 GameConfig 加入到 INSTALLED_APPS 里
• 将静态文件路径引入（这个直接看着仓库代码改）
• 由于我们把游戏分成了三个界面，因此每个资源文件夹里最好都有三个文件夹来对应三个界面
• web.html 里不写内容，全部用js渲染（在客户端，不在服务器），因此body里只用引入一个js文件即可
• js文件同样分成三个部分，外加一个总的文件（一个总的class）。由于会调用其他文件的函数或变量，该文件命名 zbase.js ，这样最后打包时改代码最后一个被引入，调用就不会发生错误
• 一个来自Unity的好习惯：每个对象内都写一个 start() 函数

版权信息

• 作者：yxc
• 链接：https://www.acwing.com/file_system/file/content/whole/index/content/3199626/
• 来源：AcWing
• 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。