code.club

標題: processing寫的四重選擇的拼圖遊戲 [打印本頁]
作者: 2266    時間: 2021-12-5 19:43
標題: processing寫的四重選擇的拼圖遊戲
本帖最後由 2266 於 2021-12-5 19:45 編輯

[youtube]bVL2TGgHoWQ[/youtube]
  1. int image_number =16; // 設定有幾張圖片
  2. int howManyAnswers = 4; //answer有幾張
  3. PImage[] imgAnswer = new PImage[howManyAnswers];
  4. float answerImageWidth = 200; //answer圖片的寬
  5. float imageRandomWidth = 105; //設定隨機置圖區的方格寬度，會比原圖稍寛好有留白
  6. float imageWidth = 100; //中間拼圖區的格子寬
  7. float[] imgX = new float[image_number]; //圖片的x坐標設成陣列
  8. float[] imgY = new float[image_number]; //圖片的y坐標設成陣列
  9. float[] imgCenterX = new float[image_number]; //中央拼圖區格線x坐標
  10. float[] imgCenterY = new float[image_number]; //中央拼圖區格線y坐標
  11. PImage[] imgToySoldier = new PImage[image_number]; //四個圖片陣列的設定
  12. PImage[] imgSnowNight = new PImage[image_number];
  13. PImage[] imgKnight = new PImage[image_number];
  14. PImage[] imgXmasGirl = new PImage[image_number];
  15. PImage[] imgRandom = new PImage[image_number]; //隨機置圖的圖片陣列
  16. boolean[] bbb = new boolean[image_number];
  17. PImage blankImage;
  18. PImage checkIfExist; //在隨機置圖區中用來檢查是否已放置的圖片

  20. //用以檢查是否圖片已放置的函數
  21. boolean isItExisted(int y,PImage pi, PImage[] pic){ //參數一是要檢查的圖片數，參數二是被檢查的圖片，參數三是用來檢查該圖是否已出現過的圖片陣列
  22. boolean exist = false; //先預設為 false
  23. for(int i=0;i<y;i++)
  24. if(pi==pic[i]) exist = true; //如果循序檢查發現該圖等於陣列中的某圖，表示已出現過，則exist等於true並回報之
  25. return exist;
  26. }
  27. //函數結數

  29. // 隨機圖片排列函數
  30. void imageRandomly(PImage[] toBeRandomed){ //參數是要被隨機排的現有圖片陣列
  31.   PImage checkIt; //要放到isItExisted()中檢查是否已存在的圖片
  32.   for(int x=0;x<image_number;x++) imgRandom[x] = loadImage("img_100_4/blank.png"); //給blank圖片的值不是為了排出空格，而是為了之後變更成其他圖片
  33.       for(int x=0;x<image_number;x++)
  34.   {
  35.   do{
  36.   checkIt = toBeRandomed[int(random(0,image_number))];} //將隨機的圖片指定給 checkIt
  37.   while(isItExisted(image_number,checkIt,imgRandom)); //將 checkIt 放入參數檢查回報是否為 true，若為 true 繼續回到上一動作，若false則結束並至下一動作
  38.   imgRandom[x] = checkIt; //將checkIt目前的圖片指給隨機圖片陣列的第某項
  39.   }
  40.   }
  41. //

  43. //定出隨機區的格子和各格子的xy坐標
  44. void setGrid(){
  45.   
  46.   for(int i=0;i<image_number;i++)
  47.       if(i%2==0) //逢二的倍數
  48.        {
  49.          imgX[i] = 750; //x坐標不變
  50.          imgY[i] = 50+i/2*imageRandomWidth; //y坐標從50起加上（先將i除二是因為逢二個才會乘一次，然後乘上設定好的寬度）
  51.      }
  52.        else {
  53.          imgX[i]=750+imageRandomWidth; //x坐標加上設定好的寬度
  54.      imgY[i] = imgY[i-1]; //y坐標維持和上一個的一樣
  55.        }
  56.      }
  57. //
  58. void playIt(){
  59.   
  60. for(int i=0;i<16;i++){
  61.   image(imgRandom[i],imgX[i],imgY[i]);  
  62.   
  63. if(bbb[i]) {imgX[i] = mouseX-imageWidth/2;imgY[i] = mouseY-imageWidth/2;}  //當該圖的boolean為true，則該圖可移動，並將滑鼠保持在圖中央

  65. if(!mousePressed)
  66.      {
  67.      bbb[i] = false;
  68.      for(int t=0;t<4;t++)
  69.       for(int s=0;s<4;s++)
  70.        if(abs(imgX[i]-imgCenterX[t])<30&& abs(imgY[i]-imgCenterY[s])<30)
  71.          {
  72.              imgX[i] = imgCenterX[t];
  73.              imgY[i] = imgCenterY[s];
  74.          }
  75.    
  76.      }
  77.    }
  78. }
  79.   
  80.   
  81.   
  82.   
  83. void setup(){
  84.   size(1000,1000);
  85.   // 給四個answer圖片的值
  86.   imgAnswer[0] = loadImage("img_100_4/answerKnight.png");
  87.   imgAnswer[1] = loadImage("img_100_4/answerAliceTable.png");
  88.   imgAnswer[2] = loadImage("img_100_4/answerKremlin.png");
  89.   imgAnswer[3] = loadImage("img_100_4/answerFu.png");
  90.   //先設定中間拼圖區的xy坐標各有四種數值
  91.   for(int i=0;i<4;i++)
  92.   {
  93.    imgCenterX[i] = 300 + i*imageWidth;
  94.    imgCenterY[i] = 200 + i*imageWidth;
  95.    }
  96.    //
  97.   
  98.   for(int x=0;x<image_number;x++)
  99.   {
  100.     imgKnight[x] = loadImage("img_100_4/knight/"+x+".png"); //先給圖片陣列賦值
  101.     imgToySoldier[x] = loadImage("img_100_4/fu/"+x+".png"); //先給圖片陣列賦值
  102.     imgSnowNight[x] =  loadImage("img_100_4/kremlin/"+x+".png"); //先給圖片陣列賦值
  103.     imgXmasGirl[x] =  loadImage("img_100_4/alicetable/"+x+".png"); //先給圖片陣列賦值
  104.     bbb[x] = false; //boolean 先都設為false;
  105.   }
  106.   
  107.    setGrid(); //設定好隨機區的格線坐標位置
  108.    imageRandomly(imgKnight); //先用一個圖片陣列放入隨機圖片陣列
  109.   }
  110.   
  111. void draw(){
  112.   
  113.   background(255);

  115. //設定answer大圖的顯示
  116. for(int i=0;i<howManyAnswers;i++)
  117. image(imgAnswer[i],30,50+i*(answerImageWidth+10));
  118.   
  119.   //在中間畫出4x4的拼圖格線
  120.   for(int i=0;i<4;i++)
  121.     for(int j=0;j<4;j++)
  122.      rect(imgCenterX[i],imgCenterY[j],imageWidth,imageWidth);
  123.   //
  124.   
  125. //  將已有圖的隨機圖片陣列放到隨機區各格子中
  126.    for(int i=0;i<image_number;i++){
  127.       image(imgRandom[i],imgX[i],imgY[i]);
  128.   }
  129. playIt();
  130. }

  132. void mousePressed(){
  133. //先保證所有的牌boolean是false，但唯有滑鼠點到那張是true，以免移動到其他牌
  134. for(int i=0;i<16;i++)
  135.   if(mouseX>imgX[i]&&mouseX<imgX[i]+imageWidth&&mouseY>imgY[i]&&mouseY<imgY[i]+imageWidth)
  136.   {
  137.     for(int j=0;j<16;j++) bbb[j] = false;
  138.     bbb[i]=true;
  139.   }
  140.   
  141.   
  142. //如果滑鼠在不同區中按下，則隨機區放入不同的圖片陣列
  143.     if(mouseX>30&&mouseX<230&&mouseY>50&&mouseY<250) {
  144.       setGrid(); //要重設一切隨機區，不然已在拼圖區的圖片座標可會留在拼圖區
  145.   imageRandomly(imgKnight);
  146.   }
  147.    
  148.     if(mouseX>30&&mouseX<230&&mouseY>260&&mouseY<460) {
  149.       setGrid();
  150.   imageRandomly(imgXmasGirl);}
  151.   
  152.      if(mouseX>30&&mouseX<230&&mouseY>470&&mouseY<670) {
  153.        setGrid();
  154.   imageRandomly(imgSnowNight);}
  155.   
  156.      if(mouseX>30&&mouseX<230&&mouseY>690&&mouseY<890) {
  157.        setGrid();
  158.   imageRandomly(imgToySoldier);}
  159.   
  160. }
複製代碼




歡迎光臨 code.club (https://code.club/) Powered by Discuz! X3.2