練習問題1, 2, 3の動作サンプルは、ここにあります。
第X回 テスト-
これまでの学んだ内容について確認テストをします(というか、各自でやっておいて下さい)。ycreportsフォルダ内の各自提出用フォルダに「mini_test」というフォルダを作り、そこに提出すること。範囲は、変数、関数、条件分岐、繰り返しです。よく復習しておいてください。来週解説します。
文字化けする場合は、文字エンコードをUnicodeにしてください。
-->
第6回 Canvasを使ったお絵かき(1)-基本図形の描画1-
今日の目標
- canvasを使ってお絵かきができるようになる。
- 多重ループ(繰り返しの入れ子)を使って様々な図形を描画できる。
参考スライド
参考ページ
お絵かきの例
練習問題
全てボタンをクリックすると実行されるようにすること。
- 正六角形を描画するプログラムを改良し、正N角形を描画するプログラムを作成しなさい。Nはテキストボックスから入力するものとする。
- スライドをよく読み、図形1🏁を描画するプログラムを作成しなさい。繰り返しの入れ子を使うこと(以下2問同様)。
- 図形2のような図形を描いてみましょう。
- 図形3のような図形を描いてみましょう。
第7回 Canvasを使ったお絵かき(2)-基本図形の描画2-
先週の続きです。
練習問題
- 三角形を描画するプログラムを改良し、塗り潰しの色と透明度をそれぞれテキストボックスから指定できるようにしなさい(色はredのようにアルファベットでよい)。デフォルトの色は黒、透明度は0.5である。
- 上記を改良し、ボタンをクリックする度にランダムに塗り潰しの色が変わるようにしなさい。
- 塗り潰しの色を変えるには、
ctx.fillStyle = 'rgb(r, g, b)';を使う。r,g,bはそれぞれ赤、緑、青の三原色を表す変数であり、0~255の数値をとる。例えば、let g = Math.floor(Math.random() * 256); のように、ランダムな0~255までの乱数を変数に代入しておくと、3つの変数の組み合わせでランダムな色で図形が塗りつぶされる。クォーテーションの位置に注意(rgb(は文字列、rは変数、,は文字列、のようなかんじ)。
- 円弧を描画するプログラムを改良し、半径、startAngleとendAngle、anticlockwise(円弧を描画する向き)、塗り潰しの色をそれぞれテキストボックスから指定できるようにしなさい。startAngleとendAngleはラジアンで入力するものとする。
- canvas内のランダムな座標を始点にして、ランダムな座標まで直線を描画するプログラムを繰り返し文を使って改良し、一度に1000のランダムな直線を描画できるようにしなさい。
- **モンテカルロ法のプログラムを完成させなさい。大枠だけの穴あきプログラムはここにあるので、埋めてください。あまり助けにならないヒント
第8回 Canvasを使ったお絵かき(3)-アニメーション1-
今日の目標
- タイマー処理(setInterval()関数)を使ってアニメーションを表示することができるようになる。
練習問題
練習問題1,2,3の動作サンプルはここ。ボールの色、大きさ、速さ等は適当に変えて良い。
- クリックするとボールが一コマ動くサンプルプログラムをタイマーを使って改良し、ボタンをクリックするとボールが一定の速度で動くようにしなさい。
- ボールがCanvasの端っこに来たらボールがバウンドするように改良しなさい。サンプルコードのコメントをよく読むこと。
- ストップボタンを作り、クリックするとアニメーションが止まるようにしなさい。
第9回 Canvasを使ったお絵かき(4)-アニメーション2-
今日の目標
配列については、基礎プロ1の第10回に説明があります。
練習問題
先週のボールアニメーションの続きです。
- 先週のボールを動かすアニメーションで、ボールの塗り潰しの色の初期値をランダムにしてみましょう。第8回の練習問題2参照。
- 配列を使って複数のボールを動かしてみましょう。ボールの初期位置、移動量、半径、色をランダムにします。必ず分かりやすいコメントをつけること。
***hint***
複数のボールのパラメータを配列で管理します。初めに空の配列を作っておきます。ボタンをクリックしてinit()が呼ばれると、繰り返し文を使って(作成するボールの数だけ)各パラメータの配列にランダムな値を追加していきます。繰り返しが終わってボールの初期値が決まった後にinit()からdrawBowl()がタイマーで呼ばれます。
drawBowl()内では、繰り返し文を使って個数分のボールを描画します。ボールが1つの場合、locX[0], locY[0], speedX[0], speedY[0], radius[0], r[0], g[0], b[0]がそのボールのパラメータになります。ボールが2つなら、配列の要素が2つに増えて、2つめのボールのパラメータはlocX[1], locY[1], speedX[1], speedY[1], radius[1], r[1], g[1], b[1]となります。つまり、ボールの個数分だけ配列の要素が増えます。
ボールが5つの場合、例えばlocXの初期化についてはinit()で次のような繰り返し文を書けばよいでしょう。
for(let i=0; i<5; i=i+1){locX[i] = Math.random()*400;} //0~400未満(canvasの幅)の乱数をlocX[i]に追加する。iは0~4まで増える。
あとは穴あきプログラムとボールいっこを動かすサンプルプログラムをよく読んでください。
- *上記の動作サンプルにはバグがあります。「ボールを動かす」ボタンを複数回押すと、ボールの速度が速くなり、「とめる」ボタンを押してもアニメーションが止まりません。何故でしょうか?原因を考え、改善しなさい(改善した動作サンプル)。
第10回 Canvasを使ったお絵かき(5)-アニメーション3-
先週の続きです。原理は先週と同じなので、ノーヒント。
- 「円をかく」ボタンをクリックすると、円が拡大しながら表示されるようにしなさい。拡大するスピードは適当でよい(サンプルでは5)。「とめる」ボタンをクリックするとタイマーが止まるようにすること。動作サンプル
- 問題2を改良します。円の半径がcanvasの幅と等しくなったら縮小し、0になったら拡大するようにしなさい。「とめる」ボタンをクリックするとタイマーが止まるようにすること。動作サンプル
- 一辺が10の正方形をランダムな座標に表示していくプログラムを作成しなさい。塗り潰しの色もランダムにすること。stopボタンをクリックするとタイマーが止まるようにすること。動作サンプル
- 問題3を改良します。clearボタンをクリックするとcanvasに描画された正方形が全て消去されるようにしなさい(canvasを白紙に戻すには、clearRect()を使う)。動作サンプル
第11回 Canvasを使ったお絵かき(6)-ボールゲーム1-
今日の目標
ただボールが動くだけでは面白くないので、今回と次回で落ちてきたボールをパッドで受け取るゲームを作っていきます。
- タイマーの復習
- キー入力を使ったアニメーションを作れるようになる。
練習問題
今日の完成形はこちら。
- 次のサンプルプログラムは、タイマーを使ってボールが上から落ちてくるプログラムです(まだ未完成なので動きません)。update関数の中のコメント部分を埋めてプログラムを完成させなさい。以前作ったボールアニメーションは、ボールが上下左右の壁にぶつかると跳ね返りましたが、今回は左右の壁に当たった時のみ跳ね返り、ボールが下端に到達したらまた上から落ちてくるようにします。
- 次のサンプルプログラムは、(いったんボールは忘れて)パッドを中央下端に表示するプログラムです。コメントを良く読み、未完成部分を埋めてプログラムを完成させなさい。
- まず、パッドに関連する変数を初期化します。パッドはfillRect(任意の四角形を描画する関数)を使って描画するので、パッドの横幅、縦幅、パッドの左上頂点のx座標が必要になります。それぞれ適切に初期化してください。(最初はパッドが画面中央下端に表示されるようにする)。
- drawPaddle関数の中を埋めます。基本構造はdrawBallと同じ。fillRect()で画面中央下端にパッドを表示します。
- 次のサンプルプログラムは、練習問題2で描画したパッドをキーボードの矢印キーで左右に動かすプログラムです。コメント部分を埋めてプログラムを完成させなさい。
- 新たに、左右のキーが押されてるかどうかの状態を記憶する2つの変数rightPressedとleftPressedを用意し、初期値をfalse(押されてない)にしておきます。
- 次に、addEvemtListenerを使ってキー入力を受け付けます。
- addEvemtListenerは、イベントに応じて任意の関数を呼び出します。
- プログラム中の document.addEventListener('keydown', keyDownHandler, false); は、'keydown'イベント、つまり何かしらのキーが押されると、第二引数に指定したkeyDownHandler関数を実行します。
- 'keyup'イベントは、これまで押されていたキーが押されない状態になったことを意味します。
- つまり、このプログラムでは何かしらのキーが押されるとkeyDownHandler関数が、押されていたキーが離されるとkeyUpHandler関数が実行されます。
- keyDownHandler関数は、押されたキーが左右どちらかによって変数rightPressedあるいはleftPressedをtrueにします(キーが押されている状態)。eという引数の中には色々なイベント情報が入っていて、例えばkeyDownHandler関数でe.keyは押されたキーの種類を表します。
- keyUpHandler関数も同様。
- update関数内で、パッドを描画する(drawPaddle();)とともに左右のキー入力に応じてpadxの値を更新します(右キーが押されていればpadxを増やす、左キーが押されていれば減らす)。この部分を書いてください。
- このままだと、キーを押しっぱなしにしているとパッドが画面からはみ出てしまいます。左右の端からパッドがはみ出ないようにしなさい。
- 練習問題1(ボールを動かす)と練習問題3(パッドを動かす)を合体させて一つのプログラムにしなさい。パッドでボールを受け取ったりする処理は考えなくてよい。
第12回 Canvasを使ったお絵かき(7)-ボールゲーム2-
前回の続きで、ボールゲームを完成させます。
今週の目標
ゲームのおおまかな仕様
- 最初はボール1個。キャンバスの上端のランダムなx座標から落ちてくる。
- ボールがキャンバスの左右の壁にぶつかると、跳ね返る。
- ボールがキャンバスの下端までくると、また上に戻って落ちてくる。
- パッドは左右の矢印キーで操作する。ただし、キャンバスの左右の壁を突き抜けないようにする。
- パッドがボールを受け取れたら、得点が1増える。
- 受け取れなかったら、ミスの回数が1増える。
- スコアとミスの回数はキャンバスの左上あたりに表示する。
- ボールをn個キャッチし損なうと、ゲームオーバーのアラートが表示され、タイマーが止まりゲーム終了。
- ボールをキャッチする度にスピードが上がる。
- ボールをm個キャッチできたら、スピードはゲーム開始時に戻り、ボールの個数が1個増える。
- 今のところ、特にクリア条件は設けていない。
- 自分なりの工夫をすること(下のサンプルでは、ボールを5個キャッチするとパッドの幅が減少する)。
- ボールのスピードや半径、パッドの大きさは適当に設定してよい。
- くれぐれも無理ゲーにしないこと。
練習問題
今回の完成形はこちら。
- ボールが落ちてくる時のx座標をランダムにする。
- 衝突判定(パッドでボールをキャッチしたら得点が入り、ボールは消えて上からまた落ちてくる)を実装する。
- ボールのx, y座標がパッドの範囲内に収まってるか判定する。
- キャッチ出来たかに関わらず、ボールが下端まで来た時の処理はここに書く。
- スコアとミスの回数を表示する(ctx.font = '50px serif'; fillText(文字列, x, y);で表示)。
- ゲームオーバー機能(ボールをn個取り損なったらゲームオーバーのアラートを出してタイマーをクリアする)を実装する(nは適当に調節する。採点しやすいようにお願いします・・)。
- ボールをキャッチする度にスピードが上がる(採点できないような無理ゲーにしないでください・・)。
- ボールをm個キャッチしたら、スピードが初期値に戻り、ボールが一つ増える。以下同様に繰り返す。mは適切に調節すること。
- その他工夫して何かしら機能を追加する。上のサンプルではボールをキャッチする度にパッドの幅が減少する。他に、パッドから弾丸を発射する、ランダムで得点の多いボールが出現する、クリア条件をつくる、など。
最終課題について
Canvasを使って面白いWebサイトを作って下さい(アニメーションやゲームなど)。要件は以下の通りです。最後の授業でレビューします。
最終課題の要件
- 概要(目的、対象者、概要、セールスポイント、操作方法等必要に応じて)をわかりやすく記載すること。トップページに記載することが望ましい
- Canvasを使うこと
- 繰り返し(for文、またはwhile文)を使うこと
- 条件分岐(if文、またはswitch文)を使うこと
- 配列を使うこと
- CSSを使うこと
- タイマーを使うこと
- 面白い&&オリジナリティのある作品は加点します
- コードにはコメントを詳細につけること。インデントを適切につけて読みやすいように工夫すること
- 必ず自力でやってください(パクリ不可)
課題のサンプル
参考
最終課題の提出方法
- 各自の課題提出用フォルダに(1,2,3等と同じように)finalというフォルダを作り、そこに提出すること。
- 発表後、最終締め切り日は1/26です。
第13回 テスト(と最終課題の作業)
変数、関数、繰り返し、条件分岐、配列、、canvasに関する問題は出ません。
第14回 最終課題の発表
作品紹介