by TakamiChie

1. Javascript勉強会テトリス編～図形を描こう～ 2010年6月26日 ものづくり寺子屋

2. この時間の目的 四角を描いてみよう 四角を描いたり消したりしてみよう 図形を描いてみよう 図形を動かしてみよう 図形を自動で動かしてみよう

3. 四角を描いてみよう

5. 関数をHTMLから呼び出す onclick="main()“ ボタンをクリックしたときに、関数mainを呼び出す

6. 座標の書き方の違い グラフでは、右が＋、上が＋ Javascriptでは、右が＋、下が＋ 上下が逆になることに注意

7. 結果を確認しよう

8. 四角を描いたり消したりしてみよう

9. 四角を描いたり消したりしよう ctx.clearRect その領域のイラストを消す

10. ページが読み込まれたときに処理をする onload="main()“ ページが読み込まれたときに、関数mainを呼び出す

11. 結果を確認しよう

12. 図形を描いてみよう

13. 図形を描く

14. 図形を描く ctx.fillRect(0, 0, 20, 20); ctx.fillRect(20, 0, 20, 20); ctx.fillRect(20, 20, 20, 20); ctx.fillRect(20, 40, 20, 20);

15. 結果を確認しよう

16. 図形を動かしてみよう

17. 図形を四角一つ分ずつ、下に移動

18. 「一つ下」を計算してみる 左上の四角の位置に注目 0, 0 0, 20 0, 40 0, 60 ・ ・ 0, 0 + 縦の位置 * 20

19. 結果を確認しよう

20. 図形を自動で動かしてみよう

22. 休憩