座標値を 一定 割合で 変化 させる ことで 動く ボールを 表現 して みます。 以下の サンプル コードを 流れに 沿って 確認 します。
require 'dxruby'
img1 = Image.new(30, 30, C_BLACK)
img1.circle_fill(15, 15, 15, C_WHITE)
x=0;
#ここまでは 既に 学んだ 内容。 次の dxは x方向の 変化分。
dx=1
#円を 縦方向の 真ん中に 表示 する ために 以下の 式で yを 決める。
y=(Window.height-img1.height)/2
#無限 ループ スタート
Window.loop do
#xを dxだけ 変化 させる ために x=x+dx と する。 x+=dx と いう 書き方も ある。
x+=dx
#xが ウィンドウの 横幅を はみ出そうに なったら 方向を 変える。
if(x>Window.width-30) then
#方向を 変える。 ここは dx*=-1 と 書いても 良い。
dx=dx*(-1)
end
Window.draw(x, y, img1)
end
・ dxと いう 変数が 新たに 加わった。 これは 変化分を 意味 する 変数。 初期値は +1。
・ yは 固定。 ウィンドウの 高さの 半分から img1の 半分の 高さを 引いた 座標。 これにより 図は 真ん中に 来る。
・ 無限 ループの 中で x=x+dx と する ことで 右に 移動。
・ 右端で 跳ね返る ために 「条件 分岐」を 行う。 条件 分岐とは、 「もし ~なら 〇〇 する」と いう 命令を 実現 する もので ある。
・ 条件 分岐は 「x座標が ウィンドウの右端の座標-img1の横幅 より 大きく なった 場合」に 変化分を 左方向に する こと。
・ 右方向への 変化 (dx=1)から 左方向への 変化は -1を 掛け算 すると 実現 できる。
しかし このままだと、 右で 跳ね返った 後、 左側に 消えて いって しまいます。 そこで、 「x座標が ゼロより 小さく なったら」と いう 条件を 加えさせます。
if(x>Window.width-30 || x<0) then
「この 縦棒 2つは、 「もしくは」と いう 意味で ある。 ここで dx=dx*(-1) の 意味を 再確認 する。 左方向への 移動から 右方向への 移動に 変わるのも、 実現 できて いる。」と いう ことを 理解 させます。
ここまで 来たら 生徒の 進度や 理解度を 確認 しつつ 「y方向にも 同様に 変化 する プログラムに せよ。」と いう 課題などを 出して みるのも 良いでしょう。