 |
|
 |
|
中高生のための
今から始めるプログラミング
| 03. 盤面の描画 |
最終更新日：2004/02/10
|
|
|
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
!---------------- △盤面を描画 ----------------
|
|
|
これで盤面の描画は完了しました。右上みたいな画面、どこかで見たことありませんか？
|
|
|
ここまでのソースをダウンロード
|
|
|
|
|
 |
|
 |
