文章目录
创建菜单界面
项目系统设计
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 image
cd 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/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
配置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 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")),
]
在另外三个文件夹下都创建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_game
this.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() {
}
}
单人模式如下:
文章评论