黃姓小女紙寫程式~~ Week03

2019.3.20

1.使小白球上下左右移動:

    程式碼:

              void setup(){

                  size(400,400);

              }

              int userX=200,userY=200;

              void draw(){

                  background(128);

                  circle(userX,userY,20);

                  if(keyPressed && keyCode==RIGHT) userX+=3;

                  if(keyPressed && keyCode==LEFT) userX-=3;

                  if(keyPressed && keyCode==UP) userY-=3;

                  if(keyPressed && keyCode==DOWN) userY+=3;

              }

     程式碼解讀:

           size(400,400); 畫布大小400x400， int userX=200,userY=200;設定userX,userY的座標，
           background(128);背景為灰色， circle(userX,userY,20); 設定我們的小白球為半徑20，
           if(keyPressed && keyCode==RIGHT) userX+=3;

           if(keyPressed && keyCode==LEFT) userX-=3;

           if(keyPressed && keyCode==UP) userY-=3;

           if(keyPressed && keyCode==DOWN) userY+=3;
           上面四句分別設訂出上下左右四個鍵的移動設定，keyPressed的意思是"按下"，
            keyCode的意思是"按鍵"

      心得:

          在這邊跟上週所學的都差不多，所以非常容易寫出來，只是多了keyCode的用法而已。

           

2.讓圖畫代替小白球動起來:

   課程流程:

 第一步我們跟上面一樣，只是把小白球變成了圖片，多了些圖片的用法，如下圖

             我們會看到多了img=loadImage("圖檔名稱")；這一行，他的意思是設定img這個單詞          為這個圖片，應該不難理解!!在draw畫出中，也多了宣告圖片，而在最後面的300,200代表        了圖片的長寬。

             關於設定圖片的方法，就是在小畫家畫出喜歡的圖片，並再丟到powerpoint去背就好          了，非常的簡單，如果不去背，就會是一大張圖片在那邊動，附上我畫的可愛鸚鵡好了。

             進階的第二步是，在圖片上下左右中做出不同的表情做出改變，看下圖的程式碼比對        看看就會知道哪裡不同。

程式碼:

        PImage img1,img2,img3;

        void setup(){

            size(400,400); 

            img1=loadImage("poniko1.png");  ///原形圖

            img2=loadImage("poniko2.png");  ///往右邊的圖

            img3=loadImage("poniko3.png");  ///往左邊的圖

        }
        int userX=100,userY=100;

        
        void draw(){

            background(128);

            if(keyPressed && keyCode==RIGHT){

               userX+=3;

               image(img2,userX,userY,300,200);

            }

           else if(keyPressed && keyCode==LEFT){

               userX-=3;

               image(img3,userX,userY,300,200);

            }

           else image(img1,userX,userY,300,200);

           if(keyPressed && keyCode==UP) userY-=3;

           if(keyPressed && keyCode==DOWN) userY+=3;

程式碼解讀:

              一般來說，都跟以前學的差不多，多的是變成了三個不同的圖，只要運用

         IF ELSE IF 就可以很簡單的解決出 向左 向右出現不同的圖案樣式了。

心得:

              這禮拜跟上禮拜教的其實差不了多少，所以做起來比較輕鬆一點，收穫最大的可能就          是在運用圖片的方面有比上次跟熟悉一點吧!!