03. 盤面の描画

中高生のための
今から始めるプログラミング

03. 盤面の描画

最終更新日：2004/02/10

<<BACK

↑HOME

NEXT>>

　1 サブルーチンの作成

さて、これから盤面を描画するわけですが、その前に盤面を描画するサブルーチン(post)を作成しておきましょう。「01. 盤面の準備」と同様にして、サブルーチンを追加します。
　

10 declare external sub main.format 20 declare external sub main.post 　　...... !**************** サブルーチン **************** 1000 module main　　!モジュール定義 1010 public sub format 1020 public sub post 1100 share numeric w,pieces(0 to 7,0 to 7) 　　...... !---------------- ▽初期化 ---------------- 1500 external sub format 　　...... 1810 call post　　!postを呼び出し 1999 end sub !---------------- △初期化 ---------------- !---------------- ▽盤面を描画 ---------------- 2000 external sub post 2999 end sub !---------------- △盤面を描画 ---------------- 9999 end module

　2 背景を描画

まずは背景を描いてみましょう。といってもペイントのように塗りつぶすわけではなく、キャンバスいっぱいに正方形を描いて行います。内部の色は何でもかまいませんが、ここではオセロらしく濃い緑にしましょう。濃い緑の色番号は 10 です。2100行目あたりに命令を追加しましょう。
　

!---------------- ▽盤面を描画 ---------------- 2000 external sub post 2100 !背景を描画 2110 set area color 10 2120 plot area: 0,0; 0,w*8; w*8,w*8; w*8,0 2999 end sub !---------------- △盤面を描画 ----------------

　3 格子を描画

では、次はマスをはっきりさせるために格子を描きましょう。これは線を書く命令を組み合わせることでできます。2200行目あたりに命令を追加しましょう。
　

!---------------- ▽盤面を描画 ---------------- 2000 external sub post 2100 !背景を描画 2110 set area color 10 2120 plot area: 0,0; 0,w*8; w*8,w*8; w*8,0 2200 !格子の描画 2210 for i=0 to 8 2220　 plot lines : 　0,w*i;w*8,w*i　　!横線を描画 2230　 plot lines : w*i,　0;w*i,w*8　　!縦線を描画 2299 next i 2999 end sub !---------------- △盤面を描画 ----------------

実行してみて、このようなウィンドウが表示されれば成功です。
　

　4 駒を描画

さて、だんだんオセロっぽくなってきましたね。この上に駒が乗れば実際にオセロとしての盤面になります。駒は、ここでは円として描きましょう。半径(r)は 13 くらいが丁度よいです。中心は、格子の真中になりますから、(i,j)番目の駒の座標は w*(0.5+j),w*(0.5+(7-i)) と表せます。ここで、縦の座標が w*(0.5+i) ではなく w*(0.5+(7-i)) になってしまっていますが、これは十進BASIC では縦の座標だけ普通の座標と逆になってしまうためです。理屈がわかったら、あとはこれをプログラムで実現するだけです。
　

!**************** サブルーチン **************** 1000 module main　　!モジュール定義 1010 public sub format 1020 public sub post 1100 share numeric w,r,pieces(0 to 7,0 to 7) 1200 !定数を定義 1210 let w=40　　!格子の幅 1220 let r=13　　!駒の半径　　...... !---------------- ▽盤面を描画 ---------------- 2000 external sub post 　　...... 2300 !駒の描画 2310 for j=0 to 7 2311 　for i=0 to 7 2320 　　select case pieces(j,i) 2330 　　case 1　 !白駒の場合 2331 　　　set area color 0　!色を指定：白 2332 　　　draw disk with scale(r)*shift(w*(0.5+i),w*(0.5+(7-j))) !円を描く 2340 　　case -1　!黒駒の場合 2341 　　　set area color 1　!色を指定：黒 2342 　　　draw disk with scale(r)*shift(w*(0.5+i),w*(0.5+(7-j))) !円を描く 2350 　　case else 2351 　　　!何もしない 2369 　　end select 2398 　next i 2399 next j 2999 end sub !---------------- △盤面を描画 ----------------

これで盤面の描画は完了しました。右上みたいな画面、どこかで見たことありませんか？
　

ここまでのソースをダウンロード
　

<<BACK

↑HOME

NEXT>>