2. 程式人生 > >Step 16:【PROCESSING 遊戲程式設計】之黃金礦工

Step 16:【PROCESSING 遊戲程式設計】之黃金礦工

阿新 • • 發佈：2019-01-29

之前，我偶看到 FAL 利用 Processing/p5.js 製作的一些迷你小遊戲（倘若你對此感興趣，請點選這裡）。Simple but fun，這亦讓我萌生了學習製作遊戲的念頭。文學、音樂、舞蹈、雕塑、繪畫、建築、戲劇、電影，“Game”作為備受爭議的第九藝術，其優勢在於，它是可以是多項藝術的結合。當然，我不想在此講這些套話，而僅僅是嘗試以一個遊戲製作初學者的身份，just do it！

這裡寫圖片描述

黃金礦工是一款什麼遊戲？如若你並不知曉，你可以看看度娘怎麼說。而最好地是，Let’s play games together。當然，你也有更多的選擇，根據這個案例，嘗試編寫自己的遊戲。

這裡寫圖片描述

So，我們該怎麼做“Gold Miner”？

首先，我們得梳理一下自己的思路。這是我做的一張“Gold Miner”專案的簡易流程圖：
這裡寫圖片描述

遊戲開發者的思路清晰十分重要，如若不然，你可以先觀看執行效果或者執行一下我已編寫好的程式碼，這樣對你會有幫助。

以下是本文的目錄大綱：

  • GameMain
  • GamePlay
  • GameWin
  • GameLost
  • Others
  • Last…

好吧，just do it！

GameMain

在這裡，遊戲主介面只有一個簡單的功能——實現主介面與遊戲介面之間的切換。因此，我們只需製作一個按鈕即可。

這裡寫圖片描述

程式碼1 主介面實現：
void draw() {
  if (condition
 
==0) {  // 遊戲初始介面
    image(pic1, 0, 0);
    image(button1, 600, 300);
  }
}

void mousePressed() {
  if (mouseButton == LEFT&&dist(665, 360, mouseX, mouseY)<50) {  // 切換到開始遊戲介面
    condition=1;
  }
}

注：condition 這個 int 型的引數，即用於介面間切換。condition=0：主介面；condition=1：目標分數介面；condition=2：遊戲進行介面；condition=3：勝利介面；
condition=4：遊戲失敗介面。

GamePlay

遊戲介面是整個遊戲的核心，它包括了目標分數介面和遊戲進行介面。相對於其他介面而言，遊戲 UI 比較複雜，除了背景與角色、金礦等的繪製，還要處理遊戲時滿足勝利與失敗條件的事件。

這裡寫圖片描述
這裡寫圖片描述

為了讓條理更加清楚，我們將一步一步地來實現它：

第一步，新增遊戲 UI。condition=1 時，繪製目標分數介面；condition=2 時，繪製遊戲進行介面。

程式碼2 新增遊戲 UI：
void draw() {
  if (condition==1) {   // 開始遊戲介面
    image(pic2, 0, 0);
    image(object1, width/2-object1.width/2, 0);
    image(button2, width/2-button2.width/2, 360);
    fill(#98295F);
    textSize(50);
    textAlign(LEFT);
    text(ls.targetScore, width/2-50, 300);
  } else if (condition==2) {  // 遊戲介面
    // 時間記錄
    passTime1= int((millis() - startTime)/1000) % 60;
    passTime2=int((millis() - startTime)/(60*1000)) % 60;
    imageMode(CORNER);
    background(pic2);
    image(tB1, 0, -5);
    fill(#98295F);
    textSize(20);
    textAlign(LEFT);
    text(ls.targetScore, 60, 35);
    image(tB2, 0, 40);
    text(yourScore, 60, 80);
    image(tB3, 660, 20, 60, 60);
    textAlign(CENTER);
    textSize(30);
    text(level, 690, 70);
    image(tB4, 730, 20, 60, 60);
    textSize(20);
    text(timer-passTime1-passTime2*60, 760, 60);

    // 預設設定為 imageMode(CENTER)
    miner.draw();
    ls.show();
    rope.show();
    if (rope.state==1) {
      ls.catchGold();
    }
    image(button5, 620, 50, 60, 60);
    upgrade();  // 升級
  }
}

注：每次呼叫 miner.draw() 方法（來自 Sprites 庫），程式都會預設設定為 imageMode(CENTER)。所以，我們要注意座標值的設定。

第二步，編寫金礦類。金礦不僅有各樣的形態，而且代表了不同的分數。

程式碼3 各式金礦類：
// 金子、鑽石、石頭、炸彈

class Gold {
  PVector pos;
  float size;
  int shape, score;
  float speed, angle;

  Gold(PVector pos, int shape) {
    this.pos=pos;
    this.shape=shape;
    if (shape!=7)
      size=objs[shape].width;
    else
      size=objs[shape].width/3;  // 大金塊圖片的尺寸較大
    setupScore();
  }


  // 初始化分數
  void setupScore() {
    if (shape==0) {
      score=10;
    } else if (shape==1) {
      score=20;
    } else if (shape==2) {
      score=50;
    } else if (shape==3) {
      score=100;
    } else if (shape==4) {
      score=250;
    } else if (shape==5) {
      score=500;
    } else if (shape==6) {
      score=600;
    } else if (shape==7) {
      score=1000;
    }
  }

  void move() {
    pos.x+=speed*sin(angle);
    pos.y-=speed*cos(angle);
  }

  void show() {
    move();
    image(objs[shape], pos.x, pos.y, size, size);
  }
}

第三步，編寫繩索與鉤子。當玩家按下滑鼠左鍵，繩索伸長，倘若鉤子接觸到金礦，金礦會被收集起來。

程式碼4 繩索與鉤子類：
// 繩索與鉤子

class Rope {
  PVector pos;
  float angle, da;
  float speed;
  int state;
  ArrayList<PVector> vertexs;

  Rope() {
    pos=new PVector(0, 15);
    state=0;  // 繩索搖擺
    speed=4;
    da=0.025;
    vertexs=new ArrayList<PVector>();
  }

  // 搖擺
  void shake() {
    if (state==0)
      angle+=da;

    if (angle>PI/2.5) {
      angle=PI/2.5;
      da=-da;
    } else if (angle<-PI/2.5) {
      angle=-PI/2.5;
      da=-da;
    }
  }

  // 伸縮
  void extend() {
    if (state==1)
      pos.y+=speed;
    else if (state==2) {
      pos.y-=speed;
      if (pos.y<=15) {
        miner.setFrameSequence(0, 3, 0);
        state=0;
        pos.y=15;
        rope.speed=4;
      }
    }
  }

  void show() {
    shake();  // 搖擺
    extend();  // 伸縮
    pushMatrix();  
    translate(width/2-5, 80);
    rotate(angle);
    noStroke();
    beginShape(QUADS);
    texture(object3);  // 繩索貼紙
    vertex(-3, 0, 0, 0);
    vertex(3, 0, object3.width, 0);
    vertex(3, pos.y, object3.width, object3.height);
    vertex(-3, pos.y, 0, object3.height);
    endShape();
    image(object2, 0, pos.y, 20, 20);  // 鉤子
    popMatrix();
  }
}

第四步，實現按鈕功能和釋放鉤子的動作。

程式碼5 按鈕與鉤子的功能：
void mousePressed() {
  if (mouseButton == LEFT&&dist(width/2, 420, mouseX, mouseY)<50&&condition==1) {  // 切換到遊戲介面
    condition=2;
    startTime = millis();
  } else if (mouseButton == LEFT&&dist(620, 50, mouseX, mouseY)<=50&&condition==2) {
    skip=true;
  } else if (mouseButton == LEFT&&condition==2&&rope.state==0) {  // 按下滑鼠左鍵，釋放鉤子
    rope.state=1;
    miner.setFrameSequence(0, 3, 0.2);
  }
}

GameWin

當分數達到目標分數且時間值為零，遊戲介面便切換到勝利介面。

程式碼6 勝利介面的實現：
void draw() {
  if (condition==3) {  // 遊戲通關介面
    imageMode(CENTER);
    image(pic3, width/2, height/2);
    // 字型放大效果
    if (textRate>=PI/2) {
      textRate=PI/2;
      image(button3, width/2, height/2+150, 100, 100);
    } else {
      textRate+=0.02;
    }
    image(object4, width/2, height/2-50, 650*sin(textRate), 154*sin(textRate));
    imageMode(CORNER);
  }
}

GameLost

當分數未達到目標分數且時間值為零，遊戲失敗。

程式碼7 失敗介面的實現：
void draw() {
  if (condition==4) {  // 遊戲失敗介面
    imageMode(CENTER);
    image(pic4, width/2, height/2);
    // 字型放大效果
    if (textRate>=PI/2) {
      textRate=PI/2;
      image(button4, width/2, height/2+100);
    } else {
      textRate+=0.01;
    }
    image(object5, width/2, height/2-50, 480*cos(textRate), 260*cos(textRate));
    imageMode(CORNER);
  }
}

Others

添加升級系統。這裡，我以迭代的方式編寫了一個算分方法。每到新的一關，金礦就會根據算分方法得到的數目更新。

程式碼8 升級系統：
// 關卡的管理

class LevelSystem {
  int targetScore, totalScore;
  int[] nums;  // 各種 Gold 的數目
  ArrayList<Gold> golds;

  LevelSystem(int targetScore) {
    this.targetScore=targetScore;
    nums=new int[8];
    golds=new ArrayList<Gold>();
    if (level==1) {
      totalScore=(int)(targetScore*2);  // 實際總分與目標分數的關係
    } else {
      totalScore=targetScore;
    }
    initLevelStart(totalScore);
    genGolds();
  }

  // 新的一關，生成金子等
  void initLevelStart(int tS) {
    tS=scoring(tS, 7, 1000);
    tS=scoring(tS, 6, 600);
    tS=scoring(tS, 5, 500);
    tS=scoring(tS, 4, 250);
    tS=scoring(tS, 3, 100);
    tS=scoring(tS, 2, 50);
    tS=scoring(tS, 1, 20);
    tS=scoring(tS, 0, 10);

    if (tS>25) {
      initLevelStart(tS);  // 開始迭代
    }
  }

  // 算分
  int scoring(int tS, int i, int score) {
    int num=(int)random(0.5*(tS-tS%score)/score, (tS-tS%score)/score);
    tS-=num*score;
    nums[i]+=num;
    return tS;
  }

  void genGolds() {
    genGold(7, nums[7]);
    genGold(6, nums[6]);
    genGold(5, nums[5]);
    genGold(4, nums[4]);
    genGold(3, nums[3]);
    genGold(2, nums[2]);
    genGold(1, nums[1]);
    genGold(0, nums[0]);
  }

  // 生成 Gold
  void genGold(int i, int num) {
    for (int n=0; n<num; n++) {
      golds.add(new Gold(new PVector(random(width), random(200, height)), i));
    }
  }

  // 顯示眾多 Gold
  void show() {
    // 分開寫，防止閃屏
    for (int i=0; i<golds.size(); i++) {
      if (dist(golds.get(i).pos.x, golds.get(i).pos.y, width/2, 95) <golds.get(i).size/2) {
        yourScore+=golds.get(i).score;
        word="+"+golds.get(i).score+"!";
        miner.setFrameSequence(0, 3, 0);
        showText=true;
        golds.remove(i);  // 消除 Gold
      }
    }
    showText();
    for (int i=0; i<golds.size(); i++) {
      golds.get(i).show();
    }
  }

  void showText() {
    if (showText==true) {
      image(tB5, width/2-90, 45, 120, 80);
      textSize(25);
      text(word, width/2-90, 50);
      textRate+=0.3;
    }
    if (textRate>10) {
      showText=false;
      textRate=0;
    }
  }

  // 抓到 Gold
  void catchGold() {
    for (int i=0; i<golds.size(); i++) {
      float x1=golds.get(i).pos.x;
      float y1=golds.get(i).pos.y;
      float x2=width/2-5-sin(rope.angle)*rope.pos.y;
      float y2=80+cos(rope.angle)*rope.pos.y;

      if (dist(x1, y1, x2, y2)<=golds.get(i).size/2) {
        if (golds.get(i).shape!=6) {
          rope.speed=4-golds.get(i).size/30;
        } else {
          rope.speed=3.5;
        }

        if (golds.get(i).shape==0||golds.get(i).shape==1) {
          file[4].play();
        } else if (golds.get(i).shape==6) {
          file[5].play();
        } else {
          file[3].play();
        }

        if (rope.state==1) {
          miner.setFrameSequence(0, 3, 0.6-rope.speed/10);
        }
        rope.state=2;
        golds.get(i).pos.x=width/2-5-sin(rope.angle)*(rope.pos.y+golds.get(i).size/3.5);
        golds.get(i).pos.y=80+cos(rope.angle)*(rope.pos.y+golds.get(i).size/3.5);
        golds.get(i).angle=rope.angle;
        golds.get(i).speed=rope.speed;
      } else if (x2<0||x2>width||y2>height) {
        rope.speed=5;
        showText=true;
        word="lonely…";
        if (rope.state==1) {
          miner.setFrameSequence(0, 3, 0.6-rope.speed/10);
        }
        rope.state=2;
      }
    }
  }
}

新增音效。我們使用 file[i].play() 和 file[i].stop()，以播放和停止播放音訊。

程式碼9 新增音效：
import processing.sound.*;

SoundFile[] file;

// 遊戲素材載入
void loading() {
  // 載入遊戲音樂
  numsounds=10;
  file = new SoundFile[numsounds];
  for (int i = 0; i < numsounds; i++) {
    file[i] = new SoundFile(this, (i+1) + ".wav");
  }
}

void mousePressed() {
  if (mouseButton == LEFT&&dist(665, 360, mouseX, mouseY)<50) {  // 切換到開始遊戲介面
    condition=1;
    file[0].stop();
    file[1].play();
  } else if (mouseButton == LEFT&&dist(width/2, 420, mouseX, mouseY)<50&&condition==1) {  // 切換到遊戲介面
    condition=2;
    file[2].play();
    startTime = millis();
  } else if (mouseButton == LEFT&&dist(620, 50, mouseX, mouseY)<=50&&condition==2) {
    file[6].play();
    skip=true;
  } else if (mouseButton == LEFT&&condition==2&&rope.state==0) {  // 按下滑鼠左鍵，釋放鉤子
    rope.state=1;
    miner.setFrameSequence(0, 3, 0.2);
  } else if (mouseButton == LEFT&&dist(width/2, height/2+150, mouseX, mouseY)<50&&condition==3&&textRate==PI/2) {  // 按下滑鼠左鍵，釋放鉤子
    file[9].play();
    condition=1;  // 下一關開始
    textRate=0;
    ls=new LevelSystem((int)(ls.targetScore*1.5));
  } else if (mouseButton == LEFT&&dist(width/2, height/2+100, mouseX, mouseY)<100&&condition==4&&textRate==PI/2) {  // 按下滑鼠左鍵，釋放鉤子
    file[9].play();
    condition=0;  // 首頁
    file[0].play();
    reset();
  }
}

Last…

曾經，我愛音樂、繪畫、樂器、話劇、電影、文學，如今我斬斷了所有的花心，只為留下你――“Game”，孕育出種子，開花、結點果實。來返四季，嘗也嘗不膩，遊戲上的那些罌粟，有癮，這些歲數了，不想戒了。

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

完整程式碼已放到 CSDN 下載裡，連結請點這裡。

相關推薦

Step 16:【PROCESSING 遊戲程式設計】之黃金礦工

之前，我偶看到 FAL 利用 Processing/p5.js 製作的一些迷你小遊戲（倘若你對此感興趣，請點選這裡）。Simple but fun，這亦讓我萌生了學習製作遊戲的念頭。文學、音樂、舞蹈、雕塑、繪畫、建築、戲劇、電影，“Game”作為備受爭議的第九藝

【Unity3D Shader程式設計】之五 聖誕夜篇 Unity中Shader的三種形態對比 混合操作合輯

                本系列文章由出品，轉載請註明出處。 本文算是固定功能Shader的最後一篇，下一次更新應該就會開始講解表面Shader，而講解完表面Shader，後續文章最終會講解到頂點著色器和片段著色器（也就是可程式設計Shader）。文章第一部分複習和進一步瞭解了Unity中Shader的

【Java併發程式設計】之二十：併發新特性—Lock鎖和條件變數（含程式碼）

簡單使用Lock鎖     Java 5中引入了新的鎖機制——java.util.concurrent.locks中的顯式的互斥鎖：Lock介面，它提供了比synchronized更加廣泛的鎖定操作。Lock介面有3個實現它的類：ReentrantLock、Reetrant

【Java併發程式設計】之二十二：併發新特性—障礙器CyclicBarrier（含程式碼）

CyclicBarrier（又叫障礙器）同樣是Java 5中加入的新特性，使用時需要匯入java.util.concurrent.CylicBarrier。它適用於這樣一種情況：你希望建立一組任

【Java併發程式設計】之六：Runnable和Thread實現多執行緒的區別（含程式碼）

    Java中實現多執行緒有兩種方法：繼承Thread類、實現Runnable介面，在程式開發中只要是多執行緒，肯定永遠以實現Runnable介面為主，因為實現Runnable介面相比繼承Th

【scratch遊戲程式設計】製作“水果忍者”

董老師根據6 — 16歲學生特點，編寫具有特色的切蔬菜遊戲。小朋友可以跟隨視訊運用scratch編寫屬於自己的“水果忍者”。可以將視訊中的武士和蔬菜替換成自己喜歡的形象。編寫好的程式也可以儲存，分享

【Java併發程式設計】之二十三：併發新特性—訊號量Semaphore（含程式碼）

    在作業系統中，訊號量是個很重要的概念，它在控制程序間的協作方面有著非常重要的作用，通過對訊號量的不同操作，可以分別實現程序間的互斥與同步。當然它也可以用於多執行緒的控制，我們完全可以通過

【IOS遊戲開發】之IPA破解原理

IPHONE,ITOUCH和IPAD 需要安裝蘋果的IPA軟體，我們向AppStore釋出IPA軟體的時候蘋果會給我們的IPA軟體添加簽名認證 Appstore上的應用都採用了DRM(digitalrights management)數字版權加密保護技術,直接的表現是A帳號

【Unity3D Shader程式設計】之十 深入理解Unity5中的Standard Shader(二)&螢幕油畫特效的實現

本系列文章由出品，轉載請註明出處。 本文工程使用的Unity3D版本：5.2.1 概要：本文講解了Unity中著色器編譯多樣化的思路，並對Standard Shader中正向基礎渲染通道的原始碼進行了分析，以及對螢幕油畫特效進行了實現。眾所周知，Unity官方文件對Shade

【Java併發程式設計】之十六：深入Java記憶體模型——happen-before規則及其對DCL的分析（含程式碼）

happen—before規則介紹     Java語言中有一個“先行發生”（happen—before）的規則，它是Java記憶體模型中定義的兩項操作之間的偏序關係，如果操作A先行發生於操作B，其意思就是說，在發生操作B之前，操作A產生的影響都能被操作B觀察到，“影響

【Java併發程式設計】之八：多執行緒環境中安全使用集合API（含程式碼）

在集合API中，最初設計的Vector和Hashtable是多執行緒安全的。例如：對於Vector來說，用來新增和刪除元素的方法是同步的。如果只有一個執行緒與Vector的例項互動，那麼，要求獲取

【D3D11遊戲程式設計】學習筆記十五：混合（Blending）

        （注：【D3D11遊戲程式設計】學習筆記系列由CSDN作者BonChoix所寫，轉載請註明出處：http://blog.csdn.net/BonChoix，謝謝~）        在D3D11中，“混合”發生在畫素著色器階段的下一階段，即Output Me

【Java併發程式設計】之十：使用wait/notify/notifyAll實現執行緒間通訊的幾點重要說明

在Java中，可以通過配合呼叫Object物件的wait（）方法和notify（）方法或notifyAll（）方法來實現執行緒間的通訊。線上程中呼叫wait（）方法，將阻塞等待其他執行緒的通知（其

【Unity Shader程式設計】之十五 螢幕高斯模糊(Gaussian Blur)後期特效的實現

本篇文章將分析如何在Unity中基於Shader實現高斯模糊屏幕後期特效。首先放出最終的實現效果。如下幾幅圖，是在Unity中使用本文所實現的Shader得到的高斯模糊屏幕後期特效與原始圖的效果對比圖。卡通風格的效果測試：寫實風格的效果測試：OK，下面我們開始分析如何在Uni

【Unity3D Shader程式設計】之八 Unity5新版Shader模板原始碼解析&徑向模糊螢幕特效的實現

   概要：本文對Unity5中全新的三種Shader模板的原始碼進行了解析，然後還講解了運動模糊螢幕特效的實現方法。前言時隔9個月，終於有了一些稍微空閒的時間，可以進行一些更新了。鑑於以後可以用來寫部落格的時間肯定不會非常充裕，個人覺得再講Shader的基礎寫法比較拖節奏，

【Unity3D Shader程式設計】之十二 可程式設計Shader初步 & 漫反射可程式設計Shader的實現

毛星雲，網路ID「淺墨」，90後，熱愛遊戲開發、遊戲引擎、計算機圖形、實時渲染等技術，就職於騰訊互娛。 微軟最有價值專家 著作《Windows遊戲程式設計之從零開始》、《OpenCV3程式設計入門》 碩士就讀於南京航空航天大學航天學院（2013級碩士研究生），已於2016年三月畢業。本科

【Unity3D Shader程式設計】之六 暗黑城堡篇: 表面著色器(Surface Shader)的寫法(一)

毛星雲，網路ID「淺墨」，90後，熱愛遊戲開發、遊戲引擎、計算機圖形、實時渲染等技術，就職於騰訊互娛。 微軟最有價值專家 著作《Windows遊戲程式設計之從零開始》、《OpenCV3程式設計入門》 碩士就讀於南京航空航天大學航天學院（2013級碩士研究生），已於2016年三月畢業。本科

【Java併發程式設計】之二十三：併發新特性—訊號量Semaphore（含程式碼）(r)

執行緒pool-1-thread-1獲得許可：0 執行緒pool-1-thread-1釋放許可：0 當前允許進入的任務個數：5 執行緒pool-1-thread-2獲得許可：1 執行緒pool-1-thread-6獲得許可：5 執行緒pool-1-thread-4獲得許可：3 執行緒pool-1-thread

【Java併發程式設計】之五：volatile變數修飾符—意料之外的問題（含程式碼）

示例程式 下面給出一段程式碼，通過其執行結果來說明使用關鍵字volatile產生的差異，但實際上遇到了意料之外的問題： public class Volatile extends Object implements Runnable { //value變數沒有被標記為volatile private

【Unity遊戲開發】tolua之wrap文件的原理與使用

nop 微信 attr hiera n) 接下來 system 作者 prim 　　本文內容轉載自：https://www.cnblogs.com/blueberryzzz/p/9672342.html 。非常感謝原作者慷慨地授權轉載，比心！@blueberryzzz