做一个像植物大战僵尸的Flash游戏1

最新推荐文章于 2024-04-22 16:31:53 发布

guanghua2009

最新推荐文章于 2024-04-22 16:31:53 发布

阅读量3k

点赞数

文章标签：游戏 flash function import timer sun

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的内容：

package {
import flash.display.Sprite;
public class Main extends Sprite {
private var gameField:Array;
public function Main():void {
setupField();
}
private function setupField():void {
gameField=new Array();
for (var i:uint=0; i<5; i++) {
gameField[i]=new Array();
for (var j:uint=0; j<9; j++) {
gameField[i][j]=0;
}
}
}
}
}

复制代码

这样，gameField数组就是一个5*9的矩阵了。

画出游戏区域

下面的代码对于测试来说足够了，至少我们会画出一个游戏区域来。

package {
import flash.display.Sprite;
public class Main extends Sprite {
private var gameField:Array;
public function Main():void {
setupField();
drawField();
}
private function setupField():void {
gameField=new Array();
for (var i:uint=0; i<5; i++) {
gameField[i]=new Array();
for (var j:uint=0; j<9; j++) {
gameField[i][j]=0;
}
}
}
private function drawField():void {
var fieldSprite:Sprite=new Sprite();
var randomGreen:Number;
addChild(fieldSprite);
fieldSprite.graphics.lineStyle(1,0xFFFFFF);
for (var i:uint=0; i<5; i++) {
for (var j:uint=0; j<9; j++) {
randomGreen=(125+Math.floor(Math.random()*50))*256;
fieldSprite.graphics.beginFill(randomGreen);
fieldSprite.graphics.drawRect(25+65*j,80+75*i,65,75);
}
}
}
}
}

复制代码

drawField函数所做的事情都能够在setupField函数里实现，但是我想让他们分离，我得让一个函数只处理一件事。唯一有趣的一行代码是第25行的是在#007D00和#00AE00之间生成随机颜色。

这就是我们的游戏区域了。如果你想要让区块体面点。请。。。自便。

捕获阳光

阳光是植物大战僵尸里的货币。他们从天上掉下来，落到某一区块上。捡起这些阳光，你才能购买植物。

我用到了timer事件使得每五秒落下一束阳光，如果你对timer还不熟悉的话，请搜索。

现在，阳光还不会从天上掉下来，而是直接出现在某一随机的区块中。此时此刻，我还不知道是否两束阳光可以同时落到同一区块中。在这个例子里，他们是可以的，但是如果原版的植物大战僵尸里不允许这样的话，请告诉我。

当一束阳光落到地上的时候，它能够被玩家捡起。一个鼠标事件侦听器处理这整个任务。下面是代码:

package {
import flash.display.Sprite;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.MouseEvent;
public class Main extends Sprite {
private var gameField:Array;
private var flowersTimer:Timer=new Timer(5000);
private var sun:sunMc;
private var sunContainer:Sprite=new Sprite();
public function Main():void {
setupField();
drawField();
fallingSuns();
}
private function fallingSuns():void {
addChild(sunContainer);
flowersTimer.start();
flowersTimer.addEventListener(TimerEvent.TIMER, newSun);
}
private function newSun(e:TimerEvent):void {
var sunRow:uint=Math.floor(Math.random()*5);
var sunCol:uint=Math.floor(Math.random()*9);
sun = new sunMc();
sunContainer.addChild(sun);
sun.x=52+sunRow*65;
sun.y=130+sunRow*75;
sun.addEventListener(MouseEvent.CLICK,sunClicked);
}
private function sunClicked(e:MouseEvent):void {
e.currentTarget.removeEventListener(MouseEvent.CLICK,sunClicked);
var sunToRemove:sunMc=e.currentTarget as sunMc;
sunContainer.removeChild(sunToRemove);
}
private function setupField():void {
gameField=new Array();
for (var i:uint=0; i<5; i++) {
gameField[i]=new Array();
for (var j:uint=0; j<9; j++) {
gameField[i][j]=0;
}
}
}
private function drawField():void {
var fieldSprite:Sprite=new Sprite();
var randomGreen:Number;
addChild(fieldSprite);
fieldSprite.graphics.lineStyle(1,0xFFFFFF);
for (var i:uint=0; i<5; i++) {
for (var j:uint=0; j<9; j++) {
randomGreen=(125+Math.floor(Math.random()*50))*256;
fieldSprite.graphics.beginFill(randomGreen);
fieldSprite.graphics.drawRect(25+65*j,80+75*i,65,75);
}
}
}
}
}

复制代码

下面简要概述一下用到的函数：
drawField:画出游戏区域
fallingSuns:开始制造阳光，使他们坠落
newSun:创建新的阳光
setupField:生成区块数组
sunClicked:当玩家点击阳光时调用
下面是效果：

用鼠标捡起阳光吧。
下载该例子的源代码。下一次，我们将会加入使阳光平滑落下的动画，并且我们将会买到我们的第一个植物。

guanghua2009

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
做一个像植物大战僵尸的Flash游戏1

http://bbs.9ria.com/thread-80527-1-6.html这个教程是我翻译的。。不是我原创的。。原来是发表在新闻资讯版块，后来被移到了游戏编程版块，所以关于原作者的一些信息等都没了。。。查看该系列的其它文章：做一个像植物大战僵尸的Flash
复制链接

扫一扫