用Racket做一个拼图游戏——4 实现工具

4 实现工具

思路理清楚了，接下来就一个一个功能实现。在阐述实现功能的编程过程中，会延伸讲解编程思路、相关的Racket函数及相关知识点，力图达到在实践中的学习目的。

在编程实现过程中，首先实现图片操作功能，再通过图形界面组装图片操作功能来完成软件的实现。

使用Racket的一大好处就是可以在交互区输出图片，因此不用担心没有图形界面无法进行图片操作的调试的问题，这样就使调试变得非常方便。

接下来简单了解一下。

为了让代码结构清晰，采用MVC模式来组织程序。即分成主要的三类文件来分类存储代码：

1. 模型文件（M）：存放数据及操作数据的代码。把它命名为”puzzle-model.rkt“。

2. 布局文件（V）：存放视图布局相关代码。涉及两个文件，主框架布局文件及其对应的标识符文件，分别命名为”main-frame.rkt“及”main-frame-ids.rkt“。

3. 控制文件（C）：存放将模型数据与布局对象结合起来操作的代码。包括”main-frame-controler.rkt“及”puzzle-canvas-class.rkt“两个文件。

好。接下来来实现它们～

4.1 DrRacket编辑器

为了用Racket进行编程，需要使用Racket自带的DrRacket编辑器（当然任何其它的文本编辑器原则上都可以，看自己喜好）。

Racket可到官方网站（racket-lang.org）下载，安装包里包含有DrRacket编辑器，其界面如下：

界面第一排为菜单，第二排为工具栏，涵盖DrRacket的各项功能。

中间为工作区，分为上下两部分：上部工作区为代码编辑区，用于输入Racket代码；下部工作区为交互，可以实现直接输入Racket代码实现REPL。

界面底部为状态栏，显示当前语言使用状态、当前光标位置、内存收集的相关信息等。

通过在菜单[View]子菜单项内可设置代码编辑区的视图分割、行号显示等，以方便编辑。

Racket支持中文，在Racket中几乎可以任意使用中文，注释、名称、值等等。

4.2 Racket简单介绍

Racket编程涉及以下概念及内容：值、定义、表达式、标识、绑定、函数、条件分支、关键字、序对、列表、向量、散列表、集合、结构、迭代、递归、模块、合约、类、对象、宏、输入、输出、正则表达式、模式匹配、反射、动态求值、并发、并行等。以上这些概念有的是多数语言的共性，有些是Racket语言的特色。

为了快速对Racket语言有一个基本的了解，可以看《X分钟了解Racket》这一篇微信公众号（Racket社区，Racket_cn）文章。

下面我们来写一段经典的“Hello World!”代码：

#lang racket

(display "Hello World!")

更详细的内容可以在微信公众号Racket社区（Racket_cn）去看公众号文章，或者加入Racket社区微信群去参加有关Racket的讨论。

更完整的内容是Racket官方网站https://racket-lang.org/上的https://docs.racket-lang.org/reference/index.html（The Racket Reference（Racket参考））。

4.3 快速学习Racket

我们来模仿网上曾流行的“X分钟学习Y语言”的模式来分享一下Racket的基本内容。不能指望通过这么短的时间这么简单的内容能够学会Racket，但作为一种基本的了解，是可以尝试的。通过以下内容，如果是一个有其它语言编程经验的，应该可以入门编写基本的程序。

以下内容可以作为一个程序进行运行。

从这个程序，你既能了解到Racket语言程序的文件基本结构，也可以了解到Racket语言的基本程序结构。

;learnracket-zh.rkt

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

#lang racket ; 声明我们使用的语言

;;; 注释

;; 单行注释以分号开始

#| 块注释

可以横跨很多行而且...

#|

可以嵌套

|#

|#

;; S表达式注释忽略剩下的表达式

;; 在调试的时候会非常有用

#; (被忽略的表达式)

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;; 1. 原始数据类型和操作符

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;;; 数字

9999999999999999999999 ; 整数

#b111                  ; 二进制数字 => 7

#o111                  ; 八进制数字 => 73

#x111                  ; 十六进制数字 => 273

3.14                   ; 实数

6.02e+23

1/2                    ; 有理数

1+2i                   ; 复数

;; 函数调用写作(f x y z ...)

;; 在这里 f 是一个函数， x, y, z, ... 是参数

;; 如果你想创建一个列表数据的字面量, 使用 ' 来阻止它们

;; 被求值

'(+ 1 2) ; => (+ 1 2)

;; 接下来，是一些数学运算

(+ 1 1)  ; => 2

(- 8 1)  ; => 7

(* 10 2) ; => 20

(expt 2 3) ; => 8

(quotient 5 2) ; => 2

(remainder 5 2) ; => 1

(/ 35 5) ; => 7

(/ 1 3) ; => 1/3

(exact->inexact 1/3) ; => 0.3333333333333333

(+ 1+2i  2-3i) ; => 3-1i

;;; 布尔类型

#t ; 为真

#f ; 为假，#f 之外的任何值都是真

(not #t) ; => #f

(and 0 #f (error "doesn't get here")) ; => #f

(or #f 0 (error "doesn't get here"))  ; => 0

;;; 字符

#\A ; => #\A

#\λ ; => #\λ

#\u03BB ; => #\λ

;;; 字符串是字符组成的定长数组

"Hello, world!"

"Benjamin \"Bugsy\" Siegel"   ; \是转义字符

"Foo\tbar\41\x21\u0021\a\r\n" ; 包含C语言的转义字符，和Unicode

"λx:(μα.α→α).xx"              ; 字符串可以包含Unicode字符

;; 字符串可以相加

(string-append "Hello " "world!") ; => "Hello world!"

;; 一个字符串可以看做是一个包含字符的列表

(string-ref "Apple" 0) ; => #\A

;; format 可以用来格式化字符串

(format "~a can be ~a" "strings" "formatted")

;; 打印字符串非常简单

(printf "I'm Racket. Nice to meet you!\n")

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;; 2. 标识

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;; 你可以使用 define 定义一个标识

;; 标识的名字可以使用任何字符除了: ()[]{}",'`;#|\

(define some-var 5)

some-var ; => 5

;; 你也可以使用Unicode字符

(define ⊆ subset?)

(⊆ (set 3 2) (set 1 2 3)) ; => #t

;; 访问未赋值的标识会引发一个异常

; x ; => x: undefined ...

;; 本地绑定: `me' 被绑定到 "Bob"，并且只在 let 中生效

(let ([me "Bob"])

"Alice"

me) ; => "Bob"

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;; 3. 结构和集合

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;; 结构体

(struct dog (name breed age))

(define my-pet

(dog "lassie" "collie" 5))

my-pet ; => #<dog>

(dog? my-pet) ; => #t

(dog-name my-pet) ; => "lassie"

;;; 对 (不可变的)

;; `cons' 返回对, `car' 和 `cdr' 从对中提取第1个

;; 和第2个元素

(cons 1 2) ; => '(1 . 2)

(car (cons 1 2)) ; => 1

(cdr (cons 1 2)) ; => 2

;;; 列表

;; 列表由链表构成, 由 `cons' 的结果

;; 和一个 `null' (或者 '()) 构成，后者标记了这个列表的结束

(cons 1 (cons 2 (cons 3 null))) ; => '(1 2 3)