### ex5-1 ###

import tkinter

root = tkinter.Tk()
root.title('在Canvas繪製影像')
canvas = tkinter.Canvas(width = 480, height = 300)
canvas.pack()
img_bg = tkinter.PhotoImage(file = 'images/park.png')
canvas.create_image(240, 150, image = img_bg)
root.mainloop()



### ex5-2 ###

import tkinter

x = 0					# 管理捲動位置的變數

def scroll_bg():			# 執行捲動的函式
    global x
    x = x + 1				# 設定捲動的速度
    if x == 480:				# 讓圖片的 X 座標 在 0 ~ 479 之間移動，超過 480 則重設為 0
        x = 0
    canvas.delete('BG')			# 暫時刪除背景影像 'BG'
    canvas.create_image(x - 240, 150, image = img_bg, tag = 'BG')		# 繪製背景影像 (左側)
    canvas.create_image(x + 240, 150, image = img_bg, tag = 'BG')		# 繪製背景影像 (右側)
    root.after(50, scroll_bg)								# 50 毫秒後再次執行這個函式

root = tkinter.Tk()
root.title('捲動畫面')
canvas = tkinter.Canvas(width = 480, height = 300)
canvas.pack()
img_bg = tkinter.PhotoImage(file = 'images/park.png')
scroll_bg()											# 執行捲動的函式
root.mainloop()



### ex5-3 ###

import tkinter

x = 0					# 管理捲動位置的變數
ani = 0				# 選擇小狗動畫圖片的變數

def animation():			# 執行捲動與小狗走路的函式
    global x, ani
    x = x + 4
    if x == 480:
        x = 0
    canvas.delete('BG')
    canvas.create_image(x - 240, 150, image = img_bg, tag = 'BG')
    canvas.create_image(x + 240, 150, image = img_bg, tag = 'BG')
    ani = (ani + 1) % 4		# 讓 ani 的值在 0 ~ 3 之間變化
    canvas.create_image(240, 200, image = img_dog[ani], tag = 'BG')	# 繪製小狗圖片
    root.after(200, animation)

root = tkinter.Tk()
root.title('動畫')
canvas = tkinter.Canvas(width = 480, height = 300)
canvas.pack()
img_bg = tkinter.PhotoImage(file = 'images/park.png')

img_dog = [									# 在 list 載入小狗圖片
    tkinter.PhotoImage(file = 'images/dog0.png'),
    tkinter.PhotoImage(file = 'images/dog1.png'),
    tkinter.PhotoImage(file = 'images/dog2.png'),
    tkinter.PhotoImage(file = 'images/dog3.png')
]

animation()									# 執行函式 animation()
root.mainloop()



### ex5-4 ###

import tkinter

root = tkinter.Tk()
root.title('地圖資料')
canvas = tkinter.Canvas(width = 336, height = 240)
canvas.pack()

img = [									# 在 list 載入地圖圖片
    tkinter.PhotoImage(file = 'images/chip0.png'),
    tkinter.PhotoImage(file = 'images/chip1.png'),
    tkinter.PhotoImage(file = 'images/chip2.png'),
    tkinter.PhotoImage(file = 'images/chip3.png')
]

map_data = [								# 用二維 list 定義地圖資料
    [0, 1, 0, 2, 2, 2, 2],
    [3, 0, 0, 0, 2, 2, 2],
    [3, 0, 0, 1, 0, 0, 0],
    [3, 3, 0, 0, 0, 0, 1],
    [3, 3, 3, 3, 0, 0, 0]
]

for y in range(5):
    for x in range(7):
        n = map_data[y][x]									# 把二維 list 的值帶入變數 n
        canvas.create_image(x * 48 + 24, y * 48 + 24, image = img[n])		# 繪製地圖
        
root.mainloop()



### ex5-5 ###

import tkinter

def mouse_click(e):							# 定義按下滑鼠的函式
    px = e.x									# 把滑鼠游標的 X 座標帶入 px
    py = e.y									# 把滑鼠游標的 Y 座標帶入 px
    print('滑鼠游標的座標是({}, {})'.format(px, py))			# 輸出 px 與 py 的值
    mx = int(px / 48)								# 把 px 換算成 mx (圖塊的 X 位置索引)
    my = int(py / 48)								# 把 py 換算成 my (圖塊的 Y 位置索引)
    if 0 <= mx and mx <= 6 and 0 <= my and my <= 4:			# 如果 mx 與 my 在地圖範圍內
        n = map_data[my][mx]								# 把圖塊的編號代入 n
        print('這裡的圖塊是' + CHIP_NAME[n])					# 輸出圖塊的名稱

root = tkinter.Tk()
root.title('地圖資料')
canvas = tkinter.Canvas(width = 336, height = 240)
canvas.pack()
canvas.bind('<Button>', mouse_click)				# 點擊畫布時執行的函式
CHIP_NAME = ['草', '花', '森林', '海']				# 在 list 定義圖塊的名稱

img = [									# 在 list 載入影像
    tkinter.PhotoImage(file = 'images/chip0.png'),
    tkinter.PhotoImage(file = 'images/chip1.png'),
    tkinter.PhotoImage(file = 'images/chip2.png'),
    tkinter.PhotoImage(file = 'images/chip3.png')
]

map_data = [								# 在二維 list 定義地圖資料
    [0, 1, 0, 2, 2, 2, 2],
    [3, 0, 0, 0, 2, 2, 2],
    [3, 0, 0, 1, 0, 0, 0],
    [3, 3, 0, 0, 0, 0, 1],
    [3, 3, 3, 3, 0, 0, 0]
]

for y in range(5):
    for x in range(7):
        canvas.create_image(x * 48 + 24, y * 48 + 24, image = img[map_data[y][x]])
        
root.mainloop()



### ex5-6 ###

import tkinter

root = tkinter.Tk()
root.title('在畫布繪製圖形')
root.geometry('500x400')
cvs = tkinter.Canvas(root, width = 500, height = 400, bg = 'white')
cvs.pack()

cvs.create_text(250, 25, text = '字串', fill = 'green', font = ('Times New Roman', 24))
cvs.create_line(30, 30, 70, 80, fill = 'navy', width = 5)
cvs.create_line(120, 20, 80, 50, 200, 80, 140, 120, fill = 'blue', smooth = True)
cvs.create_rectangle(40, 140, 160, 200, fill = 'lime')
cvs.create_rectangle(60, 240, 120, 360, fill = 'pink', outline = 'red', width = 5)
cvs.create_oval(250 - 40, 100 - 40, 250 + 40, 100 + 40, fill = 'silver', outline = 'purple')
cvs.create_oval(250 - 80, 200 - 40, 250 + 80, 200 + 40, fill = 'cyan', width = 0)
cvs.create_polygon(250, 250, 150, 350, 350, 350, fill = 'magenta', width = 0)
cvs.create_arc(400 - 50, 100 - 50, 400 + 50, 100 + 50, fill = 'yellow', start = 30, extent = 300)
cvs.create_arc(400 - 50, 250 - 50, 400 + 50, 250 + 50, fill = 'gold', start = 0, extent = 120, style = tkinter.CHORD)
cvs.create_arc(400 - 50, 350 - 50, 400 + 50, 350 + 50, outline = 'orange', start = 0, extent = 120, style = tkinter.ARC)

cvs.mainloop()



### ex5-7 ###

import tkinter

def hit_check_rect():						# 定義檢查碰撞的函式
    dx = abs((x1 + w1/2) - (x2 + w2/2))				# 把兩個矩形的中心在 X 方向的距離代入 dx
    dy = abs((y1 + h1/2) - (y2 + h2/2))				# 把兩個矩形的中心在 Y 方向的距離代入 dy
    if dx <= w1/2 + w2/2 and dy <= h1/2 + h2/2:			# 判斷矩形重疊的條件
        return True								# 如果重疊回傳 True
    return False								# 如果不重疊回傳 False

def mouse_move(e):						# 定義移動藍色矩形與碰撞的函式
    global x1, y1
    x1 = e.x - w1/2							# 把藍色矩形的 X 座標變成游標的座標
    y1 = e.y - h1/2							# 把藍色矩形的 Y 座標變成游標的座標
    col = 'blue'								# 把 blue (藍色) 字串代入 col
    if hit_check_rect() == True:					# 如果兩個矩形接觸
        col = 'cyan'								# 把 cyan (淺藍) 字串代入 col
    canvas.delete('RECT1')						# 暫時刪除藍色矩形
    canvas.create_rectangle(x1, y1, x1 + w1, y1 + h1, fill = col, tag = 'RECT1')	# 繪製藍色或淺藍矩形

root = tkinter.Tk()
root.title('用矩形進行碰撞偵測')
canvas = tkinter.Canvas(width = 600, height = 400, bg = 'white')
canvas.pack()
canvas.bind('<Motion>', mouse_move)					# 移動滑鼠游標時執行的函式

x1 = 50
y1 = 50
w1 = 120
h1 = 60
canvas.create_rectangle(x1, y1, x1 + w1, y1 + h1, fill = 'blue', tag = 'RECT1')	# 繪製藍色矩形

x2 = 300
y2 = 100
w2 = 120
h2 = 160
canvas.create_rectangle(x2, y2, x2 + w2, y2 + h2, fill = 'red')				# 繪製紅色矩形

root.mainloop()



### ex5-8 ###

import tkinter
import math			# 匯入 math 模組

def hit_check_circle():									# 定義圓形碰撞函式
    dis = math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))		# 計算兩點之間的距離再代入 dis
    if dis <= r1 + r2:										# 如果 dis 的值小於兩個圓形半徑的加總
        return True											# 就回傳 True (碰撞)
    return False											# 否則，就回傳 False (無碰撞)

def mouse_move(e):									# 定義移動綠色圓形與碰撞的函式
    global x1, y1
    x1 = e.x											# 綠色圓形的 X 座標成為游標的座標
    y1 = e.y											# 綠色圓形的 Y 座標成為游標的座標
    col = 'green'											# 把 green (綠色) 字串代入 col
    if hit_check_circle() == True:								# 如果兩個圓形接觸
        col = 'lime'											# 把 lime (橙) 字串代入 col
    canvas.delete('CIR1')									# 暫時刪除綠色圓形
    canvas.create_oval(x1 - r1, y1 - r1, x1 + r1, y1 + r1, fill = col, tag = 'CIR1')	# 繪製綠色或橙色圓形

root = tkinter.Tk()
root.title('用圓形進行碰撞偵測')
canvas = tkinter.Canvas(width = 600, height = 400, bg = 'white')
canvas.pack()
canvas.bind('<Motion>', mouse_move)

x1 = 50
y1 = 50
r1 = 40
canvas.create_oval(x1 - r1, y1 - r1, x1 + r1, y1 + r1, fill = 'green', tag = 'CIR1')

x2 = 300
y2 = 200
r2 = 80
canvas.create_oval(x2 - r2, y2 - r2, x2 + r2, y2 + r2, fill = 'orange')

root.mainloop()



### ex5-9 ###

import math

d = 45				# 角度
a = math.radians(d)		# 轉換成弧度
s = math.sin(a)			# 把 sin 的值代入 s
c = math.cos(a)			# 把 cos 的值代入 c
t = math.tan(a)			# 把 tan 的值代入 t
print('rad ' + str(a))		# 輸出弧度 a
print('sin ' + str(s))		# 輸出 sin 的值
print('cos ' + str(c))		# 輸出 cos 的值
print('tan ' + str(t))		# 輸出 tan 的值



### ex5-10 ###

import tkinter
import math

def trigo():						# 定義函數
    try:								# 例外處理
        d = float(entry.get())					# 把輸入欄的值以浮點數代入 d
        a = math.radians(d)
        s = math.sin(a)
        c = math.cos(a)
        t = math.tan(a)
        label_s['text'] = 'sin ' + str(s)				
        label_c['text'] = 'cos ' + str(c)
        label_t['text'] = 'tan ' + str(t)
    except:								# 發生例外時
        print('請輸入以度為單位的角度')				# 在殼層視窗輸出提醒訊息 

root = tkinter.Tk()
root.geometry('300x200')
root.title('三角函數的值')

entry = tkinter.Entry(width = 10)
entry.place(x = 20, y = 20)
button = tkinter.Button(text = '計算', command = trigo)
button.place(x = 110, y = 20)
label_s = tkinter.Label(text = 'sin')
label_s.place(x = 20, y = 60)
label_c = tkinter.Label(text = 'cos')
label_c.place(x = 20, y = 100)
label_t = tkinter.Label(text = 'tan')
label_t.place(x = 20, y = 140)

root.mainloop()



### ex5-11 ###

import tkinter
import math

root = tkinter.Tk()
root.title('用三角函數畫線')
canvas = tkinter.Canvas(width = 400, height = 400, bg = 'white')
canvas.pack()

for d in range(0, 90, 10):
    a = math.radians(d)
    x = 300 * math.cos(a)					# 用 cos 計算線條終端的 X 座標
    y = 300 * math.sin(a)					# 用 sin 計算線條終端的 Y 座標
    canvas.create_line(0, 0, x, y, fill = 'blue')	# 在 (0, 0) 到 (x, y) 之間畫線 
    
root.mainloop()



### ex5-12 ###

import tkinter
import math

root = tkinter.Tk()
root.title('用三角函數畫圖')
canvas = tkinter.Canvas(width = 600, height = 600, bg = 'black')
canvas.pack()

COL = ['greenyellow', 'limegreen', 'aquamarine', 'cyan', 'deepskyblue', 'blue', 'blueviolet', 'violet']

for d in range(0, 360):
    x = 250 * math.cos(math.radians(d))
    y = 250 * math.sin(math.radians(d))
    canvas.create_line(300, 300, 300 + x, 300 + y, fill = COL[d % 8], width = 2)

root.mainloop()



### ex5-13 ###

import tkinter

fnt1 = ('Times New Roman', 20)	# 定義字體 (小型)
fnt2 = ('Times New Roman', 40)	# 定義字體 (大型)
index = 0					# 索引用的變數
timer = 0					# 計時器用的變數

key = ''					# 代入鍵碼字串的變數

def key_down(e):
    global key
    key = e.keysym

def main():					# 執行主要處理的函式
    global index, timer
    canvas.delete('STATUS')		# 暫時隱藏 index 與 timer 的顯示
    timer = timer + 1			# timer 的值持續加 1
    canvas.create_text(200, 30, text = 'index ' + str(index), fill = 'white', font = fnt1, tag = 'STATUS')		# 顯示 index 的值
    canvas.create_text(400, 30, text = 'timer ' + str(timer), fill = 'cyan', font = fnt1, tag = 'STATUS')		# 顯示 timer 的值

    if index == 0:																# index = 0 的處理 (標題畫面)
        if timer == 1:																	# 如果 timer 是 1 
            canvas.create_text(300, 150, text = '標題', fill = 'white', font = fnt2, tag = 'TITLE')					# 就顯示標題文字
            canvas.create_text(300, 300, text = 'Press[SPACE]Key', fill = 'lime', font = fnt1, tag = 'TITLE')			# 顯示 Press[SPACE]Key
        if key == 'space':															# 按下空白鍵後
            canvas.delete('TITLE')															# 刪除標題文字
            canvas.create_rectangle(0, 0, 600, 400, fill = 'blue', tag = 'GAME')							# 將藍色填滿畫布
            canvas.create_text(300, 150, text = '遊戲中', fill = 'white', font = fnt2, tag = 'GAME')				# 顯示遊戲中的文字
            canvas.create_text(300, 300, text = '[E] 結束', fill = 'yellow', font = fnt1, tag = 'GAME')			# 顯示 [E] 結束
            index = 1																	# index 變成 1
            timer = 0																	# timer 變成 0

    if index == 1:																# index = 1 的處理 (遊戲中的畫面)
        if key == 'e':																	# 按下 E 鍵後
            canvas.delete('GAME')																# 刪除 '遊戲中' 的文字
            canvas.create_rectangle(0, 0, 600, 400, fill = 'maroon', tag = 'OVER')								# 用 (maroon) 栗色填滿畫布
            canvas.create_text(300, 150, text = 'GAME OVER', fill = 'red', font = fnt2, tag = 'OVER')					# 顯示 'GAME OVER'
            index = 2																		# index 變成 2
            timer = 0																		# timer 變成 0

    if index == 2:																# index = 2 的處理 (遊戲結束的畫面)
        if timer == 30:																	# timer 值變成 30 之後
            canvas.delete('OVER')																# 刪除 'GAME OVER' 的文字
            index = 0																		# index 變成 0
            timer = 0																		# timer 變成 0

    root.after(100, main)

root = tkinter.Tk()
root.title('index 與 timer')
root.bind('<KeyPress>', key_down)
canvas = tkinter.Canvas(width = 600, height = 400, bg = 'black')
canvas.pack()
main()
root.mainloop()



### ex5-14 ###

import tkinter
import random

fnt1 = ('Times New Roman', 24)
fnt2 = ('Times New Roman', 50)
index = 0					# 索引的變數
timer = 0					# 計時器的變數
score = 0					# 分數的變數
bg_pos = 0					# 顯示背景位置的變數
px = 240					# 玩家 (太空船) X 座標的變數
py = 540					# 玩家 (太空船) Y 座標的變數
METEO_MAX = 30				# 流星的數量
mx = [0] * METEO_MAX			# 管理流星 X 座標的 list
my = [0] * METEO_MAX			# 管理流星 Y 座標的 list

key = ''					# 鍵值的變數
koff = False				# 放開按鍵時使用的變數 (旗標)

def key_down(e):				# 按下按鍵時執行的函式
    global key, koff			
    key = e.keysym				
    koff = False					# 代表按下按鍵

def key_up(e):				# 放開按鍵時執行的函式
    global koff
    koff = True					# 代表放開了按鍵

def main():												# 執行主要處理的函式
    global key, koff, index, timer, score, bg_pos, px
    timer = timer + 1
    bg_pos = (bg_pos + 1) % 640								# 計算背景的繪圖位置
    canvas.delete('SCREEN')									# 暫時刪除畫面上所有的影像與文字
    canvas.create_image(240, bg_pos - 320, image = img_bg, tag = 'SCREEN')	# 繪製當作背景的宇宙影像 (捲動)
    canvas.create_image(240, bg_pos + 320, image = img_bg, tag = 'SCREEN')	# 繪製當作背景的宇宙影像 (捲動)
    if index == 0:																# index = 0 的處理 (標題畫面)
        canvas.create_text(240, 240, text = 'METEOR', fill = 'gold', font = fnt2, tag = 'SCREEN')				# 顯示標題文字 'METEOR'
        canvas.create_text(240, 480, text = 'Press [SPACE] Key', fill = 'lime', font = fnt1, tag = 'SCREEN')		# 顯示文字 'Press [SPACE] Key'
        if key == 'space':																	# 如果按下空白鍵後							
            score = 0																			# score 變成 0
            px = 240																			# 太空船的位置變成在畫面中央
            init_enemy()																		# 在流星的座標輸入預設值
            index = 1																			# index 變成 1
    if index == 1:																# index = 1 的處理 (遊戲中)
        score = score + 1																# 增加 score
        move_player()																	# 移動太空船
        move_enemy()																	# 移動流星
    if index == 2:																# index = 2 的處理 (遊戲結束)
        move_enemy()																	# 移動流星
        canvas.create_text(240, timer * 4, text = 'GAME OVER', fill = 'red', font = fnt2, tag = 'SCREEN')			# 顯示 'GAME OVER'
        if timer == 60:																	# 如果 timer 變成 60 之後
            index = 0																		# index = 0
            timer = 0																		# timer = 0
    canvas.create_text(240, 30, text = 'SCORE ' + str(score), fill = 'white', font = fnt1, tag = 'SCREEN')		# 顯示分數
    if koff == True:																# 如果 koff 為 True (放開按鍵且太空船移動後，可能仍為 False，所以再次確認 True)
        key = ''																		# 清除 key 的值
        koff = False																	# koff = False 代表
    root.after(50, main)

def hit_check(x1, y1, x2, y2):							# 執行碰撞偵測的函式
    if((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2) < 36 * 36):			# 用兩點間的距離進行判斷，如果不到 36 點
        return True											# 就回傳 True
    return False											# 否則，回傳 False

def init_enemy():						# 將流星座標變成預設位置的函式
    for i in range(METEO_MAX):				# 重複
        mx[i] = random.randint(0, 480)				# 用亂數決定 X 座標
        my[i] = random.randint(-640, 0)				# 用亂數決定 Y 座標

def move_enemy():										# 移動流星的函式
    global index, timer
    for i in range(METEO_MAX):								# 重複
        my[i] = my[i] + 6 + i/5									# 改變流星的 Y 座標
        if my[i] > 660:											# 當 Y 座標超過 660 之後
            mx[i] = random.randint(0, 480)								# 用亂數重新決定 X 座標
            my[i] = random.randint(-640, 0)								# 用亂數重新決定 Y 座標
        if index == 1 and hit_check(px, py, mx[i], my[i]) == True:			# 在遊戲中接觸太空船後
            index = 2												# index 變成 2
            timer = 0												# timer 變成 0
        canvas.create_image(mx[i], my[i], image = img_enemy, tag = 'SCREEN')		# 繪製流星

def move_player():											# 移動太空船的函式
    global px													# 只改變 X 座標
    if key == 'Left' and px > 30:										# 按下左鍵且 px > 30
        px = px - 10													# px 的值 (X 座標) 減 10
    if key == 'Right' and px < 450:										# 按下左鍵且 px < 450
        px = px + 10													# px 的值 (X 座標) 加 10
    canvas.create_image(px, py, image = img_player[timer % 2], tag = 'SCREEN')		# 繪製太空船

root = tkinter.Tk()
root.title('Meteor')
root.bind('<KeyPress>', key_down)
root.bind('<KeyRelease>', key_up)
canvas = tkinter.Canvas(width = 480, height = 640)
canvas.pack()

img_player = [
    tkinter.PhotoImage(file = 'images/starship0.png'),
    tkinter.PhotoImage(file = 'images/starship1.png')
]

img_enemy = tkinter.PhotoImage(file = 'images/meteo.png')
img_bg = tkinter.PhotoImage(file = 'images/cosmo.png')
main()
root.mainloop()