－トップへ－
スライドパズルを作る
その１ フォームの設計
はじめに
今回は，スライドパズルを作ってみます。スライドパズルの種類は「１５パズル」といわれるもので，１つの空き地を使って１５個のピースを順番通りに並べるというものです。
フォームの設計
今回はフォームの設計を，FormCreateイベントハンドラの中で行いたいと思います。そのため，あらかじめフォームに手を加えることはありません。
FormCreateイベントハンドラでは，最初にフォームの大きさと色を設定した後，１６個のイメージコンポーネントを動的に作成します。普通コンポーネントはあらかじめフォーム上に配置（静的生成）しますが，プログラムソースの中でフォーム上に設置（動的生成）することもできます。
具体的には１６個のピースの大きさを９８ピクセルにしてピースとピースの隙間を２ピクセルにしてみます。そしてその１６個のピースをフォーム上に順番に並べていきます。
プログラムソースは以下の通りです。
{ Private 宣言 }
{ Public 宣言 }
end;
：
：
procedure TForm1.FormCreate(Sender: TObject);
var
i:integer; //iを整数宣言
begin
form1.ClientHeight:=402; //フォームの内側の高さを４０２にする
form1.ClientWidth:=402; //フォームの内側の幅を４０２にする
form1.color:=clblack; //フォームの色を黒にする
for i:=1 to 16 do begin
img[i]:=Timage.Create(form1); //イメージコンポーネントを作成
img[i].Parent:=form1; //イメージコンポーネントをform1上に置く
img[i].Left:=100*((i-1) mod 4)+2; //イメージコンポーネントのｘ座標を指定
img[i].Top:=100*((i-1) div 4)+2; //イメージコンポーネントのｙ座標を指定
img[i].Width:=98; //イメージコンポーネントの幅を９８にする
img[i].Height:=98; //イメージコンポーネントの高さを９８にする
with img[i].canvas do begin //ここからイメージコンポーネントの色や文字を設定します
brush.Color:=clwhite; //ブラシの色を白にする
fillrect(img[i].Canvas.ClipRect); //イメージコンポーネント全体を塗りつぶす
font.Color:=clMaroon; //文字の色を茶色っぽい色にする
if i<=15 then begin //イメージコンポーネント１５個に順番に数字を描く
font.Size:=40; //文字のサイズを４０にする
textout((img[i].Width-textwidth(inttostr(i))) div 2, //イメージコンポーネントの中央に
(img[i].Width-textheight(inttostr(i))) div 2,inttostr(i)); //数字を描く
end else begin //それ以外（１６個目）
font.Size:=15; //文字のサイズを１５にする
textout((img[i].Width-textwidth('DELPHI')) div 2, //イメージコンポー年の中央に
(img[i].Width-textheight('DELPHI')) div 2,'DELPHI'); //「DELPHI」と描く
end;
end;
end;
end;
img:array[1..16] of Timage; //imageを動的生成するために，これを記入します
public{ Public 宣言 }
end;
：
：
procedure TForm1.FormCreate(Sender: TObject);
var
i:integer; //iを整数宣言
begin
form1.ClientHeight:=402; //フォームの内側の高さを４０２にする
form1.ClientWidth:=402; //フォームの内側の幅を４０２にする
form1.color:=clblack; //フォームの色を黒にする
for i:=1 to 16 do begin
img[i]:=Timage.Create(form1); //イメージコンポーネントを作成
img[i].Parent:=form1; //イメージコンポーネントをform1上に置く
img[i].Left:=100*((i-1) mod 4)+2; //イメージコンポーネントのｘ座標を指定
img[i].Top:=100*((i-1) div 4)+2; //イメージコンポーネントのｙ座標を指定
img[i].Width:=98; //イメージコンポーネントの幅を９８にする
img[i].Height:=98; //イメージコンポーネントの高さを９８にする
with img[i].canvas do begin //ここからイメージコンポーネントの色や文字を設定します
brush.Color:=clwhite; //ブラシの色を白にする
fillrect(img[i].Canvas.ClipRect); //イメージコンポーネント全体を塗りつぶす
font.Color:=clMaroon; //文字の色を茶色っぽい色にする
if i<=15 then begin //イメージコンポーネント１５個に順番に数字を描く
font.Size:=40; //文字のサイズを４０にする
textout((img[i].Width-textwidth(inttostr(i))) div 2, //イメージコンポーネントの中央に
(img[i].Width-textheight(inttostr(i))) div 2,inttostr(i)); //数字を描く
end else begin //それ以外（１６個目）
font.Size:=15; //文字のサイズを１５にする
textout((img[i].Width-textwidth('DELPHI')) div 2, //イメージコンポー年の中央に
(img[i].Width-textheight('DELPHI')) div 2,'DELPHI'); //「DELPHI」と描く
end;
end;
end;
end;
以上のプログラムを実行すると，下図の様なフォームが現れます。
（デスクトップは「クラシック表示」にしてあります。）
右下のピースはいらないのですが，遊びで作ってみました。
次回は，ピースを動かしてみたいと思います。