drRacketは、 サイトからダウンロードできます。
チュートリアルの導入部分には、画像を操作するための空のシーン機能の説明が含まれています。 たとえば、このプログラムは空のシーンを作成します。
#lang racket (require 2htdp/image) ; (empty-scene 100 60) ; () 10060
これにより、ステージに緑色の円が表示されます。
#lang racket (require 2htdp/image) (place-image (circle 5 "solid" "green") ; 50 80 ; (empty-scene 100 100)) ; ()
アニメーションを作成するには、animate関数を使用します。 次のプログラムは、アニメーション（オブジェクトの動き）を作成します。
#lang racket (require 2htdp/image) ; (require 2htdp/universe) ; (define (picture-of-circle height) (place-image (circle 5 "solid" "green") 50 height (empty-scene 100 60))) (animate picture-of-circle)
1. animate関数はタイマーを開始し、小節の数をカウントします。
2.タイマーは1秒間に28回作動します。
3.タイマーが「ティック」するたびに、animaneは現在のメジャーを円の絵に送信します。 そして
4.シーンがキャンバスに表示されます。
これは、円が最初に座標0、次に1、次に2などに現れることを意味します。したがって、円は上から下に落ちます。 つまり このプログラムは、3.5秒で約100個の画像を作成します。これにより、モーションエフェクトを作成できます。
チュートリアルの最初の部分では、ビッグバン機能について説明します。ビッグバンを使用するすべてのプログラムは、以降ワールドプログラムと呼ばれます。 このプログラムは、赤い正方形100x100（セクション2.5）を描画します。
#lang racket (require 2htdp/image) (require 2htdp/universe) (define (number->square s) (square s "solid" "red")) (big-bang 100 [to-draw number->square])
パラメータ値を変更すると、関数は異なるサイズの正方形を描画します。
(big-bang 50 [to-draw number->square]) ; 5050 (big-bang 100 [to-draw number->square]) ; 100100 (big-bang 150 [to-draw number->square]) ; 150150
ビッグバン関数で使用されるパラメーターを渡すためのメカニズムを検討できます
SICP教科書の関数CONS、CAR、CDRを実装するアルゴリズムの例について。
(define (f-cons xy) (define (dispatch m) (cond ((= m 0) x) ((= m 1) y) (else (error " 0 1 -- CONS" m)))) dispatch) (define (f-car z) (z 0)) (define (f-cdr z) (z 1))
これらの関数の結果を確認してください。
(define a 1) (define b 2) (display (f-car (f-cons ab))) ; 1 (display (f-cdr (f-cons ab))) ; 2
f-cr関数を作成します。
(define (f-cr xy) (yx))
これで、f-cr関数は任意の値を渡すことができます。
画像 
同様に、big-bang-1関数を作成します。
(define (big-bang-1 xy) (yx))
そしてrender-1をカプセル化するto-draw-1関数：
(define (to-draw-1 x) (define (render-1 y) (place-image (xy) yy (empty-scene (* 2 y) (* 2 y))) ) render-1)
パラメーター（値）を送信するためのアルゴリズムを実装します。
画像 
さらに教科書では、フォームの構成が考慮されています。
(big-bang cw0 [on-tick tock] [on-key ke-h] [on-mouse me-h] [to-draw render] [stop-when end?] ...)
キーストローク、タイマー、オブジェクトの動きの座標を処理できます。 以下（図13）は、この構成を使用したプログラムのリストです。
(define BACKGROUND (empty-scene 100 100)) (define DOT (circle 3 "solid" "red")) (define (main y) (big-bang y [on-tick sub1] [stop-when zero?] [to-draw place-dot-at] [on-key stop])) (define (place-dot-at y) (place-image DOT 50 y BACKGROUND)) (define (stop y ke) 0)
画像（image.rkt）およびアニメーション（ universe.rkt）。
セクション3は、プログラムの設計方法と呼ばれます。 プログラムはデータの形で情報を提示すると言います。 つまり、数値は、タイマーによってカウントされるメジャーの数と、オブジェクトの座標、色、サイズなどの両方を表すことができます。 プログラムはこれらの数値をメモリに記録し、これらの数値をオブジェクトの座標、色、サイズなどに変換する必要があります。
図 図１４は、このアイデアを示す図である。
セクション3.5（テスト中）は、テストを使用した開発に専念しています。
セクション3.6は、世界プログラムの設計に専念しています。 図17は、2htdp / universeライブラリの簡略図を示しています。
次に、ビッグバンプログラムを作成するための3つの主要な段階について説明します（3.7項）。
1.変更されないままのすべての数量について、定数を作成する必要があります。
a。 「物理」定数は、オブジェクトの速度、色、
幅、高さなど
（WHEEL-RADIUS 5を定義）
b。 「グラフィック」定数。
（ホイールの定義
（サークルWHEEL-RADIUS「ソリッド」「ブラック」））
2.キーストロークに応じて時間とともに変化するプロパティ、
タイマーなど コントロールオブジェクトの状態の形式で表す必要があります。
3.すべてのオブジェクトの状態のセットを受け取ったら、big-bangを呼び出してこれらのオブジェクトを表示する必要があります。 以下は、ビッグバン機能を使用する必要がある演習です。
セクション4.3では、キーボードとマウスによって生成されるイベントの処理について説明します。 図 図20は、左右のキーを処理する条件付き構成を示しています。
(define (keh pk) (cond [(string=? "left" k) (- p 5)] [(string=? "right" k) (+ p 5)] [else p]))
上キーと下キーも処理する必要がある場合は、オブジェクトの座標をリストに保存する必要があることを追加します。
(define coord-xy (list 50 50) ) ; x=50 ; y=50
このリストをビッグバンに渡します：
(big-bang coord-xy [to-draw place-dot-at] [on-key keh])
place-dot-at関数は、リストを部分に「解析」します。
(define (place-dot-at xy ) (place-image DOT (car xy) (cdr xy) MTS)) ; (car(cdr xy))
そして、keh関数はリストを「解析」し、座標の1つを変更し、それを収集します。
(list (-(car p)5) (cdr p) ) ; (car (cdr p))
さらに、信号プログラムを開発することが提案されています。
(check-expect (traffic-light-next "red") "green") (define (traffic-light-next s) (cond [(string=? "red" s) "green"] [(string=? "green" s) "yellow"] [(string=? "yellow" s) "red"]))
信号機が非常に迅速に切り替わることを追加します（すべてのステップ）。 これを回避するには、タイマーの応答時間を変更する必要があります。
[on-tick traffic-light-next rate-expr]
これで、タイマーはrate-expr秒ごとに起動します（on-tick tick-expr rate-expr）。
また、テキストには、ワールドプログラムのあるページへのリンクがあります。 プログラムは、必要なパッケージを追加することにより、「初心者学生」モードで起動できます。
セクション5 （構造の追加）には、データ構造の定義が含まれています（ 例 ）
#lang racket (define-struct posn (xy)) (define a (make-posn 10 34)) (posn-x a) (posn-y a) (posn? (posn 10 34))
5.4項で、著者は構造の定義を示します。実際、構造は他の機能を定義します。 特に：
1.構造をインスタンス化するコンストラクター。
2.構造のインスタンスのフィールドにアクセスできるセレクター。
3.通常の述語と同様にチェックする構造述語
引数が構造のインスタンスであるかどうか。
make-posnはコンストラクターです
posn-xおよびposn-y-セレクター
posn？ -述語
詳細については、ドキュメント（ 構造 ）をご覧ください
セクション5.5。 演習71のプログラムは、デバッガーで段階的に実行することをお勧めします。 トレーニングパッケージを追加して、「初心者学生」モードで実行する必要があります。
5.6で、著者はフレームごとのアニメーション（軸の1つに沿ってオブジェクトを移動する）のプログラムの段階的な説明を作成します。 これで、プログラムは構造を使用してオブジェクトの座標を決定します。
このプログラム
(require 2htdp/image) (require 2htdp/universe) ; (define-struct posn (xy)) (define MTS (empty-scene 100 100)) (define DOT (circle 3 "solid" "red")) ; A Posn represents the state of the world. (define (x+ p) (make-posn (+ (posn-x p) 3) (posn-y p))) (define (scene+dot p) (place-image DOT (posn-x p) (posn-y p) MTS) ) (define (reset-dot pxy me) (cond [(mouse=? me "button-down") (make-posn xy)] [else p])) ; Posn -> Posn (define (main p0) (big-bang p0 [on-tick x+] [on-mouse reset-dot] [to-draw scene+dot])) (main (make-posn 1 20))
セクション5.11に画像処理の例を示します。
セクション6.1では、Space invandersゲームについて段階的に説明しています。
パラグラフ6.2では、パラグラフ4.3（交通信号）のプログラムを補完することが提案されています。
PS Schemeでゲームを書く方法に関する次の記事
PPSこの記事では、Scheme言語でのオブジェクトプログラミングの問題について説明します。