人工智能：Django的学习，下象棋的小游戏

一、思路分析

二、具体操作步骤

1.首先建立一个文件

• 在你想要的路径下面建立一个关于游戏的文件夹，可以命名为game
• 为了便于文件的整理，以及游戏的运行，这个文件最好不要放在桌面。
  

2.建立成功后需要在建立一个chess文件夹

3.文件建立成功后，用pyCharm打开该文件

• 进去以后就会默认建好以下文件
  

4.在chess文件夹中新建static

• 新建一个静态文件夹用于存放网页源码（css，js）
• 操作步骤如下图所示
  
• 建立成功后的截图展示
  

5.设计网页主界面样式index.css

• 在建立的css文件中新建index.css
  

• 成功建立开始代码编辑
  

• 这个界面可以根据自己的审美和喜好建立，这里只是给一个参考

• 代码提示：

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #ececec;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    -khtml-user-select:none;
    user-select:none;
}
#ground{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
#board{
    width: 401px;
    height: 451px;
    padding: 30px;
    background-color: #8f7a66;
    position: relative;
    top: 45%;
    left: 0;
    right: 0;
    margin: -220px auto;
    border: 3px solid rgb(192, 166, 137);
    border-radius: 2px;
    box-shadow: 0 0 25px rgba(143, 97, 76, 0.35);
}
#board #line{
    width: 100%;
    height: 100%;
}
#board #line #rows{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#board #line #lines{
    width: 100%;
    height: 100%;
    position: relative;
    top: -100%;
    overflow: hidden;
}
#board #line .row{
    width: 100%;
    height: 1px;
    background-color: #571b16;
    margin-bottom: 49px;
}
#board #line .line{
    width: 1px;
    height: 100%;
    background-color: #571b16;
    margin-right: 49px;
    float: left;
}
#board #line .end{
    margin: 0;
}
#board #line #river{
    width: 461px;
    height: 100%;
    position: relative;
    top: -200%;
    left: -30px;
}
#board #line #river article{
    position: relative;
    top:201px;
    width: 100%;
    height: 49px;
    background-color: rgba(143, 122, 102, 0.95);
    /*background-image: url("ass/Riv.png");*/
    box-shadow: inset 0 0 25px rgba(79, 139, 191, 0.55);
    font-family: Arial,sans-serif;
    font-size: 45px;
    text-align: center;
    letter-spacing: 1px;
    color: #817c77;
    opacity: 0.95;
}
#board #flower{
    width: 100%;
    height: 100%;
    position: relative;
    top: -300%;
    overflow: hidden;
}
#board #flower article{
    width: 25px;
    height: 25px;
    position: relative;
    left: 37px;
    top: 37px;
    float: left;
    border: 1px solid rgba(134, 42, 3, 0.55);
    transform:rotate(45deg);
}
#board #flower .L2{
    width: 100%;
    height: 50px;
}
#board #flower .L5{
    width: 100%;
    height: 50px;
}
#board #flower .L2 article:nth-child(2)
{
    margin-left: 273px;
}
#board #flower .L5 article:nth-child(1n+2)
{
    margin-left: 73px;
}
#board #flower .L5 article:nth-child(1)
{
    margin-left: -50px;
}
#board #flower .L5 article:nth-child(2)
{
    margin-left: 50px;
}
#board #flower #F{
    margin-top: 50px;
    height: 200px;
}
#board #cross{
    width: 100%;
    height: 100%;
    position: relative;
    top: -400%;
}
#board #cross #T{
    width: 100%;
    height: 200px;
    margin-bottom: 51px;
}
#board #cross #B{
    width: 100%;
    height: 200px;
}
#board #cross article{
    margin: 0 auto;
    width: 140px;
    height: 1px;
    position: relative;
    top: 50px;
    background-color: #752e2b;
}
#board #cross article:nth-child(1){
    transform:rotate(45deg);
}
#board #cross  article:nth-child(2){
    margin-top: -1px;
    transform:rotate(-45deg);
}
#board #cross #B article{
    position: relative;
    top: 149px;
}
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

6.数据填充进模板将结果返回给浏览器

• 导入Django中的render函数。
• render方法可以接受三个参数，一个request参数，二是待渲染的html模板文件，三是保存具体数据的字典参数。
• 补充知识点：redirect接受URL参数，表示让浏览器跳转去指定的URL

def index(request):
    return redirect("https://blog.csdn.net/miaoqinian")
1
2

• 它的作用就是将数据填充进模板文件，最后把结果返回给浏览器。
• 补充知识点：HttpResponse，它的作用是内部传入一个字符串参数，然后发给浏览器。

def index(request):
    # 业务逻辑代码
    return HttpResponse("OK")
1
2
3

• 在视图函数（view）中的操作代码展示如下：

from django.shortcuts import render


# Create your views here.
def index(request):
    return render(request, 'index.html')
1
2
3
4
5
6

• 如果此时运行后台服务器，将会报错，出现以下内容：
  

三、注意的地方

注意（1）

如果出现了python: can't open file 'manage.py': [Errno 2] No such file or directory这个语句的话就是没有进入game文件中，此时需要先进入到game中，语句是cd game

注意（2）

• 如果进入了game还依然报错的话，看一下是不是下列图片中的语句
  
• 解决办法就是激活dj
  
• 进入之后的界面展示：
  

四、存在的不足