1.第一堂課上課內容
說明arras.io這小遊戲的製作方式
//week07_1_arras01_background_fill_stroke_ellipse_rect_line
void setup(){
size(500,400);
}
float x=250,y=200;
void draw(){
background(215,184,200);//背景
fill(167,167,175);//砲管方體顏色
stroke(110,110,113);//邊線
strokeWeight(4);
rect(240,160,20,20);//位置
fill(204,102,156);//砲塔球體顏色
stroke(125,84,105);//球邊線顏色
strokeWeight(3);//邊線長度
ellipse(x,y,55,55);//位置
line(x,y,mouseX,mouseY);//拉一條會隨著滑鼠移動的線
}
先製造本體和砲管以及移動炮管的雛型
//week07_2_arras02_atan_cos_sin
void setup() {
size(500, 400);
}
float x=250, y=200;
void draw() {
background(215, 184, 200);//背景
float dx = mouseX-x, dy=mouseY-y;
float a = atan2(dy, dx);//atan2()算出角度
strokeWeight(20);//很粗的一條線,長度40
line(x, y, x+cos(a)*40, y+sin(a)*40);//cos()算出x方向,sin()算出y方向
fill(167, 167, 175);//砲管方體顏色
stroke(110, 110, 113);//邊線
strokeWeight(4);
rect(240, 160, 20, 20);//位置
fill(204, 102, 156);//砲塔球體顏色
stroke(125, 84, 105);//球邊線顏色
strokeWeight(3);//邊線長度
ellipse(x, y, 55, 55);//位置
//line(x, y, mouseX, mouseY);//拉一條會隨著滑鼠移動的線
}
//week07_3_arras03_atan_angle_rotate_translate
void setup() {
size(500, 400);
}
float x=250, y=200;
void draw() {
background(215, 184, 200);//背景
float dx = mouseX-x, dy=mouseY-y;
float a = atan2(dy, dx);//atan2()算出角度
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(4);
rect(20, -10, 20, 20);//位置
fill(204, 102, 156);//砲塔球體顏色
stroke(125, 84, 105);//球邊線顏色
strokeWeight(3);//邊線長度
ellipse(0, 0, 55, 55);//圓形的身體
}
創建一個坦克的函式，讓他可以根據滑鼠的位置來移動
2.第二節上課內容
//week07_4_arras04_background_for_line_line_void_keyPressed_keyCode
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(215, 184, 200);//背景
background(219);
stroke(214);
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);//atan2()算出角度
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(4);
rect(20, -10, 20, 20);//位置
fill(204, 102, 156);//砲塔球體顏色
stroke(125, 84, 105);//球邊線顏色
strokeWeight(3);//邊線長度
ellipse(0, 0, 55, 55);//位置
}
增加背景和上下左右移動
//week07_5_arras05_correct_move_translate_translate_mx_my
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(215, 184, 200);//背景
background(219);
translate(-x,-y);//讓全世界,都像反方向移動
translate(width/2,height/2);//把00移動到畫面正中心
float mx=mouseX+x-width/2,my=mouseY+y-height/2;
ellipse(mx,my,8,8);
stroke(214);//灰底的線
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);//atan2()算出角度
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(4);
rect(20, -10, 20, 20);//位置
fill(204, 102, 156);//砲塔球體顏色
stroke(125, 84, 105);//球邊線顏色
strokeWeight(3);//邊線長度
ellipse(0, 0, 55, 55);//位置
}
改變背景的移動方向，把0,0放到畫面正中心
//week07_6_arras06_vx_vy_void_keyPressed_void_keyReleased_void_draw
//希望能移動很順,因為keyPressed每秒的次數不夠快,要在void draw()裡移動它
void setup() {
size(500, 400);
}
void keyPressed(){//按下去時,會有速度,放開後,速度要變成0
if(keyCode==RIGHT) vx=1;//x+=1;
if(keyCode==LEFT) vx=-1;//x-=1;
if(keyCode==UP) vy=-1;//y-=1;
if(keyCode==DOWN) vy=1;//y+=1;
}
void keyReleased(){
if(keyCode==LEFT||keyCode==RIGHT)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);//把00移動到畫面正中心
float mx=mouseX+x-width/2,my=mouseY+y-height/2;
ellipse(mx,my,8,8);
stroke(214);//灰底的線
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);//atan2()算出角度
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(4);
rect(20, -10, 20, 20);//位置
fill(204, 102, 156);//砲塔球體顏色
stroke(125, 84, 105);//球邊線顏色
strokeWeight(3);//邊線長度
ellipse(0, 0, 55, 55);//位置
}
改變移動的速度
//week07_7_arras07_angle_bulletX_bulletY_bulletVX_bulletVY
//希望能移動很順,因為keyPressed每秒的次數不夠快,要在void draw()裡移動它
void setup() {
size(500, 400);
}
void keyPressed(){//按下去時,會有速度,放開後,速度要變成0
if(keyCode==RIGHT) vx=1;//x+=1;
if(keyCode==LEFT) vx=-1;//x-=1;
if(keyCode==UP) vy=-1;//y-=1;
if(keyCode==DOWN) vy=1;//y+=1;
}
void keyReleased(){
if(keyCode==LEFT||keyCode==RIGHT)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);//把00移動到畫面正中心
float mx=mouseX+x-width/2,my=mouseY+y-height/2;
ellipse(mx,my,8,8);
stroke(214);//灰底的線
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);//atan2()算出角度
angle = a;
line(x,y,mx,my);
pushMatrix();
myTank(x,y,a);
popMatrix();
if(bulletVX!=0 && bulletVY!=0){
bulletX += bulletVX;
bulletY += bulletVY;
ellipse(bulletX,bulletY,20,20);
}
}
float angle;
float bulletX=0,bulletY=0,bulletVX=0,bulletVY=0;
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(4);
rect(20, -10, 20, 20);//位置
fill(204, 102, 156);//砲塔球體顏色
stroke(125, 84, 105);//球邊線顏色
strokeWeight(3);//邊線長度
ellipse(0, 0, 55, 55);//位置
}
3.第三節上課內容
//week07_8_arras08_array_many_bullets
//希望能移動很順,因為keyPressed每秒的次數不夠快,要在void draw()裡移動它
void setup() {
size(500, 400);
}
void keyPressed(){//按下去時,會有速度,放開後,速度要變成0
if(keyCode==RIGHT) vx=1;//x+=1;
if(keyCode==LEFT) vx=-1;//x-=1;
if(keyCode==UP) vy=-1;//y-=1;
if(keyCode==DOWN) vy=1;//y+=1;
}
void keyReleased(){
if(keyCode==LEFT||keyCode==RIGHT)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);//把00移動到畫面正中心
float mx=mouseX+x-width/2,my=mouseY+y-height/2;
ellipse(mx,my,8,8);
stroke(214);//灰底的線
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);//atan2()算出角度
angle = a;
line(x,y,mx,my);
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;
int bulletN = 0;//一開始有0顆子彈,之後會慢慢增加
float []bulletX=new float[100];
float []bulletY=new float[100];
float []bulletVX=new float[100];
float []bulletVY=new float[100];
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(4);
rect(20, -10, 20, 20);//位置
fill(204, 102, 156);//砲塔球體顏色
stroke(125, 84, 105);//球邊線顏色
strokeWeight(3);//邊線長度
ellipse(0, 0, 55, 55);//位置
}
利用陣列的方式增加子彈的數量，但是沒辦法超過100個
//week07_9_arras09_recycle_bullet_move_right_to_left
//希望能移動很順,因為keyPressed每秒的次數不夠快,要在void draw()裡移動它
void setup() {
size(500, 400);
}
void keyPressed(){//按下去時,會有速度,放開後,速度要變成0
if(keyCode==RIGHT) vx=1;//x+=1;
if(keyCode==LEFT) vx=-1;//x-=1;
if(keyCode==UP) vy=-1;//y-=1;
if(keyCode==DOWN) vy=1;//y+=1;
}
void keyReleased(){
if(keyCode==LEFT||keyCode==RIGHT)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);//把00移動到畫面正中心
float mx=mouseX+x-width/2,my=mouseY+y-height/2;
ellipse(mx,my,8,8);
stroke(214);//灰底的線
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);//atan2()算出角度
angle = a;
line(x,y,mx,my);
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;
int bulletN = 0;//一開始有0顆子彈,之後會慢慢增加
float []bulletX=new float[100];
float []bulletY=new float[100];
float []bulletVX=new float[100];
float []bulletVY=new float[100];
void mousePressed(){
int i= bulletN;
bulletX[i]=x;
bulletY[i]=y;
bulletVX[i]=cos(angle);
bulletVY[i]=sin(angle);
bulletN ++;
if(bulletN==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];
}
bulletN=50;
}
}
void myTank(float x, float y,float a){
translate(x,y);
rotate(a);//大二圖學教的移動旋轉
fill(167, 167, 175);//砲管方體顏色
stroke(110, 110, 113);//邊線
strokeWeight(4);
rect(20, -10, 20, 20);//位置
fill(204, 102, 156);//砲塔球體顏色
stroke(125, 84, 105);//球邊線顏色
strokeWeight(3);//邊線長度
ellipse(0, 0, 55, 55);//位置
}
增加子彈的上限原本超過100就會當機，現在超過100會變為50
//week07_10_arras010_bulletT_for_timeout
//希望能移動很順,因為keyPressed每秒的次數不夠快,要在void draw()裡移動它
void setup() {
size(500, 400);
}
void keyPressed(){//按下去時,會有速度,放開後,速度要變成0
if(keyCode==RIGHT) vx=1;//x+=1;
if(keyCode==LEFT) vx=-1;//x-=1;
if(keyCode==UP) vy=-1;//y-=1;
if(keyCode==DOWN) vy=1;//y+=1;
}
void keyReleased(){
if(keyCode==LEFT||keyCode==RIGHT)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);//把00移動到畫面正中心
float mx=mouseX+x-width/2,my=mouseY+y-height/2;
ellipse(mx,my,8,8);
stroke(214);//灰底的線
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);//atan2()算出角度
angle = a;
line(x,y,mx,my);
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--;
}
}
println(bulletN);
}
float angle;
int bulletN = 0;//一開始有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);
bulletT[i] = 600;
bulletN ++;
if(bulletN==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];
}
bulletN=50;
}
}
void myTank(float x, float y,float a){
translate(x,y);
rotate(a);//大二圖學教的移動旋轉
fill(167, 167, 175);//砲管方體顏色
stroke(110, 110, 113);//邊線
strokeWeight(4);
rect(20, -10, 20, 20);//位置
fill(204, 102, 156);//砲塔球體顏色
stroke(125, 84, 105);//球邊線顏色
strokeWeight(3);//邊線長度
ellipse(0, 0, 55, 55);//位置
}
增加每顆子彈的壽命
4.上傳github
沒有留言:
張貼留言