摘要:[flash as3]2D版如線上遊戲點擊行走
這個project是我為了喜歡的配音員做的小遊戲，
算是某種另類的對於偶像的支持！
目前正在進行當中，
把一些教學寫給大家，也許可以讓大家再自由發揮!
此版本還無碰撞(撞到建築物)的判斷，就是讓大家自己思考~
先上flash：
https://googledrive.com/host/0B7hg_8WvMyfJRG9oRE5xajliS28
提醒：寫程式時，建議在畫面上加label偵測使用者點擊位置喔！
首先，將你的布局都排好(場景)，
記得，有個叫bg的MovieClip，是用來偵測使用者走路的背景，
通常要比使用者看到的畫面還大(除非你只想做使用者看得到的畫面大小的遊戲場景)。
SV的場景大小是550X400
接著在第一frame寫程式碼：
var charArr:Array=new Array(front1,front2,left1,left2,right1,right2,back1,back2);
var bgArr:Array=new Array(bg,grass,rock,house1,house2,house3,other,bubble);
var bgX:Array=new Array(bg.x,grass.x,rock.x,house1.x,house2.x,house3.x,other.x,bubble.x);
var bgY:Array=new Array(bg.y,grass.y,rock.y,house1.y,house2.y,house3.y,other.y,bubble.y);
var ex:int=0;
var ey:int=0;
var moveX:int=0;
var moveY:int=0;
var isLeft:String="none";
var isFront:String="none";
var step:Boolean=false;
txTest.visible=false;
initGame();
function initGame(){
for(var i:int=0;i<charArr.length;i++){
if(i!=0) charArr[i].visible=false;
}
}
function bgLeft(){
if((bg.x+bg.width-5)<stage.stageWidth){
for(var i:int=0;i<bgArr.length;i++){
bgArr[i].x=bgX[i]-(bgX[0]+bgArr[0].width-stage.stageWidth);
}
moveX=0;
}else{
for(var j:int=0;j<bgArr.length;j++){
bgArr[j].x-=5;
}
moveX-=5;
}
}
function bgRight(){
if(bg.x+5>0){
for(var i:int=0;i<bgArr.length;i++){
bgArr[i].x=bgX[i]+Math.abs(bgX[0]);
}
moveX=0;
}else{
for(var j:int=0;j<bgArr.length;j++){
bgArr[j].x+=5;
}
moveX-=5;
}
}
function bgFront(){
if(bg.y+bg.height-5<stage.stageHeight){
for(var i:int=0;i<bgArr.length;i++){
bgArr[i].y=bgY[i]-Math.abs(bgY[0]+bgArr[0].height-stage.stageHeight);
}
moveY=0;
}else{
for(var j:int=0;j<bgArr.length;j++){
bgArr[j].y-=5;
}
moveY-=5;
}
}
function bgBack(){
if(bg.y+5>0){
for(var i:int=0;i<bgArr.length;i++){
bgArr[i].y=bgY[i]+Math.abs(bgY[0]);
}
moveY=0;
}else{
for(var j:int=0;j<bgArr.length;j++){
bgArr[j].y+=5;
}
moveY-=5;
}
}
function goLeft(){
if(front1.x-5<0){
for(var i:int=0;i<charArr.length;i++){
charArr[j].x=0;
}
moveX=0;
}else{
for(var j:int=0;j<charArr.length;j++){
charArr[j].x-=5;
}
moveX-=5;
}
}
function goRight(){
if(front1.x+front1.width+5>stage.stageWidth){
for(var i:int=0;i<charArr.length;i++){
charArr[i].x=stage.stageWidth-charArr[i].width;
}
moveX=0;
}else{
for(var j:int=0;j<charArr.length;j++){
charArr[j].x+=5;
}
moveX-=5;
}
}
function goFront(){
if(front1.y-5<0){
for(var i:int=0;i<charArr.length;i++){
charArr[i].y=0;
}
moveY=0;
}else{
for(var j:int=0;j<charArr.length;j++){
charArr[j].y-=5;
}
moveY-=5;
}
}
function goBack(){
if(front1.y+front1.height+5>stage.stageHeight){
for(var i:int=0;i<charArr.length;i++){
charArr[i].y=stage.stageHeight-charArr[i].height;
}
moveY=0;
}else{
for(var j:int=0;j<charArr.length;j++){
charArr[j].y+=5;
}
moveY-=5;
}
}
function faceFront1(){
for(var i:int=0;i<charArr.length;i++){
if(i!=0) charArr[i].visible=false;
else charArr[i].visible=true;
}
}
function faceFront2(){
for(var i:int=0;i<charArr.length;i++){
if(i!=1) charArr[i].visible=false;
else charArr[i].visible=true;
}
}
function faceLeft1(){
for(var i:int=0;i<charArr.length;i++){
if(i!=2) charArr[i].visible=false;
else charArr[i].visible=true;
}
}
function faceLeft2(){
for(var i:int=0;i<charArr.length;i++){
if(i!=3) charArr[i].visible=false;
else charArr[i].visible=true;
}
}
function faceRight1(){
for(var i:int=0;i<charArr.length;i++){
if(i!=4) charArr[i].visible=false;
else charArr[i].visible=true;
}
}
function faceRight2(){
for(var i:int=0;i<charArr.length;i++){
if(i!=5) charArr[i].visible=false;
else charArr[i].visible=true;
}
}
function faceBack1(){
for(var i:int=0;i<charArr.length;i++){
if(i!=6) charArr[i].visible=false;
else charArr[i].visible=true;
}
}
function faceBack2(){
for(var i:int=0;i<charArr.length;i++){
if(i!=7) charArr[i].visible=false;
else charArr[i].visible=true;
}
}
// Click Background to move
bg.addEventListener(MouseEvent.CLICK,bgHandler);
function bgHandler(e:Event):void{
moveing();
}
grass.addEventListener(MouseEvent.CLICK,grassHandler);
function grassHandler(e:Event):void{
moveing();
}
function moveing(){
ex=this.mouseX;
ey=this.mouseY;
moveX=Math.abs(front1.x-ex);
moveY=Math.abs(front1.y-ey);
if(ex>=front1.x+front1.width){ isLeft="false"; moveX-=right1.width; }
else if(ex<front1.x) isLeft="true";
else isLeft="none";
if(ey>=front1.y+front1.height){ isFront="false"; moveY-=front1.height; }
else if(ey<front1.y) isFront="true";
else isFront="none";
step=true;
moveT2.stop();
moveT.start();
txTest.text=bg.x+","+bg.y;
}
// Moving Animation
var moveT:Timer = new Timer(50);
moveT.addEventListener(TimerEvent.TIMER, moveTHandler);
function moveTHandler(event:TimerEvent):void{
if(isLeft=="true"){
if(moveX>0){
if(bg.x!=0&&front1.x<=290){
bgRight();
}else{
goLeft();
}
if(step==true){ faceLeft1(); step=false; }
else { faceLeft2(); step=true; }
}else{
moveT.stop();
moveT2.start();
}
}else if(isLeft=="false"){
if(moveX>0){
if(bg.x+bg.width!=stage.stageWidth&&front1.x>=290){
bgLeft();
}else{
goRight();
}
if(step==true){ faceRight1(); step=false; }
else { faceRight2(); step=true; }
}else{
moveT.stop();
moveT2.start();
}
}else moveT2.start();
}
var moveT2:Timer = new Timer(50);
moveT2.addEventListener(TimerEvent.TIMER, moveT2Handler);
function moveT2Handler(event:TimerEvent):void{
if(isFront=="true"){
if(moveY>0){
if(bg.y!=0&&front1.y<=170){
bgBack();
}else{
goFront();
}
if(step==true){ faceBack1(); step=false; }
else { faceBack2(); step=true; }
}else{
moveT2.stop();
}
}else if(isFront=="false"){
if(moveY>0){
if(bg.y+bg.height!=stage.stageHeight&&front1.y>=170){
bgFront();
}else{
goBack();
}
if(step==true){ faceFront1(); step=false; }
else { faceFront2(); step=true; }
}else{
moveT2.stop();
}
}
}
stop();
一開始的陣列，charArr是代表你的角色，因為角色有八種圖片(上下左右各兩個，分別是左腳和右腳在改變)，角色的動畫基本上是把這幾個圖片切換。
bgArr則是你的背景(只要不是玩家操控的東西都是，包括障礙物)。
bgX和bgY是所有背景的原始座標(用來做定位的，若自行想定位方式可以不需要這兩個陣列)。
ex和ey就是使用者點到的位置，moveX和moveY則是使用者需行走的距離。
isLeft和isFront是判斷使用者行走的方向，用string而非boolean是因為有三種情形：true/false/none，none就是沒有行走時。
step是用來切換角色的左右腳(讓角色不只是移動，還有腳走路的感覺)。
txTest是label，用來做測試用。
其他大概就像function的名稱那樣，
我是先走左右再處理前後，所以有兩個Timer。
我的角色起始位置是在(290,170)，
然後我的移動以5px為單位喔！
附註：
你會發現角色會走在畫面中間，這道理就跟用鍵盤移動或者橫軸遊戲一樣的，
因為畫面很大，在走到底前，是把角色固定在中間，然後讓背景移動。
這是2D遊戲的設計技巧喔！