1. week07_1_arras01_background_fill_stroke_ellipse_rect
1-1. 參考老師的砲台發射，先建立背景、砲台及發射線
1-2. 寫程式碼
```void setup() {
size(500, 400);
}
int x = 250, y = 200;
void draw() {
background(215, 184, 200);
fill(167, 167, 175);
stroke(110, 110, 113);
strokeWeight(3);
stroke(110, 110, 113);
strokeWeight(3);
rect(240, 160, 20, 20); //砲管位置及大小
fill(204, 102, 156);
stroke(125, 84, 105);
strokeWeight(2);
ellipse(x, y, 55, 55); //球體位置及大小
line(x, y, mouseX, mouseY);
}
stroke(125, 84, 105);
strokeWeight(2);
ellipse(x, y, 55, 55); //球體位置及大小
line(x, y, mouseX, mouseY);
}
```
2. week07_2_arras02_atan_cos_sin
2-1. 將 week07_1 的檔案另存新檔
2-2. 修改 + 新增程式碼
```
void setup() {
size(500, 400);
}
int x = 250, y = 200;
void draw() {
background(215, 184, 200);
line(x, y, mouseX, mouseY);
float dx = mouseX - x, dy = mouseY - y;
float a = atan2(dy, dx); //a是角度
strokeWeight(20); //很粗的一條線，長度是40
line(x, y, x + cos(a)*50, y + sin(a)*50); //cos()算出x方向，sin()算出y方向
fill(167, 167, 175);
stroke(110, 110, 113);
strokeWeight(3);
rect(240, 160, 20, 20); //砲管位置及大小
fill(204, 102, 156);
stroke(125, 84, 105);
strokeWeight(2);
ellipse(x, y, 55, 55); //球體位置及大小
line(x, y, mouseX, mouseY); //將程式碼移動到上面
}
```
3. week07_3_arras03_atan_angle_rotate_translate
3-1. 將 week07_2 的檔案另存新檔
3-2. 修改 + 新增程式碼
```
void setup() {
size(500, 400);
}
int x = 250, y = 200;
void draw() {
background(215, 184, 200);
line(x, y, mouseX, mouseY);
float dx = mouseX - x, dy = mouseY - y;
float a = atan2(dy, dx); //a是角度
line(x, y, mouseX, mouseY);
myTank(x, y, a);
}
void myTank(float x, float y, float a) {
translate(x, y); //大二圖學課教的移動
rotate(a); //大二圖學課教的旋轉
fill(167, 167, 175);
stroke(110, 110, 113);
strokeWeight(3);
rect(20, -10, 20, 20); //砲管位置及大小
fill(204, 102, 156);
stroke(125, 84, 105);
strokeWeight(2);
ellipse(0, 0, 55, 55); //球體位置及大小
}
```
4. week07_4_arras04_backgorund_for_line_line_void_keyPressed_keyCode
4-1. 將 week07_3 的檔案另存新檔
4-2. 修改 + 新增程式碼
```
void setup() {
size(500, 400);
}
void keyPressed(){
if(keyCode == RIGHT) x += 1;
if(keyCode == LEFT) x -= 1;
if(keyCode == UP) y -= 1;
if(keyCode == DOWN) y += 1;
}
float x = 250, y = 200;
void draw() {
background(219); //灰色的底
stroke(210); //灰色的線
strokeWeight(1);
for(int i = 0; i < 30; i++){
line(0, i*30, 500, i*30);
line(i*30, 0, i*30, 500);
}
float dx = mouseX - x, dy = mouseY - y;
float a = atan2(dy, dx); //a是角度
line(x, y, mouseX, mouseY);
myTank(x, y, a);
}
void myTank(float x, float y, float a) {
translate(x, y); //大二圖學課教的移動
rotate(a); //大二圖學課教的旋轉
fill(167, 167, 175);
stroke(110, 110, 113);
strokeWeight(3);
rect(20, -10, 20, 20); //砲管位置及大小
fill(204, 102, 156);
stroke(125, 84, 105);
strokeWeight(2);
ellipse(0, 0, 55, 55); //球體位置及大小
}
```
5. week07_5_arras05_correct_move_translate_translate_mx_my
5-1. 讓背景地圖跟著移動
5-2. 將 week07_4 的檔案另存新檔
5-3. 修改 + 新增程式碼
```
void setup() {
size(500, 400);
}
void keyPressed(){
if(keyCode == RIGHT) x += 1;
if(keyCode == LEFT) x -= 1;
if(keyCode == UP) y -= 1;
if(keyCode == DOWN) y += 1;
}
float x = 250, y = 200;
void draw() {
background(219); //灰色的底
translate(-x, -y); //全世界都往反方向移動
translate(width/2, height/2);
float mx = mouseX + x - width/2, my = mouseY +y - height/2;
ellipse(mx, my, 8, 8);
stroke(210); //灰色的線
strokeWeight(1);
for(int i = 0; i < 30; i++){
line(0, i*30, 500, i*30);
line(i*30, 0, i*30, 500);
}
float dx = mx - x, dy = my - y;
float a = atan2(dy, dx); //a是角度
line(x, y, mx, my);
myTank(x, y, a);
}
void myTank(float x, float y, float a) {
translate(x, y); //大二圖學課教的移動
rotate(a); //大二圖學課教的旋轉
fill(167, 167, 175);
stroke(110, 110, 113);
strokeWeight(3);
rect(20, -10, 20, 20); //砲管位置及大小
fill(204, 102, 156);
stroke(125, 84, 105);
strokeWeight(2);
ellipse(0, 0, 55, 55); //球體位置及大小
}
```
6. week07_6_arras06_vx_vy_void_keyPressed_void_keyReleased
6-1. 讓背景地圖跟著移動
6-2. 將 week07_5 的檔案另存新檔
6-3. 修改 + 新增程式碼
```
void setup() {
size(500, 400);
}
void keyPressed(){
if(keyCode == RIGHT) x += 1;
if(keyCode == LEFT) x -= 1;
if(keyCode == UP) y -= 1;
if(keyCode == DOWN) y += 1;
}
float x = 250, y = 200;
void draw() {
background(219); //灰色的底
translate(-x, -y); //全世界都往反方向移動
translate(width/2, height/2);
float mx = mouseX + x - width/2, my = mouseY +y - height/2;
ellipse(mx, my, 8, 8);
stroke(210); //灰色的線
strokeWeight(1);
for(int i = 0; i < 30; i++){
line(0, i*30, 500, i*30);
line(i*30, 0, i*30, 500);
}
float dx = mx - x, dy = my - y;
float a = atan2(dy, dx); //a是角度
line(x, y, mx, my);
myTank(x, y, a);
}
void myTank(float x, float y, float a) {
translate(x, y); //大二圖學課教的移動
rotate(a); //大二圖學課教的旋轉
fill(167, 167, 175);
stroke(110, 110, 113);
strokeWeight(3);
rect(20, -10, 20, 20); //砲管位置及大小
fill(204, 102, 156);
stroke(125, 84, 105);
strokeWeight(2);
ellipse(0, 0, 55, 55); //球體位置及大小
}
```
7. week07_7_arras07_angle_bulletX_bulletY_bulletVX_bulletVY
7-1. 讓子彈有辦法射出
7-2. 將 week07_6 的檔案另存新檔
7-3. 修改 + 新增程式碼
```
void setup() {
size(500, 400);
}
void keyPressed(){ //按下去時會有速度，放開後速度要變成0
if(keyCode == RIGHT) x += 1;
if(keyCode == LEFT) x -= 1;
if(keyCode == UP) y -= 1;
if(keyCode == DOWN) y += 1;
}
void keyReleased() {
if (keyCode == RIGHT || keyCode == LEFT) vx = 0;
if (keyCode == UP || keyCode == DOWN) vy = 0;
}
float x = 250, y = 200, vx = 0, vy = 0;
void draw() {
x += vx;
y += vy;
background(219); //灰色的底
translate(-x, -y); //全世界都往反方向移動
translate(width/2, height/2);
float mx = mouseX + x - width/2, my = mouseY +y - height/2;
ellipse(mx, my, 8, 8);
stroke(210); //灰色的線
strokeWeight(1);
for(int i = 0; i < 30; i++){
line(0, i*30, 500, i*30);
line(i*30, 0, i*30, 500);
}
float dx = mx - x, dy = my - y;
float a = atan2(dy, dx); //a是角度
line(x, y, mx, my);
angle = a;
pushMatrix();
myTank(x, y, a);
popMatrix();
if (bulletVX != 0 && bulletVY != 0) {
bulletX += bulletVX;
bulletY += bulletVY;
ellipse(bulletX, bulletY, 20, 20);
}
}
float angle, bulletX = 0, bulletY = 0, bulletVX = 0, bulletVY = 0; //子彈x, y的位置和速度
void mousePressed() {
bulletX = x;
bulletY = y;
bulletVX = cos(angle);
bulletVY = sin(angle);
}
void myTank(float x, float y, float a) {
translate(x, y); //大二圖學課教的移動
rotate(a); //大二圖學課教的旋轉
fill(167, 167, 175);
stroke(110, 110, 113);
strokeWeight(3);
rect(20, -10, 20, 20); //砲管位置及大小
fill(204, 102, 156);
stroke(125, 84, 105);
strokeWeight(2);
ellipse(0, 0, 55, 55); //球體位置及大小
}
```
8. week07_8_arras08_array_many_bullets
8-1. 讓子彈不只一發可以使用，擴充子彈數量
8-2. 將 week07_7 的檔案另存新檔
8-3. 修改 + 新增程式碼
```
void setup() {
size(500, 400);
}
void keyPressed(){ //按下去時會有速度，放開後速度要變成0
if(keyCode == RIGHT) x += 1;
if(keyCode == LEFT) x -= 1;
if(keyCode == UP) y -= 1;
if(keyCode == DOWN) y += 1;
}
void keyReleased() {
if (keyCode == RIGHT || keyCode == LEFT) vx = 0;
if (keyCode == UP || keyCode == DOWN) vy = 0;
}
float x = 250, y = 200, vx = 0, vy = 0;
void draw() {
x += vx;
y += vy;
background(219); //灰色的底
translate(-x, -y); //全世界都往反方向移動
translate(width/2, height/2);
float mx = mouseX + x - width/2, my = mouseY +y - height/2;
ellipse(mx, my, 8, 8);
stroke(210); //灰色的線
strokeWeight(1);
for(int i = 0; i < 30; i++){
line(0, i*30, 500, i*30);
line(i*30, 0, i*30, 500);
}
float dx = mx - x, dy = my - y;
float a = atan2(dy, dx); //a是角度
line(x, y, mx, my);
angle = a;
pushMatrix();
myTank(x, y, a);
popMatrix();
for (int i = 0; i < bulletN; i++) {
bulletX[i] += bulletVX[i];
bulletY[i] += bulletVY[i];
ellipse(bulletX[i], bulletY[i], 20, 20);
}
}
float angle; //一開始有0個子彈，之後會慢慢增加
int bulletN = 0;
float[] = bulletX = new float[100];
float[] = bulletY = new float[100];
float[] = bulletVX = new float[100];
float[] = bulletVY = new float[100];//子彈x, y的位置和速度
void mousePressed() {
int i = bulletN;
bulletX[i] = x;
bulletY[i] = y;
bulletVX[i] = cos(angle);
bulletVY[i] = sin(angle);
bulletN ++;
}
void myTank(float x, float y, float a) {
translate(x, y); //大二圖學課教的移動
rotate(a); //大二圖學課教的旋轉
fill(167, 167, 175);
stroke(110, 110, 113);
strokeWeight(3);
rect(20, -10, 20, 20); //砲管位置及大小
fill(204, 102, 156);
stroke(125, 84, 105);
strokeWeight(2);
ellipse(0, 0, 55, 55); //球體位置及大小
}
```
8-4. 發現問題：子彈只能射出一百發，超過會當機
9. week07_9_arras09_recycle_bullet_move_right_to_left
9-1. 讓子彈射出的總數超過100發也能繼續執行
9-2. 將 week07_8 的檔案另存新檔
9-3. 修改 + 新增程式碼
```
void setup() {
size(500, 400);
}
void keyPressed(){ //按下去時會有速度，放開後速度要變成0
if(keyCode == RIGHT) x += 1;
if(keyCode == LEFT) x -= 1;
if(keyCode == UP) y -= 1;
if(keyCode == DOWN) y += 1;
}
void keyReleased() {
if (keyCode == RIGHT || keyCode == LEFT) vx = 0;
if (keyCode == UP || keyCode == DOWN) vy = 0;
}
float x = 250, y = 200, vx = 0, vy = 0;
void draw() {
x += vx;
y += vy;
background(219); //灰色的底
translate(-x, -y); //全世界都往反方向移動
translate(width/2, height/2);
float mx = mouseX + x - width/2, my = mouseY +y - height/2;
ellipse(mx, my, 8, 8);
stroke(210); //灰色的線
strokeWeight(1);
for(int i = 0; i < 30; i++){
line(0, i*30, 500, i*30);
line(i*30, 0, i*30, 500);
}
float dx = mx - x, dy = my - y;
float a = atan2(dy, dx); //a是角度
line(x, y, mx, my);
angle = a;
pushMatrix();
myTank(x, y, a);
popMatrix();
for (int i = 0; i < bulletN; i++) {
bulletX[i] += bulletVX[i];
bulletY[i] += bulletVY[i];
ellipse(bulletX[i], bulletY[i], 20, 20);
}
}
float angle; //一開始有0個子彈，之後會慢慢增加
int bulletN = 0;
float[] bulletX = new float[100];
float[] bulletY = new float[100];
float[] bulletVX = new float[100];
float[] bulletVY = new float[100];//子彈x, y的位置和速度
void mousePressed() {
int i = bulletN;
bulletX[i] = x;
bulletY[i] = y;
bulletVX[i] = cos(angle);
bulletVY[i] = sin(angle);
bulletN ++;
if (bullenN = 100) {
for(int k = 0; k < 50; k++){
bulletX[k] = bulletX[k+50];
bulletY[k] = bulletY[k+50];
bulletVX[k] = bulletVX[k+50];
bulletVY[k] = bulletVY[k+50];
}
}
}
void myTank(float x, float y, float a) {
translate(x, y); //大二圖學課教的移動
rotate(a); //大二圖學課教的旋轉
fill(167, 167, 175);
stroke(110, 110, 113);
strokeWeight(3);
rect(20, -10, 20, 20); //砲管位置及大小
fill(204, 102, 156);
stroke(125, 84, 105);
strokeWeight(2);
ellipse(0, 0, 55, 55); //球體位置及大小
}
```
9-4. 發現問題：子彈要射出100發後才會消失並重複使用
week07_10_arras10_bulletT_for_timeout
10-1. 子彈消失就判斷
10-2. 將 week07_9 的檔案另存新檔
10-3. 修改 + 新增程式碼
```
void setup() {
size(500, 400);
}
void keyPressed(){ //按下去時會有速度，放開後速度要變成0
if(keyCode == RIGHT) x += 1;
if(keyCode == LEFT) x -= 1;
if(keyCode == UP) y -= 1;
if(keyCode == DOWN) y += 1;
}
void keyReleased() {
if (keyCode == RIGHT || keyCode == LEFT) vx = 0;
if (keyCode == UP || keyCode == DOWN) vy = 0;
}
float x = 250, y = 200, vx = 0, vy = 0;
void draw() {
x += vx;
y += vy;
background(219); //灰色的底
translate(-x, -y); //全世界都往反方向移動
translate(width/2, height/2);
float mx = mouseX + x - width/2, my = mouseY +y - height/2;
ellipse(mx, my, 8, 8);
stroke(210); //灰色的線
strokeWeight(1);
for(int i = 0; i < 30; i++){
line(0, i*30, 500, i*30);
line(i*30, 0, i*30, 500);
}
float dx = mx - x, dy = my - y;
float a = atan2(dy, dx); //a是角度
line(x, y, mx, my);
angle = a;
pushMatrix();
myTank(x, y, a);
popMatrix();
for (int i = 0; i < bulletN; i++) {
bulletX[i] += bulletVX[i];
bulletY[i] += bulletVY[i];
ellipse(bulletX[i], bulletY[i], 20, 20);
bulletT[i] --;
if (bulletT[i] == 0) { //要把i消滅掉，就要用右邊的拿來補
for (int k = i+1; k < bulletN; k++) {
//把右邊移動到左邊
bulletX[k-1] = bulletX[k];
bulletY[k-1] = bulletY[k];
bulletVX[k-1] = bulletVX[k];
bulletVY[k-1] = bulletVY[k];
bulletT[k-1] = bulletT[k];
}
bulletN --;
}
}
}
float angle; //一開始有0個子彈，之後會慢慢增加
int bulletN = 0;
float[] bulletX = new float[100];
float[] bulletY = new float[100];
float[] bulletVX = new float[100];
float[] bulletVY = new float[100];//子彈x, y的位置和速度
int[] bulletT = new int[100];
void mousePressed() {
int i = bulletN;
bulletX[i] = x;
bulletY[i] = y;
bulletVX[i] = cos(angle);
bulletVY[i] = sin(angle);
bulletN ++;
if (bullenN = 100) {
for(int k = 0; k < 50; k++){
bulletX[k] = bulletX[k+50];
bulletY[k] = bulletY[k+50];
bulletVX[k] = bulletVX[k+50];
bulletVY[k] = bulletVY[k+50];
}
}
}
void myTank(float x, float y, float a) {
translate(x, y); //大二圖學課教的移動
rotate(a); //大二圖學課教的旋轉
fill(167, 167, 175);
stroke(110, 110, 113);
strokeWeight(3);
rect(20, -10, 20, 20); //砲管位置及大小
fill(204, 102, 156);
stroke(125, 84, 105);
strokeWeight(2);
ellipse(0, 0, 55, 55); //球體位置及大小
}
```
沒有留言:
張貼留言