論理思考とプログラミング 第10回 - keio universityskk/lt2009f/material/10/...–...

23
論理思考とプログラミング 論理思考とプログラミング 10

Upload: others

Post on 30-Jul-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

論理思考とプログラミング論理思考とプログラミング第10回第 回

Page 2: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

授業の準備授業の準備

論プ デ タ を立 げま う• 論プロエディターを立ち上げましょう.

• File‐>NewProjectと選んでFile >NewProjectと選んで,kougi10 

を作成してください (今日使うかはわからなを作成してください.(今日使うかはわからないですが^^;)

Page 3: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

先週の復習先週の復習

複数のタ トルの作成方法• 複数のタートルの作成方法– タートルへの命令

コンピ タへの同時命令• コンピュータへの同時命令• 自分が作ったプログラムの取り込み方法オブジ クトに対するさまざまな命令群• オブジェクトに対するさまざまな命令群

• 画像を表示させる方法ボ• キーボード入力

– キーコード

• マウスに関する情報取得• あたり判定

Page 4: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

複数のタートルの作成方法複数のタートルの作成方法

する• new Turtle とすること

で,新たなタートルを,新 なタ を作成できる.

Page 5: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

コンピュータへの同時命令コンピュータへの同時命令

• コンピュータはある瞬間には一つの命令しか• コンピュ タはある瞬間には つの命令しかこなせません.

プログラム

足し算,掛け算などの簡単な命令

プログラム

メモリ CPUHDD

メモリ CPU

10ms(1/100s)毎程度で切り替える

t (CPU)

Page 6: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

自分が作ったプログラムの取り込み方法

タ ト を使 家を各プ グ ム• タートルを使って,家を各プログラム(House.java) を,他のプログラムから利用するとが きますことができます.

• fdなどの命令は,house.fd(5); ( );などのようにして指定します.

Page 7: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

アニメーションを行う際に必要となる様々な命令

命令 内容 例

sleep(x) x 秒プログラムの動作を休止させる

sleep(0.1); // 0.1 秒止めるさせる

update() 画面を書き換える.update してはじめてタートルなどの動きが実際に画面に表意jされ

update(); 

きが実際に画面に表意jされる.

warp(x, y) x, y の位置にオブジェクトを移動させる と の間はカンマ

hoge.warp(10, 100); // x=10, y=100 の位置に h を移動動させる.x と y の間はカンマ. 位置に hogeを移動.

getX() 現在のオブジェクトの x 座標を取得.

int x = hoge.getX(); // x に hogeの x座標を保存.

getY() 現在のオブジェクトの y 座標を取得.

int y = hoge.getY(); // y に hogeの y 座標を保存.

size(x y) オブジェクトの縦横の大きさ hoge size(10 20); //横:10 縦:20の大size(x, y) オブジェクトの縦横の大きさを指定する.

hoge.size(10,20); // 横:10, 縦:20の大きさにする.

Page 8: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

アニメーションを行う際に必要となる様々な命令

getWidth() オブジェクトの横幅を取得. int x = hoge.getWidth(); // x に hogeの横幅を保存.

getHeight() オブジェクトの縦の大きさを int y = hoge getHeight(); // yに hogegetHeight() オブジェクトの縦の大きさを取得.

int y = hoge.getHeight(); // y に hogeの縦の長さを保存.

scale(x) オブジェクトを x 倍する. hoge.scale(0.5); // hogeの大きさを 0.5 倍する倍する.

large(x) 現在の大きさを縦,横ともに,x 大きくする.

hoge.large(20); // hogeの縦と横を 20 ずつ大きくする.

small(x) 現在の大きさを縦,横ともに,x 小さくする.

hoge.small(20); // hogeの縦と横を 20 ずつ小さくする.

wide(x) オブジェクトの横幅を x大きく hoge wide(20); // hogeの横を 20大きwide(x) オブジェクトの横幅を x 大きくする.

hoge.wide(20); // hogeの横を 20 大きくする.

narrow(x) オブジェクトの横幅を x 小さくする

hoge.narrow(20); // hogeの横を 20 小さくするする. さくする.

Page 9: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

tall(x) オブジェクトの縦幅を x大きく hoge tall(20); // hogeの縦を 20大きくtall(x) オブジェクトの縦幅を x 大きくする.

hoge.tall(20); // hogeの縦を 20 大きくする.

little(x) オブジェクトの縦幅を x 小さくする

hoge.little(20); // hogeの縦を 20 小さくするする. くする.

show() オブジェクトを出現させる. hoge.show(); // hogeを出現させる.

hide() オブジェクトを隠す. hoge.hide(); // hogeを隠す.() オ ジ ク を隠す g (); // g を隠す

isShow() オブジェクトが現在隠されているかを調べる.

hoge.isShow(); //表示されていればtrue, 隠れていれば false が返る.

h ( /f l ) と書けばオブジ クトを h h ( ) // h 表示show(true/false) trueと書けばオブジェクトを表示.false と書けばオブジェクトを隠す.

hoge.show(true);  // hoge表示.hoge.show(false);  // hoge隠す.

show(!isShow()) この組み合わせで,オブジェクトを点滅させられる.

hoge.show(!isShow()); // hogeを点滅.

looks(x) オブジェクトの見た目を x と同 hoge.looks(fuga); // hogeの見た目を( ) 見じにする.

g ( g ); // g 見fugaにする.

text(x) TextTurtleの文字を x にします

TextTurtle t = new TextTurtle(“”); t text(“hoge”); // tオブジェクトの表示す. t.text( hoge ); // t オブジェクトの表示を“hoge” にします.

Page 10: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

タートルの座標系タートルの座標系

Page 11: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

画像の表示方法画像の表示方法

I T tl クラスを使うと 画像読み込みがで• ImageTurtleクラスを使うと,画像読み込みができます!

ImageTurtle kame = new ImageTurtle(“kame jpg”);使い方:

ImageTurtle kame = new ImageTurtle( kame.jpg ); クラス名 変数名 クラス名 ファイル名おまじない

.java ファイルと同じディ

レクトリに画像ファイルを置く必要がある.

ex) RonproEditor185/MyProjects/kougi10/ の中など

Page 12: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

キーボード関連の命令キーボード関連の命令

命令 押されたキ ボ ド 番 を表• key() 命令:押されたキーボードの番号を表示する.

keykode 変数にキーボードの番号を保存する例:

int keycode = key(); y

よく使うキーコードの例:

393740

38

40

Page 13: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

マウス関連の命令マウス関連の命令• マウスの座標取得ができる.

– mouseX(); // X 座標取得

– mouseY(); // Y 座標取得

3030

mouseX(); // 30mouseY(); // 20 

20

Page 14: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

マウス関連の命令マウス関連の命令

• mouseDown() – マウスが押されたかどうかを判定する.ウ 押された う を判定する

– if 文と一緒に使いましょう.

if (mouseDown()) { //マウスが押されていた時の処理// マウスが押されていた時の処理

}}

Page 15: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

オブジェクト同士のあたり判定オブジェクト同士のあたり判定

()命令でぶ か たかどうかの判定• intersects() 命令でぶつかったかどうかの判定ができます!

• mouseDown同様,if 文と一緒に使いましょう.

ImageTurtle car = new ImageTurtle(“car.jpg”); ImageTurtle dora = new ImageTurtle(“dora jpg);ImageTurtle dora = new ImageTurtle( dora.jpg); 

if (dora intersects(car) ) {if (dora.intersects(car) ) { ぶつかったぞ!

}}

Page 16: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

その他その他

ズ 変• 画面サイズの変更window.size(x座標, y座標); ( , y );

Page 17: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

本日の予定本日の予定

まずは先週の残りを進めます• まずは先週の残りを進めます.

• スライドはウェブに掲載されているので,命令のリストなどを参考にしてプログラムを作成してくださいなどを参考にしてプログラムを作成してください.

先週 分が終わ る人は 章を進め くださ• 先週の分が終わっている人は,12章を進めてください.

12章 「12 6 1中心角を指定して円弧を描くメソッドを作ろ– 12章:「12.6.1中心角を指定して円弧を描くメソッドを作ろう」

– 12章:「12.6.2円弧を描くメソッドを使って猫の目を描こう」12章: 12.6.2円弧を描くメソッドを使って猫の目を描こう」

– 12章:「12.6.3円弧を描くメソッドを使って蝶を描こう」

– 12章:「12.6.4円弧を描くメソッドを使って花を描こう」章 弧を描 を使 花を描 う」

Page 18: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

本日の課題本日の課題

• 終授業で作るものの設計図を作りましょう• 終授業で作るものの設計図を作りましょう.• 来週,授業時に確認します.

• パワーポイントを使って,画面の構成図を考えましょう.

• それぞれの要素がどのような動きや役割を持つのかを書き込みます.

• 以下のプログラミング的な要素が入るようにします.以下のプ グラミング的な要素が入るようにします– テキスト表示– あたり判定– アニメーション– アニメ ション– キーボードまたはマウスの利用

• スライドの1枚目に,以下の情報を書く.ゲ ムタイトル– ゲームタイトル

– 学籍番号,ログイン名,名前

• 提出は,授業ウェブから.

Page 19: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

例たくさん打てる 例1000 point

横スクロールゲーム‐弾は何発でも打てる.(Enter で弾発射)‐敵は画面中10匹程度出現.ふよふよ動く.敵にぶ か たら死亡

1画面中 大10匹

‐敵にぶつかったら死亡.‐自機はカーソルキーで上下に移動.‐敵を倒すとポイントアップ.

Page 20: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

配列配列

だま編 使 た「 れ物 版• ことだま編で使った「入れ物」の java 版.

• 同じオブジェクト(例:ImageTurtle)をいくつも格納しておける ち と特殊なデ タ型格納しておける,ちょっと特殊なデータ型.

0 1 2 3 4 5 6 7 8 添え字

a.jpg b.jpg c.jpg d.jpg e.jpg f.jpg g.jpg h.jpg i.jpg

0 1 2 3 4 5 6 7 8 添え字

ブツ

Page 21: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

配列使い方

i j il A Li準備

import java.util.ArrayList; 初期化

プログラムの1行目に書く.

ArrayList array = new ArrayList(); 追加

ImageTurtle hoge = new ImageTurtle(“hoge.jpg”); ImageTurtle fuga = new ImageTurtle(“fuga.jpg”); g g g ( g jpg )array.add(hoge); array.add(fuga); y ( g )

0 1 配列の添え字

hoge fuga ImageTurtleの配列

Page 22: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

配列使い方2

取り出し方 配列のサイズを取得

添え字に入っているImageTurtleを取り出す取り出し方

for (int i=0; i<array.size(); i++) {

配列のサイズを取得 取り出す

ImageTurtle hoge = (ImageTurtle)array.get(i); hoge.warp(100, 100);

}

削除方法

取り出したものがImageTurtleであると明示する

削除方法

array.remove(10); 添え字のImageTurtleを削除する

Page 23: 論理思考とプログラミング 第10回 - Keio Universityskk/lt2009f/material/10/...– 12章「章:「126112.6.1中心角を指定して円弧を描くメソッドを作ろ中心角を指定して円弧を描くメソッドを作ろ

配列import java util ArrayList;

使い方3import java.util.ArrayList; public class TestArray extends Turtle {

public static void main(String[] args) {Turtle.startTurtle(new TestArray());Turtle.startTurtle(new TestArray());

}

public void start() {p () {ArrayList a = new ArrayList();

ImageTurtle imageA = new ImageTurtle(“hoge.jpg”); ImageTurtle imageB = new ImageTurtle(“fuga.jpg”); a.add(imageA); a.add(imageB);

for (int i=0; i<a.size(); i++){ImageTurtle muga = (ImageTurtle)a.get(i);

h ()muga.show(); }update();

}}}