做一個像植物大戰殭屍的Flash遊戲1

 http://bbs.9ria.com/thread-80527-1-6.html

這個教程是我翻譯的。。不是我原創的。。原來是發表在新聞資訊版塊,後來被移到了遊戲編程版塊,所以關於原作者的一些信息等都沒了。。。

查看該系列的其它文章:
做一個像植物大戰殭屍的Flash遊戲
做一個像植物大戰殭屍的Flash遊戲2
做一個像植物大戰殭屍的Flash遊戲3
做一個像植物大戰殭屍的Flash遊戲4
做一個像植物大戰殭屍的Flash遊戲5


我不得不承認,我不是植物大戰殭屍的骨灰玩家,所以,如果你發現這個系列的教程有什麼地方錯誤的,請告訴我。

定義遊戲的主要結構

植物大戰僵給了我們很好的視覺和感覺上的享受。你得保護你的房子以免被吃腦的殭屍入侵,這相當的吸引人。總的來說,殺死殭屍是很有趣的。但是這視覺上的東西和遊戲玩法無關,我們可以用屠夫大戰管子工,鴿子大戰駱駝,圓形大戰方塊來代替。

在這個系列的教程中,我們用圓形來代替植物,用方塊來代替殭屍,偉大的圓形將會阻止邪惡的方塊進入我們的基地。遊戲區域可以被簡化爲一個區塊遊戲。

設想一下這種局面:


然後儘量把它想象成這樣:


我們所擁有的是一個位於(2,2)的植物,它會盡力阻止走在第二行(從第0行開始,下同)的殭屍,並且另一個殭屍正在沿着第三行接近我們的基地,還有一個正從第四列落下的陽光。不可能有另外一個植物位於(2,2),並且不可能出現一個殭屍走在第二行與第三行之間。

創建遊戲區域

正如你在上圖看到的那樣,這個遊戲的區域是一個5行9列的矩陣。因此,第一件要做的事就是定義一個數組。我設想你的fla文件有一個文檔類爲Main。下面是Main.as的內容:

  1. package {
  2.         import flash.display.Sprite;
  3.         public class Main extends Sprite {
  4.                 private var gameField:Array;
  5.                 public function Main():void {
  6.                         setupField();
  7.                 }
  8.                 private function setupField():void {
  9.                         gameField=new Array();
  10.                         for (var i:uint=0; i<5; i++) {
  11.                                 gameField[i]=new Array();
  12.                                 for (var j:uint=0; j<9; j++) {
  13.                                         gameField[i][j]=0;
  14.                                 }
  15.                         }
  16.                 }
  17.         }
  18. }
複製代碼
這樣,gameField數組就是一個5*9的矩陣了。

畫出遊戲區域

下面的代碼對於測試來說足夠了,至少我們會畫出一個遊戲區域來。
  1. package {
  2.         import flash.display.Sprite;
  3.         public class Main extends Sprite {
  4.                 private var gameField:Array;
  5.                 public function Main():void {
  6.                         setupField();
  7.                         drawField();
  8.                 }
  9.                 private function setupField():void {
  10.                         gameField=new Array();
  11.                         for (var i:uint=0; i<5; i++) {
  12.                                 gameField[i]=new Array();
  13.                                 for (var j:uint=0; j<9; j++) {
  14.                                         gameField[i][j]=0;
  15.                                 }
  16.                         }
  17.                 }
  18.                 private function drawField():void {
  19.                         var fieldSprite:Sprite=new Sprite();
  20.                         var randomGreen:Number;
  21.                         addChild(fieldSprite);
  22.                         fieldSprite.graphics.lineStyle(1,0xFFFFFF);
  23.                         for (var i:uint=0; i<5; i++) {
  24.                                 for (var j:uint=0; j<9; j++) {
  25.                                         randomGreen=(125+Math.floor(Math.random()*50))*256;
  26.                                         fieldSprite.graphics.beginFill(randomGreen);
  27.                                         fieldSprite.graphics.drawRect(25+65*j,80+75*i,65,75);
  28.                                 }
  29.                         }
  30.                 }
  31.         }
  32. }
複製代碼
drawField函數所做的事情都能夠在setupField函數裏實現,但是我想讓他們分離,我得讓一個函數只處理一件事。唯一有趣的一行代碼是第25行的是在#007D00和#00AE00之間生成隨機顏色。

這就是我們的遊戲區域了。如果你想要讓區塊體面點。請。。。自便。

捕獲陽光

陽光是植物大戰殭屍裏的貨幣。他們從天上掉下來,落到某一區塊上。撿起這些陽光,你才能購買植物。

我用到了timer事件使得每五秒落下一束陽光,如果你對timer還不熟悉的話,請搜索。

現在,陽光還不會從天上掉下來,而是直接出現在某一隨機的區塊中。此時此刻,我還不知道是否兩束陽光可以同時落到同一區塊中。在這個例子裏,他們是可以的,但是如果原版的植物大戰殭屍裏不允許這樣的話,請告訴我。

當一束陽光落到地上的時候,它能夠被玩家撿起。一個鼠標事件偵聽器處理這整個任務。下面是代碼:
  1. package {
  2.         import flash.display.Sprite;
  3.         import flash.utils.Timer;
  4.         import flash.events.TimerEvent;
  5.         import flash.events.MouseEvent;
  6.         public class Main extends Sprite {
  7.                 private var gameField:Array;
  8.                 private var flowersTimer:Timer=new Timer(5000);
  9.                 private var sun:sunMc;
  10.                 private var sunContainer:Sprite=new Sprite();
  11.                 public function Main():void {
  12.                         setupField();
  13.                         drawField();
  14.                         fallingSuns();
  15.                 }
  16.                 private function fallingSuns():void {
  17.                         addChild(sunContainer);
  18.                         flowersTimer.start();
  19.                         flowersTimer.addEventListener(TimerEvent.TIMER, newSun);
  20.                 }
  21.                 private function newSun(e:TimerEvent):void {
  22.                         var sunRow:uint=Math.floor(Math.random()*5);
  23.                         var sunCol:uint=Math.floor(Math.random()*9);
  24.                         sun = new sunMc();
  25.                         sunContainer.addChild(sun);
  26.                         sun.x=52+sunRow*65;
  27.                         sun.y=130+sunRow*75;
  28.                         sun.addEventListener(MouseEvent.CLICK,sunClicked);
  29.                 }
  30.                 private function sunClicked(e:MouseEvent):void {
  31.                         e.currentTarget.removeEventListener(MouseEvent.CLICK,sunClicked);
  32.                         var sunToRemove:sunMc=e.currentTarget as sunMc;
  33.                         sunContainer.removeChild(sunToRemove);
  34.                 }
  35.                 private function setupField():void {
  36.                         gameField=new Array();
  37.                         for (var i:uint=0; i<5; i++) {
  38.                                 gameField[i]=new Array();
  39.                                 for (var j:uint=0; j<9; j++) {
  40.                                         gameField[i][j]=0;
  41.                                 }
  42.                         }
  43.                 }
  44.                 private function drawField():void {
  45.                         var fieldSprite:Sprite=new Sprite();
  46.                         var randomGreen:Number;
  47.                         addChild(fieldSprite);
  48.                         fieldSprite.graphics.lineStyle(1,0xFFFFFF);
  49.                         for (var i:uint=0; i<5; i++) {
  50.                                 for (var j:uint=0; j<9; j++) {
  51.                                         randomGreen=(125+Math.floor(Math.random()*50))*256;
  52.                                         fieldSprite.graphics.beginFill(randomGreen);
  53.                                         fieldSprite.graphics.drawRect(25+65*j,80+75*i,65,75);
  54.                                 }
  55.                         }
  56.                 }
  57.         }
  58. }
複製代碼
下面簡要概述一下用到的函數:
drawField:畫出遊戲區域
fallingSuns:開始製造陽光,使他們墜落
newSun:創建新的陽光
setupField:生成區塊數組
sunClicked:當玩家點擊陽光時調用
下面是效果:

用鼠標撿起陽光吧。
下載該例子的源代碼。下一次,我們將會加入使陽光平滑落下的動畫,並且我們將會買到我們的第一個植物。
發佈了11 篇原創文章 · 獲贊 13 · 訪問量 20萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章