卡坦岛是一款类似《文明》系列游戏的桌游，玩家要在由六边形组成的地图上发展自己的定居地与城市，以此累积胜利点，最先达到10点胜利点的玩家将获得游戏胜利。本系列专栏就将从零开始，在浏览器上实现这个游戏。图片来源：百度百科

前言：我觉得我那140位粉丝应该已经把我忘掉了，非常抱歉发专栏打扰你们，在这个东西更完之后会再更一首v家调教(大概，咕咕咕)，对这期专栏教学感兴趣的小伙伴也请多多支持~

该教程适合哪些人？

在本教程的起步阶段，只需要有最基本的C语言等计算机语言的编程经验，即可开始学习，之后只要跟随教程内容推进并学习，就可以较为轻松完成网页搭建的所有内容。如果读者已经有足够的网站搭建经验，那么也许只有制作游戏部分会有一定帮助。

教学流程

教学的1至3天，本教程会协助你，将开发该网站所需的所有工具配置完毕，并学会使用框架的基本流程，至此你可以通过自学来完成个人小网站的开发。在教学的4至9天，本教程会进一步学习Django框架的channels插件来实现即时通信，并以此逐步实现棋牌类游戏的交互，至此你可以自己进行类似游戏的设计与调整。在教学的第10天，教程会提供国内服务器的配置方式，域名的购置，部分优化方案，至此，你可以将自己的游戏放在服务器上，与小伙伴们一同快乐的玩耍~

关于作者

作者的技术其实也不太高，大部分内容都是从官方文档以及搜索引擎上学来，设计部分难免会有问题，如果有阅读过程中有任何疑惑、指正或是发现了更好的解决方式都欢迎在评论区指出。

正文：

一、环境配置

语言、库、工具

1. Python

Python是一门脚本语言，面向对象语言。相较于C语言，Python拥有丰富的库以及及其简单的库安装工具，让你不需要为各种细枝末节的事情焦头烂额，专心于你的设计主题。

Python的安装：前往Python网站，下载windows64位系统的安装包即可简单地完成安装。

如果是32位的系统下载32的安装包即可。目前Python的最新版本为3.7

需要注意的是，请将安装时的”Add Python3.7 to PATH”选项勾上，软件会自动将编译器添加入环境变量，关于环境变量的内容之后会提到。

安装完成后，按win+R，输入cmd进入终端。

以后这个操作会非常频繁，牢记哦

输入python，显示如下信息之后即说明安装成功：显示>>>即说明进入了python的shell，此时输入内容都是执行python的代码

按Ctrl+Z退出python内部shell。

如果提示没有文件，有可能是你在Visual Studio等IDE中安装过而未配置环境变量，此时需要检查环境变量。

右键点击“我的电脑“，选择属性，在弹出的页面中选择“高级系统设置”。

选择高级-环境变量。

选择“系统变量”中的Path，并点击编辑。部分系统的环境变量设置不会弹出新窗口，而是跟在字符串后面，接在后面写即可

点击“新建”，将之前python的安装目录填入，之后保存即可。

关闭cmd重新开启一个再次输入python进行尝试。

原理：当你输入python时，系统会检索该目录下所有名字叫做python的程序，同时也会检索所有环境变量目录里的python程序，只有python的安装目录下有一个python.exe，因此如果不把其添加入环境变量，要运行python就必须一层层进入python的安装目录。

2.Django

作为一个有登录注册等功能的网站，数据库是必须要有的，也因此我们需要一个能够灵活处理数据与请求的后端。Django是一个非常方便的后端框架，能够根据数据库或参数内容自由生成html，适合初学者进行学习。

要安装Django，首先要安装Python。

Python安装各类库的方式非常简单，使用python安装目录下的pip.exe即可快捷下载各类库。

按下win+R，输入cmd进入终端，输入pip install django 即可，系统会自动安装。

绝大部分与Django有关的依赖库也会被一并安装，但由于Django的镜像大多在墙外，直连下载失败率很高，建议前往官方网站https://www.djangoproject.com/download/，

选择下载，解压出.tar文件后使用 pip install (+tar文件位置)命令即可进行本地安装(虽然很多库依然会下载，还是一样的失败率奇高……)

安装完成后输入django-admin，显示如下文字说明安装成功。

3.channels

channels是Django上的websocket支持库，作用是让服务器与客户端有长时间稳定的连接。具体内容在后面的教学中会提到。

要安装Channels，首先要安装Python。

在终端中输入pip install channels即可安装channels。

4.channels-redis

channels-redis是channels的一个组件，作用是让服务器除了与客户端有长时间稳定的连接外，还可以访问相同进程的共享变量，达到不同使用者即时共享消息的目的。具体内容在后面的教学中会提到。

在终端中输入pip install channels-redis即可安装channels-redis。

5.redis

redis是channels-redis所依赖的程序(对就是这么绕，一层层像套娃一样= =)，它是一个泛用的内存共享程序，作用就是让多个程序可以访问同一个变量达到信息传递的作用。

在官方网站https://redis.io/下载redis，解压到任意位置，用cmd终端运行其中的redis-server即可运行redis，不需要安装，为了方便可以将redis的文件目录放入环境变量。

6.pypiwin32

pypiwin32同样是channel的一个依赖，在cmd终端中输入pip install pypiwin32即可安装。

以上所有内容都是为后端准备，那么前端需要哪些库呢？

需要注意的是，以下的前端库实际上不需要下载，引用专门的CDN网站即可，内容仅供了解。

7.jquery.js

jquery是一个简单、高效的js工具库，可以方便对网页中的各种元素的出现、消失、动画效果以及其他复杂内容进行设置。

可以在官方网站https://jquery.com/下载最新版jquery.js，官方提供压缩版与源码版，使用任意版本皆可。jquery本体只有一个文件，届时只需要让浏览器读取jquery.js即可使用其丰富的功能。

8. Bootstrap

Bootstrap是一个前端设计工具，平时是不是经常看见很多网站的按钮长得几乎一模一样？他们都是使用了Bootstrap的按钮样式。借助Bootstrap，可以用很少的步骤就做出一个看着有模有样的html。本次教学中使用Bootstrap的地方不多，主要是使用按钮样式，其优秀的布局结构基本被我糟蹋得一塌糊涂……

建议通过引用网上库的方式使用Bootstrap，因为其内容比较杂，版本繁多，且教学中使用Bootstrap的地方并不多，因此写网页时引用各大教学网站或者专门提供在线库的Bootstrap即可。具体引用会在后面的教学中提到。

9.Javascript、html、css

这三者是网页前端的三大内容，不过不需要下载，他们都内置入了浏览器，届时打开浏览器即可查看。

说完了语言与库，接下来了解一下敲代码时的各个工具。

编辑器：Sublimetext3、vscode

用记事本来敲代码肯定是一场噩梦，使用专业的代码编辑器可以让你大大加快敲代码的速度。

Sublimetext3非常轻量(不到20mb)，但它支持各种流行语言的语法和格式校正，按ctrl+B即可呼叫编译器进行编译，还有着丰富的插件，尽管这是收费软件，但它有无限长的试用期(迫真)，因此只要忽略掉标题栏上的[UNREGISTED]就可以安心敲代码啦~，在官网http://www.sublimetext.cn/即可下载。

Vscode同样是一款非常好用的代码编辑器，由微软推出。由于对其并不熟悉，因此感兴趣的同学可以自行搜索教程进行下载。

浏览器：Chrome

当然这并不是固定的选择，推荐Chrome只是因为它非常快，并且之后的教学也会使用Chrome进行内容展示，因此推荐该浏览器。

思维整理：幕布

同样是备选软件，这是一个轻量的文字记录软件，特点在于层级结构功能，它可以让你先写好大体思路再心无旁骛地添加细节，强烈推荐

至此，所有开发网站所需要的软件和库已经备齐，可以准备进行第一个个人网站的开发了。

再次提示：作者技术不精，如果有阅读过程中有任何疑惑、指正或是发现了更好的解决方式都欢迎在评论区指出，拜~