by TakamiChie

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

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

3. 四角を描いてみよう

4. Javascriptの基本を確認しよう基本的に上から順番に実行する関数は、呼び出したときに実行される全体で使う変数は関数の外に書く変数名 = データ で、値を入力代入四角を描いてみようdocument.getElementByIdHTML内のtargetを、Javascriptで使うelmTarget.getContextペンを取るctx.fillStyleペンの「塗りつぶし」を「赤色」にするctx.fillRect塗りつぶされた四角形を描く

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, 00, 200, 400, 60・・0, 0 + 縦の位置 * 20

19. 結果を確認しよう

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

21. 図形を自動で動かしてみようsetInterval(関数名, 間隔)間隔に指定した時間ごとに、関数を呼び出す。単位はミリ秒(１秒の１０００分の１)setInterval(paint, 1000);Paint関数を１秒に１回呼び出す結果を確認しよう

22. 休憩