用Python做2048游戏 网易云课堂配套实验课。通过GUI来体验编程的乐趣。

第1节
认识wxpython
第2节
画几个形状
第3节
再做个计算器
第4节
最后实现个2048游戏

实验1-认识wxpython

一、实验说明

1. 环境登录

无需密码自动登录，系统用户名shiyanlou

2. 环境介绍

本实验环境采用带桌面的Ubuntu Linux环境，实验中会用到桌面上的程序：

1. LX终端（LXTerminal）: Linux命令行终端，打开后会进入Bash环境，可以使用Linux命令
2. Firefox：浏览器
3. sublime/GVim：好用的编辑器
4. git，用于获得参考代码

3. 环境使用

使用GVim编辑器输入实验所需的代码及文件，使用LX终端（LXTerminal）运行所需命令进行操作。

二、课程介绍

课程目的：

熟悉实验环境
了解wxpython
能运行出一个窗口
理解ClientDC和PaintDC的区别

课程环境已装好wxpython，配套代码仓库

http://git.shiyanlou.com/heibanke/shiyanlou_cs427

获得参考代码敲命令 git clone 上面的代码仓库

1. wxpython

wxpython是基于Python的GUI库，优点如下：

1. 跨平台，32-bit Microsoft Windows，大多数Unix/Linux，Mac
2. 开源免费
3. 简单易用

官方文档链接

不错的英文教程适合系统的学习各种控件的使用。

<>还不错的中英文版书籍，网上很容易搜到电子版

2. 运行一个窗口

直接实例化

import wx
# 每个wxPython的程序必须有一个wx.App对象.
app = wx.App()
# 实例化一个frame
"""
None: 当前窗口的父窗口parent，如果当前窗口是最顶层的话，则parent=None,如果不是顶层窗口，则它的值为所属frame的名字
-1: id值, -1的话程序会自动产生一个id
pos: 位置
size: 宽，高大小
还有风格参数style，不填默认是这样几个的组合
wx.MAXIMIZE_BOX| wx.MINIMIZE_BOX| wx.RESIZE_BORDER|wx.SYSTEM_MENU| wx.CAPTION| wx.CLOSE_BOX
你可以去掉几个看看效果，比如
style = wx.SYSTEM_MENU| wx.CAPTION| wx.CLOSE_BOX
"""
frame = wx.Frame(None, -1, title='wx_00_base.py', pos=(300,400), size=(200,150))
# 居中处理
#frame.Centre()
# 显示frame
frame.Show()
# 进入循环，等待窗口响应
app.MainLoop()

3. 定义Frame子类的方式

#coding=utf-8
import wx
class Example(wx.Frame):
def __init__(self, title):
    super(Example, self).__init__(None, title=title,
        size=(600, 400))
    self.Centre()
    self.Show()
if __name__=="__main__":
    app = wx.App()
    Example('Shapes')
    app.MainLoop()

上面两种方式是一致的。

4. 接下来画一条线

# -*- coding: utf-8 -*-
import wx
class Example(wx.Frame):
    def __init__(self, title):
        super(Example, self).__init__(None,title=title,
            size=(250, 150))
        self.Centre()
        self.Show()
        dc = wx.ClientDC(self)
        # 画一条线，参数为起始点的x,y，终点的x,y
        dc.DrawLine(50, 60, 190, 60)
if __name__ == '__main__':
    app = wx.App()
    Example('Line')
    app.MainLoop()

试着把窗口resize到很小，然后再放大，你会发现什么。(没有绑定EVT_PAINT之前，线只绘制一次，如果Resize窗口小到不能显示完整的线，然后再把窗口回复原样，则不能显示的线无法恢复。)

5. 使用PaintDC

# -*- coding: utf-8 -*-
import wx
class Example(wx.Frame):
    def __init__(self, title):
        super(Example, self).__init__(None, title=title,
            size=(250, 150))
        # 绑定渲染窗口的动作到OnPaint
        # 这样当resize窗口，会重新调用该函数
        self.Bind(wx.EVT_PAINT, self.OnPaint)
        self.Centre()
        self.Show()
    # 画一条线，参数为起始点的x,y，终点的x,y
    def OnPaint(self, e):
        dc = wx.PaintDC(self)
        dc.DrawLine(50, 60, 190, 60)
if __name__ == '__main__':
    app = wx.App()
    Example('Line')
    app.MainLoop()

运行后试着resize窗口，绑定事件后，由于Resize会调用该绑定函数，因此线就在那里，无论你怎么resize。

最后我们把画一根线替换成画多根线，就把DrawLine换成DrawLines，例如：

dc.DrawLines(((20, 60), (100, 60), (100, 10),(20, 10), (20,60)))

参数是一个一个点，注意这里参数格式是点x，y的元组列表。

6. 保存代码

如果不熟悉git可以baidu看看教程。
1. git clone 自己的仓库地址
2. 实验代码拷过去以后用
3. git add -A .
4. git commit -am "your comment"
5. git push origin master
以后再用就clone自己的代码仓库就ok

三. 总结

本节课我们掌握要点如下：

1. 了解wxpython
2. 熟悉环境特别是git
3. 能运行出wxpython的窗口
4. 了解ClientDC和PaintDC的差别
5. 画线

如果通过具体的点来画多边形，很不方便，而且如果再来计算多边形的面积，比较各个多边形的大小等，那就更不好操作了。下一节我们通过自定义类来画各种形状，从而理解类的使用。