homework two

2.red2

from browser import html
from browser import document as doc
from browser import timer
import browser.timer

canvas = html.CANVAS(width = 400, height = 100)
canvas.id = "game-board"
brython_div = doc["brython_div"]
brython_div <= canvas
brython_div <= html.BUTTON("開始", id="start")
ctx = canvas.getContext("2d")
px = 0
py = 50
width = 20
height = 20
speedH = 2
speedV = 2

def squre():
    global px, py, width, height, speedH, speedV
    ctx.clearRect(px, py, width, height)
    ctx.fillStyle = "red"
    px += speedH
    if px > 200:
        speedH=0
        py += speedV
    if py < 0 or (py + height) > canvas.height:
        speedV = -speedV
    ctx.fillRect(px, py, width, height)
    
squre()
    
game = None
    
def gametion(ev):
    global game
    if game is None :
        game = timer.set_interval(squre, 10)
        doc['start'].text = '暫停'
    elif game == 'hold':
        game = timer.set_interval(squre, 10)
        doc['start'].text = '暫停'
    else:
        timer.clear_interval(game)
        game = 'hold'
        doc['start'].text = '繼續'
doc["start"].bind("click", gametion)