创建项目框架
1. 项目模块
- 菜单
- 对战界面
a. 单人
b. 多人 - 设置
2. 项目创建
创建项目所需文件夹,并删除model.py views.py urls.py
存储python文件的文件夹,在每个文件夹中创建__init__.py文件
+ model
+ views 在云端运行
+ urls
如果需要import,需要文件夹里有__init__.py文件,否则会报错
需要在settings.py中修改以下内容
时区:
TIME_ZONE = 'Asia/Shanghai'
安装APPS
INSTALLED_APPS = [
'game.apps.Gameconfig', #第一行加入
# 后面不动
设置静态文件地址,STATIC_URL前加入
import os # 在第一行加入
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
在static文件夹下创建以下文件夹
+ css
+ js
+ image
+ audio
项目分为三个部分
+ 菜单—menu
+ 对战—playgroud
+ 设置—settings
为了清楚,在项目文件夹中的每一个文件夹下需要创建3个对应的文件夹,将项目划分开
测试一下,选个背景图片
进入menu文件夹中,下载图片
图片连接
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11156556256%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg
图片下载到服务器
wget --output-document=backgroud.gif https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11156556256%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg
去浏览器看一下
http://<你服务器的ip>:8000/static/image/menu/background.gif
如果不显示图片
ls查看是否下载成功
如果出现wget-log文件,cat一下,如果文件中有
2022-04-25 10:39:22 ERROR 400: Bad Request.
说明下载失败了。
在图片连接前后加上”,防止url解析错误
wget --output-document=backgroud.gif "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11156556256%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg"
刷新页面,如果还不现实,清理一下浏览器缓存,即可正常显示。
创建js文件的文件夹
一个项目有一个css文件就可以
js文件夹下一般分两个,dist和src
+ dist存储最终生成的,使用的js文件
+ src存储源文件
通过bash实现js的合并
所有bash文件可以放在一个文件夹里
#! /bin/bash
JS_PATH=/home/dzj/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
添加html文件
进入到temples
同样创建三个文件menu playground settings
为了支持多终端,创建文件夹mutiends,并添加html文件
使用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>
在mutiends目录下创建web.html文件
写入如下内容
// acapp/templates/multiends/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 styles="margin: 0">
<div id="acgame_12345678"></div> //随便起个名字
<script>
$(document).ready(function(){
let ac_game = new AcGame("acgame_12345678"); //js文件的函数名
});
</script>
</body>
添加js文件
view 在云端运行
js 在用户本地运行
在src下创建文件
menu playgroud settings
并在src下创建 总js文件 zbase.js 用这个名字是因为字典序靠后,在生成dist中js文件时,需要它最后出现,不然会错。
// acapp/game/static/js/src/zbase.js
class AcGame {
constructor(id) {
}
}
views
进入views创建三个文件夹menu playgroud settings,和 index.py 并在每一个文件夹下添加__init__.py
# acapp/game/views/index.py
from django.shortcuts import render # 渲染库
def index(request):
return render(request, "multiends/web.html")
函数完成
添加路由
在game/urls中创建menu playgroud settings, 和index.py
在三个文件夹中,创建index.py
加入内容
from django.urls import path
urlpatterns = [
]
在game/urls下的index.py中加入这三个路由
并且添加views
# game/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")),
]
进入到acapp/acapp 打开urls.py
# acapp/acapp/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('', include('game.urls.index')),
path('admin/', admin.site.urls),
]
框架就搭建起来了
在网页中输入服务器公网ip:8000后,路由过程
搭建框架的顺序
|-- README.md |-- acapp | |-- __init__.py
| |-- settings.py ----------------------------------------------2
| |-- urls.py ----------------------------------------------12
|-- db.sqlite3
|-- game ----------------------------------------------1
| |-- __init__.py
| |-- admin.py
| |-- apps.py
| |-- migrations
| | |-- __init__.py
| |-- models ----------------------------------------------3
| | |-- __init__.py
| |-- static ----------------------------------------------4
| | |-- audio
| | |-- css
| | | `-- game.css
| | |-- image
| | | |-- menu
| | | | `-- backgroud.gif
| | | |-- playgroud
| | | `-- settings
| | `-- js -----------------------------------------------5
| | |-- dist
| | | `-- game.js
| | `-- src
| | |-- menu
| | |-- playground
| | |-- settings
| | `-- zbase.js ------------------------------------------8
| |-- templates ----------------------------- -----------------6
| | |-- menu
| | |-- mutiends
| | | `-- web.html -------------------------------------------7
| | |-- playground
| | `-- settings
| |-- tests.py
| |-- urls --------------------------------------------------3
| | |-- __init__.py
| | |-- index.py -----------------------------------------------11
| | |-- menu
| | | |-- __init__.py
| | | `-- index.py ---------------------------------------------11
| | |-- playground
| | | |-- __init__.py
| | | `-- index.py ---------------------------------------------11
| | `-- settings
| | |-- __init__.py
| | `-- index.py ---------------------------------------------11
| `-- views --------------------------------------------------3
| |-- __init__.py
| |-- index.py ---------------------------------------------9
| |-- menu
| | `-- __init__.py
| |-- playground
| | `-- __init__.py
| `-- settings
| `-- __init__.py
|-- manage.py
`-- scripts ----------------------------------------------------6
`-- compress_game_js.sh
开始菜单
创建菜单界面对象
/game/static/js/src/menu/zbase.js
class AcGameMenu {
constructor(root) {
this.root = root;
this.$menu = $(`
<div class="ac-game-menu">
</div>
`);
this.root.$ac_game.append(this.$menu);
}
}
并且同步添加css
/game/static/css/game.css
.ac-game-menu {
width: 100%;
height: 100%;
background-image: url("/static/image/menu/background.gif");
background-size: 100% 100%;
user-select: none;
}
将对象添加到
/game/static/js/src/zbase.js
class AcGame {
constructor(id) {
this.id = id;
this.$ac_game = $('#' + id);
this.menu = new AcGameMenu(this);
}
}
添加页面的选项:
/game/static/js/src/menu/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);
}
}
更新开始菜单的选项:
/game/static/css/game.css
.ac-game-menu {
width: 100%;
height: 100%;
background-image: url("/static/image/menu/background.gif");
background-size: 100% 100%;
user-select: none;
}
// -------------------------------------新加内容
// (选项div
.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;
}
更新点击按钮的动作
/game/static/js/src/menu/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");
});
}
}
创建playground界面
/game/static/js/src/playground/zbase.js
在未点击按钮时,应该只显示menu页面,playground页面应当在点击单人或多人游戏后显示。
用hide() 隐藏页面,用show() 显示页面
class AcGamePlayground {
constructor(root) {
this.root = root;
this.$playground = $(`<div>游戏界面</div>`);
this.hide();
this.root.$ac_game.append(this.$playground);
this.start();
}
start() {
}
show() {
this.$playground.show();
}
hide() {
this.$playground.hide();
}
}
在menu中加入点击单人模式跳转到playground的动作
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() {
this.$menu.show();
}
hide() {
this.$menu.hide();
}
}
在根js加入playground的页面
/game/static/js/src/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(){
}
}
小tips
更改js之后,要重新打包一下再刷新页面
评论区 owen1同学的分享:
项目js文件修改后chrome不能及时更新的解决办法:
F12 -> 网络 -> 勾上停用缓存。
看了那个图我就想给你star
我照抄的怎么不显示图片,按钮还在左上方
改一下谢谢
多谢提醒
经常被拼写错误搞的心态爆炸
http://<你服务器的ip>:8000/static/image/menu/backgroud.gif
我是强迫症
哈哈哈哈哈 我是该好好检查的
hh
由于我太懒所以我一般把function(){}
写成()=>{}
习惯
不过
function(){}
看起来更清晰很用心