# 期中報告--程式設計 ### 作業目標 畫一個自畫像,隨著滑鼠游標移動中 按一下可以跳動,跟自由落體一樣的往下跳 --- ### 流程圖 ![](https://i.imgur.com/rnzZfid.png) --- ### 功能 人像追蹤鼠標 滑鼠點擊後將人像開始自由落體,人像超出畫面時回到(0,0)重新開始 再次點擊回到追蹤鼠標模式 ![](https://i.imgur.com/Bm27Rug.gif) --- ```javascript= function setup() { createCanvas(windowWidth, windowHeight); background(255); } var count=0 var mx=0 var my=0 var v_x=3 var v_y=3 function draw() { if(count==0) { background(255); strokeWeight(5) fill(255, 230, 187); ellipse(mouseX, mouseY, 300, 350);//臉 strokeWeight(1) fill(38,24,0) rect(mouseX-10,mouseY-105,100,5)//頭髮 fill(38,24,0) rect(mouseX-20,mouseY-110,120,5)//頭髮 fill(38,24,0) rect(mouseX-30,mouseY-115,140,5)//頭髮 fill(38,24,0) rect(mouseX-40,mouseY-120,150,5)//頭髮 fill(38,24,0) rect(mouseX-55,mouseY-125,160,5)//頭髮 fill(38,24,0) rect(mouseX-100,mouseY-130,200,5)//頭髮 fill(38,24,0) rect(mouseX-95,mouseY-135,190,5)//頭髮 fill(38,24,0) rect(mouseX-90,mouseY-140,180,5)//頭髮 fill(38,24,0) rect(mouseX-85,mouseY-145,170,5)//頭髮 fill(38,24,0) rect(mouseX-80,mouseY-150,160,5)//頭髮 fill(38,24,0) rect(mouseX-75,mouseY-155,150,5)//頭髮 fill(38,24,0) rect(mouseX-65,mouseY-160,130,5)//頭髮 fill(38,24,0) rect(mouseX-55,mouseY-165,110,5)//頭髮 fill(38,24,0) rect(mouseX-45,mouseY-170,90,5)//頭髮 fill(38,24,0) rect(mouseX-25,mouseY-175,50,5)//頭髮 fill(64,40,0) rect(mouseX-80,mouseY-60,40,10)//眉毛 fill(64,40,0) rect(mouseX+30,mouseY-60,40,10)//眉毛 fill(242, 242, 242); ellipse(mouseX-60,mouseY-20,30, 30);//眼 fill(242, 242, 242); ellipse(mouseX+50,mouseY-20, 30, 30);//眼 fill(0, 0, 0); ellipse(mouseX-60,mouseY-20, 10+random(-5,5), 10+random(-5,5));//眼球 fill(0, 0, 0); ellipse(mouseX+50,mouseY-20, 10+random(-5,5), 10+random(-5,5));//眼球 fill(0,0,0) rect(mouseX-25,mouseY+90,50, 5)//嘴巴 fill(0,0,0) rect(mouseX-30,mouseY+85,5, 5)//嘴巴 fill(0,0,0) rect(mouseX-35,mouseY+80,5, 5)//嘴巴 fill(0,0,0) rect(mouseX-40,mouseY+75,5, 5)//嘴巴 fill(0,0,0) rect(mouseX+25,mouseY+85,5, 5)//嘴巴 fill(0,0,0) rect(mouseX+30,mouseY+80,5,5 )//嘴巴 fill(0,0,0) rect(mouseX+35,mouseY+75,5, 5)//嘴巴 } else { background(255); strokeWeight(5) fill(255, 230, 187); ellipse(mx,my, 300, 350); strokeWeight(1) fill(38,24,0) rect(mx-10,my-105,100,5) fill(38,24,0) rect(mx-20,my-110,120,5) fill(38,24,0) rect(mx-30,my-115,140,5) fill(38,24,0) rect(mx-40,my-120,150,5) fill(38,24,0) rect(mx-55,my-125,160,5) fill(38,24,0) rect(mx-100,my-130,200,5) fill(38,24,0) rect(mx-95,my-135,190,5) fill(38,24,0) rect(mx-90,my-140,180,5) fill(38,24,0) rect(mx-85,my-145,170,5) fill(38,24,0) rect(mx-80,my-150,160,5) fill(38,24,0) rect(mx-75,my-155,150,5) fill(38,24,0) rect(mx-65,my-160,130,5) fill(38,24,0) rect(mx-55,my-165,110,5) fill(38,24,0) rect(mx-45,my-170,90,5) fill(38,24,0) rect(mx-25,my-175,50,5) fill(64,40,0) rect(mx-80,my-60,40,10) fill(64,40,0) rect(mx+30,my-60,40,10) fill(242, 242, 242); ellipse(mx-60,my-20,30, 30); fill(242, 242, 242); ellipse(mx+50,my-20, 30, 30); fill(0, 0, 0); ellipse(mx-60,my-20, 10+random(-5,5), 10+random(-5,5));// eye ball fill(0, 0, 0); ellipse(mx+50,my-20, 10+random(-5,5), 10+random(-5,5));// eye ball fill(0,0,0) rect(mx-25,my+90,50, 5) fill(0,0,0) rect(mx-30,my+85,5, 5) fill(0,0,0) rect(mx-35,my+80,5, 5) fill(0,0,0) rect(mx-40,my+75,5, 5) fill(0,0,0) rect(mx+25,my+85,5, 5) fill(0,0,0) rect(mx+30,my+80,5,5 ) fill(0,0,0) rect(mx+35,my+75,5, 5) mx= mx+v_x my= my+v_y v_y=v_y+0.6 if(my>height-160) { v_y =-v_y*0.8 my=height-160 } if(mx>width) { mx=50 my=50 } } } function mousePressed() { count++ if (count>1) { count=0 } } ```