円を斜めに動かそう!画面端で上下左右に反射するアニメーションを作るよ

円を斜めに動かそう!画面端で上下左右に反射するアニメーションを作るよ

円を上下左右に反射させよう!

前回の記事で、円が反射して動くアニメーションができたね。でも動くのが左右だけだったから、今回は円を斜めに動かしてみるよ。これで上下左右で反射するプログラムになるんだね。

y座標用の移動量を追加しよう!

円を斜めに動かすには、x座標とy座標の両方で値を足していけばいいんだね。だから前回xの移動量に使っていた変数「dx」に追加して、「dy」も追加するよ。ここにy座標の移動量を保存しよう。

#円の移動量
dx = 1
dy = 1

いまつくったdyをグローバル宣言するのも忘れないように追加しておこう。

global x,y,dx,dy

次はy座標にdyを足していく記述も追加するよ。これで縦の動きもついて、横の動きと合わせて「斜めの動き」になるんだね。

    #円を次の位置に
    x = x+dx
    y = y+dy

最後に画面端で反射するってところも、x座標だけじゃなくy座標にも対応するようにしよう。書き方はこんな感じ。

    if y >= canvas.winfo_height():
        dy = -1
    if y <= 0:
        dy = 1

「canvas.winfo_height()」っていうのがキャンバスの高さを取得してる部分だね。yがこれ以上のときは、画面の下端にきたときだから、そこでdyを-1にして向きを反転させてるんだ。

ここまで書いたのを全部まとめるとこんな感じ!実行してみると、円が上下左右に反射して動くよ。

# codeing=utf-8
import tkinter as tk

#円の座標
x = 300
y = 200
#円の移動量
dx = 1
dy = 1

def move():
    global x,y,dx,dy
    
    #前の円を隠す
    canvas.create_oval(x-30, y-30, x+30, y+30, fill="white", width=0)
    #円を次の位置に
    x = x+dx
    y = y+dy
    canvas.create_oval(x-20, y-20, x+20, y+20, fill="red", width=0)
    #画面端で移動量をかえる
    if x >= canvas.winfo_width():
        dx = -1
    if x <= 0:
        dx = 1
    if y >= canvas.winfo_height():
        dy = -1
    if y <= 0:
        dy = 1
    #タイマーをつくる
    root.after(10, move)


#ウィンドウを作る
root = tk.Tk()
root.geometry("600x400")
 
#Canvasを作る
canvas = tk.Canvas(root, width=600, height=400, bg="white")
canvas.place(x=0, y=0)

#タイマーをつくる
root.after(10, move)


root.mainloop()
今日のまとめ

  • xとy座標を動かして斜めの動きをつくろう!
  • 「winfo_height()」でキャンバスの高さを取得しよう!