Flex发行2048游戏
近来的2048像挺火的游戏。在公交车，吃。甚至还有人走在路上拿着手机在玩。之前我看我的同事们戏，我认为这是很天真，中移动太无聊了吧
到后面，他是在，我觉得真的很无聊，这时候，无聊的时候无聊，后来我想用flex书写
下这个游戏， 移动的逻辑借鉴了这个安卓的实现：http://www.jikexueyuan.com/study/index/cid/43/lid/9.html
上个周末实现了上下左右移动的逻辑，今天晚上把界面和一些样式加上一些小BUG攻克了下，基本上玩是没问题了
先看几张我刚刚玩的截图：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2FubGluZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
以下就看看代码吧，代码中有相关凝视。这里就不啰嗦了
首先新建一个组件 NumberTile.mxml
<?xml version="1.0" encoding="utf-8"? >
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
<fx:Declarations>
<!-- 布丰(Bufoon)-->
</fx:Declarations> <fx:Script>
<![CDATA[
[Bindable]
public var text:String;
[Bindable]
public var textColor:uint;
[Bindable]
public var bacolor:uint
[Bindable]
public var textSize:uint = 40;
]]>
</fx:Script> <s:BorderContainer width="100%" height="100%" cornerRadius="1" borderVisible="false" backgroundColor="{bacolor}">
<s:Label text="{text}" color="{textColor}" verticalCenter="0" fontWeight="bold" fontFamily="Microsoft YaHei" fontSize="{textSize}" horizontalCenter="0"/>
</s:BorderContainer>
</s:Group>
主应用Main.mxml
<?xml version="1.0" encoding="utf-8"? >
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" initialize="initApp(event)"
addedToStage="stage.addEventListener(KeyboardEvent.KEY_DOWN,appKeyDown)" >
<fx:Declarations>
<!-- 布丰(Bufoon)-->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.events.FlexEvent;
//存放方格的Vector
private var tileVector:Vector.<NumberTile> = new Vector.<NumberTile>();
[Bindable]
private var score:int = 0; //得分
private var winContinue:Boolean = true; //赢了是否继续
protected function initApp(event:FlexEvent):void
{
// 游戏初始化
// 加入16个方格
for(var i:int = 0; i < 16; i++){
//自己定义的方格组件
var bcChild:NumberTile = new NumberTile();
bcChild.bacolor = 0xCDC0B4; //设置背景色
bcChild.name = i + ""; //加入组件名称
tileVector.push(bcChild); //将创建的组件加入到Vector
bcc.addElement(bcChild); //加入到容器中
}
//加入键盘事件
this.addEventListener(KeyboardEvent.KEY_DOWN, appKeyDown);
}
[Bindable]
private var isStart:Boolean = true;
protected function start_clickHandler(event:MouseEvent):void
{
//随机生成两个方格的数字
this.get2or4(this.getNullTileIndex());
this.get2or4(this.getNullTileIndex());
isStart = false;
}
protected function restart_clickHandler(event:MouseEvent):void
{
isStart = false;
//随机生成两个方格的数字
for(var i:int = 0; i < tileVector.length; i++){
tileVector[i].text = null;
tileVector[i].bacolor = 0xCDC0B4;
}
score = 0;
this.get2or4(this.getNullTileIndex());
this.get2or4(this.getNullTileIndex());
} //随机产生方格的数字 num：随机产生的空方格索引
private function get2or4(num:int):void{
if(num == -1){
return;
}
var str:String = "2"; //方格数字
var bacolor:uint = 0xEEE4DA; //数字相应的背景颜色
var randonNum:int = Math.round(Math.random()*10); //随机数
var nt:NumberTile = tileVector[num]; //获取方格对象
if(randonNum > 8){ //假设随机数大于8 就是4，相当于概率在20%左右
str = "4"; //更改方格数字
bacolor = 0xEDE0C8; //设置数字相应的方格背景颜色
}
//更改生成的方格数字，背景色和文字颜色
nt.text = str;
nt.textColor = 0x776E65;
nt.bacolor = bacolor;
} //随机获取空的方格的索引
private function getNullTileIndex():Number{
//空方格 数组
var nullArray:Array = new Array();
for(var i:int = 0; i < tileVector.length; i++){
if(tileVector[i].text == null){
nullArray.push(tileVector[i].name);
}
}
//假设没有空的方格返回-1 相应get2or4方法里面的为-1，就不生成方格
if(nullArray.length == 0){
return -1;
}
var num:Number = Math.round(Math.random()*(nullArray.length - 1));
return Number(nullArray[num]);
} //键盘上下左右方向键处理
protected function appKeyDown(event:KeyboardEvent):void
{
// TODO Auto-generated method stub
switch(event.keyCode.toString())
{
case "37": //left
{
this.leftMoveHandle();
break;
}
case "38": //top
{
this.upMoveHandle();
break;
}
case "39": //right
{
this.rightMoveHandle();
break;
}
case "40":
{
this.downMoveHandle();
break; //bottom
}
}
}
/**
* 上下左右按键的操作逻辑,由于flex中没有二维数组，只是也能够模拟二维数组。就是用下标表示
* 可是这里没有模拟而是直接就操作Vecotr容器
* 由于总共是16个方格。4*4矩阵，加入两个循环
* 例如以下矩阵：
* 0 1 2 3
* 4 5 6 7
* 8 9 10 11
* 12 13 14 15
*
* 看以下两组公式 ：
* 【4*i+j】和【4*i+j1】获取行索引--左右
* 【4*j+i】和【4*j1+i】获取列索引--上下
*
* 上下左右逻辑都差点儿相同。就是循环的比較两个相邻方格，然后做操作
**/
private function leftMoveHandle():void{
this.checkComplete(); //检測游戏是否结束
var moveFlag:Boolean = false; //移动标记，用来推断是否生成方格数字
var count:Number = 0; //用来推断中间是否有相隔的数字，如 242这样
for(var i:int = 0; i < 4; i++){
for(var j:int = 0; j < 4; j++){
for(var j1:int = j + 1; j1 < 4; j1++){
if(tileVector[4*i+j1].text != null){
if(tileVector[4*i+j].text == null){
this.setTileStyle(i,j,j1,0,0);
j--; //继续本行的循环
moveFlag = true;
break;
} else if(tileVector[4*i+j].text == tileVector[4*i+j1].text){
if(count == 0){
score = score + int(tileVector[4*i+j].text)*2;
this.setTileStyle(i,j,j1,0,1);
moveFlag = true;
break;
}
} else{
count++;
}
}
}
count = 0;
}
}
isWin();
if(moveFlag){
this.get2or4(this.getNullTileIndex());
}
} private function rightMoveHandle():void{
this.checkComplete();
var moveFlag:Boolean = false;
var count:Number = 0;
for(var i:int = 0; i < 4; i++){
for(var j:int = 3; j >= 0; j--){
for(var j1:int = j - 1; j1 >= 0; j1--){
if(tileVector[4*i+j1].text != null){
if(tileVector[4*i+j].text == null){
this.setTileStyle(i,j,j1,0,0);
j++;
moveFlag = true;
break;
} else if(tileVector[4*i+j].text == tileVector[4*i+j1].text){
if(count == 0){
score = score + int(tileVector[4*i+j].text)*2;
this.setTileStyle(i,j,j1,0,1);
moveFlag = true;
break;
}
} else{
count++;
}
}
}
count = 0;
}
}
isWin();
if(moveFlag){
this.get2or4(this.getNullTileIndex());
}
} private function upMoveHandle():void{
this.checkComplete();
var moveFlag:Boolean = false;
var count:Number = 0;
for(var i:int = 0; i < 4; i++){
for(var j:int = 0; j < 4; j++){
for(var j1:int = j + 1; j1 < 4; j1++){
if(tileVector[4*j1+i].text != null){
if(tileVector[4*j+i].text == null){
this.setTileStyle(i,j,j1,1,0);
j--;
moveFlag = true;
break;
} else if(tileVector[4*j+i].text == tileVector[4*j1+i].text){
if(count == 0){
score = score + int(tileVector[4*j+i].text)*2;
this.setTileStyle(i,j,j1,1,1);
moveFlag = true;
break;
}
} else{
count++;
}
}
}
count = 0;
}
}
isWin();
if(moveFlag){
this.get2or4(this.getNullTileIndex());
}
} private function downMoveHandle():void{
this.checkComplete();
var moveFlag:Boolean = false;
var count:Number = 0;
for(var i:int = 0; i < 4; i++){
for(var j:int = 3; j >= 0; j--){
for(var j1:int = j - 1; j1 >= 0; j1--){
if(tileVector[4*j1+i].text != null){
if(tileVector[4*j+i].text == null){
this.setTileStyle(i,j,j1,1,0);
j++;
moveFlag = true;
break;
} else if(tileVector[4*j+i].text == tileVector[4*j1+i].text){
if(count == 0){
score = score + int(tileVector[4*j+i].text)*2;
this.setTileStyle(i,j,j1,1,1);
moveFlag = true;
break;
}
} else{
count++;
}
}
}
count = 0
}
}
isWin();
if(moveFlag){
this.get2or4(this.getNullTileIndex());
}
} //移动 方格属性更替
private function setTileStyle(i:int, j:int, j1:int, rFlag:int, cFlag:int):void{
var tile1:NumberTile = null;
var tile2:NumberTile = null;
if(rFlag == 0){ //left right
tile1 = tileVector[4*i+j];
tile2 = tileVector[4*i+j1]
}else{ //up down
tile1 = tileVector[4*j+i];
tile2 = tileVector[4*j1 + i]
} if(cFlag == 0){ //null
tile1.text = tile2.text;
var arr1:Array = this.getStyleArrayByNum(int(tile1.text));
tile1.textSize = arr1[0];
tile1.textColor = arr1[1];
tile1.bacolor = arr1[2];
tile2.text = null;
tile2.bacolor = 0xcdc0b4;
} else{ // plus
tile1.text = (int(tile2.text) * 2) + "";
var arr2:Array = this.getStyleArrayByNum(int(tile1.text));
tile1.textSize = arr2[0];
tile1.textColor = arr2[1];
tile1.bacolor = arr2[2];
tile2.text = null;
tile2.bacolor = 0xcdc0b4;
}
} //依据数字获取相应的相关属性值
private function getStyleArrayByNum(num:Number):Array{
var arr:Array = new Array();
var textColor:uint;
var baColor:uint;
var textSize:uint;
if(num == 2){
textColor = 0x776E65;
baColor = 0xEEE4DA;
textSize = 40;
}else if(num == 4){
textColor = 0x776E65;
baColor = 0xEDE0C8;
textSize = 40;
}else if(num == 8){
textColor = 0xF9F6F3;
baColor = 0xF2B179;
textSize = 40;
}else if(num == 16){
textColor = 0xF9F6F3;
baColor = 0xF59563;
textSize = 40;
}else if(num == 32){
textColor = 0xF9F6F3;
baColor = 0xF67C5F;
textSize = 40;
}else if(num == 64){
textColor = 0xF9F6F3;
baColor = 0xF6653E;
textSize = 40;
}else if(num >= 128){
textColor = 0xF9F6F3;
baColor = 0xEDC951;
textSize = 36;
if(num > 1000){
textSize = 26;
}
} arr.push(textSize)
arr.push(textColor);
arr.push(baColor);
return arr;
}
private var alertFlag:Boolean = false;
private function checkComplete():void{
var flag:Boolean = true;
out:for(var i:int = 0; i < 4; i++){
for(var j:int = 0; j < 4; j++){
if(tileVector[4*i + j].text == null ||
(j > 0 && tileVector[4*i + j].text == tileVector[4*i + j - 1].text) ||
(j < 3 && tileVector[4*i + j].text == tileVector[4*i + j + 1].text) ||
(j > 0 && tileVector[4*j + i].text == tileVector[4*j + i - 4].text) ||
(j < 3 && tileVector[4*j + i].text == tileVector[4*j + i + 4].text)
){
flag = false;
break out;
}
}
} if(flag && !alertFlag){
Alert.yesLabel = "Restart";
Alert.cancelLabel = "No";
Alert.show("GAME OVER","STATUS",9,this,gameOverHandle);
alertFlag = true;
}
}
private function gameOverHandle(event:CloseEvent):void{
alertFlag = false;
isStart = false;
if(event.detail == Alert.YES)
{
for(var i:int = 0; i < tileVector.length; i++){
tileVector[i].text = null;
tileVector[i].bacolor = 0xCDC0B4;
}
this.start_clickHandler(null);
this.setFocus();
score = 0;
}
}
//推断是否赢了
private function isWin():Boolean{
var flag:Boolean = false;
for(var i:int = 0; i < tileVector.length; i++){
if(tileVector[i].text == "2048"){
flag = true;
}
}
if(flag && !alertFlag){
alertFlag = true;
Alert.yesLabel = "Continue";
Alert.cancelLabel = "No";
Alert.show("you Win! is Continue?","win",9,this,winHandle);
}
return flag;
}
private function winHandle(event:CloseEvent):void{
alertFlag = false;
isStart = false;
if(event.detail == Alert.NO)
{
for(var i:int = 0; i < tileVector.length; i++){
tileVector[i].text = null;
tileVector[i].bacolor = 0xCDC0B4;
}
score = 0;
}
}
]]>
</fx:Script>
<s:BorderContainer width="400" height="580" verticalCenter="0" horizontalCenter="0" backgroundColor="0xDEDEDE" borderColor="0x666666">
<s:BorderContainer borderVisible="false" backgroundColor="0xff7f17" width="100%" height="60">
<s:Label text="2048" fontFamily="Microsoft YaHei" fontSize="40" horizontalCenter="0" verticalCenter="0" fontWeight="bold"/>
</s:BorderContainer>
<s:HGroup y="80" right="0" verticalAlign="middle" width="130">
<s:Label text="Score:" fontFamily="Microsoft YaHei" fontSize="20" color="0xB704DD" fontWeight="bold"/>
<s:Label text="{score}" fontFamily="Microsoft YaHei" fontSize="20" color="0xB704DD" fontWeight="bold"/>
</s:HGroup>
<s:HGroup y="120" horizontalCenter="0" horizontalAlign="center" verticalAlign="middle">
<s:BorderContainer enabled="{isStart}" width="100" height="50" backgroundColor="0x6FCDCD" borderVisible="false" click="start_clickHandler(event)" buttonMode="true">
<s:Label text="Start" fontWeight="bold" color="0xEEEEEE" fontFamily="Microsoft YaHei" fontSize="28"
horizontalCenter="0" verticalCenter="0"/>
</s:BorderContainer>
<s:BorderContainer width="100" height="50" backgroundColor="0x79B900" borderVisible="false" click="restart_clickHandler(event)" buttonMode="true">
<s:Label text="Retart" fontWeight="bold" color="0xEEEEEE" fontFamily="Microsoft YaHei" fontSize="28"
horizontalCenter="0" verticalCenter="0"/>
</s:BorderContainer>
</s:HGroup>
<s:BorderContainer id="bcc" x="20" y="180" cornerRadius="4" backgroundColor="0xBBADA0" width="360" height="360" borderColor="0xDEDEDE">
<s:layout>
<s:TileLayout requestedColumnCount="4" requestedRowCount="4" columnAlign="justifyUsingWidth" rowAlign="justifyUsingHeight"
verticalGap="10" horizontalGap="10" paddingBottom="10" paddingLeft="10" paddingTop="10" paddingRight="10"/>
</s:layout>
</s:BorderContainer>
<s:Label text="By布丰(Bufoon)" fontFamily="Microsoft YaHei" fontSize="13" fontWeight="bold" bottom="1" horizontalCenter="0"/>
</s:BorderContainer>
</s:Application>
By 布丰（Bufoon）http://blog.csdn.net/songanling/article/details/26012645
版权声明：本文博主原创文章，博客，未经同意不得转载。
Flex发行2048游戏的更多相关文章
- Flex版的2048游戏
近期2048游戏好像挺火.在公交,吃饭,甚至在路上走路都有人拿着手机在玩,之前我看同事玩,认为非常幼稚,移来移去太无聊了吧 到后面自己也下了.发现确实挺无聊的,也就是在无聊的时候打发无聊的时间,后来就 ...
- Android项目开发实战-2048游戏
<2048>是一款比较流行的数字游戏,最早于2014年3月20日发行.原版2048首先在GitHub上发布,原作者是Gabriele Cirulli,后被移植到各个平台.这款游戏是基于&l ...
- C++学习（三十九）（C语言部分）之 游戏项目（2048游戏）
/***************************项目 2048**********************c语言编写 图形库制作时间:2019.04.03 准备工具: vs2013 图形库 i ...
- 用javascript实现一个2048游戏
早就想自己写一个2048游戏了,昨晚闲着没事,终于写了一个 如下图,按方向键开始玩吧. 如果觉得操作不方便,请直接打开链接玩吧: http://gujianbo.1kapp.com/2048/2048 ...
- powershell字符界面的，powershell加WPF界面的，2048游戏
------[序言]------ 1 2048游戏,有段时间很火,我在地铁上看有人玩过.没错,坐地铁很无聊,人家玩我就一直盯着看. 2 我在电脑上找了一个,试玩了以下,没几次格子就满了.我就气呼呼的放 ...
- [python] python实现2048游戏，及代码解析。
我初学python,有不对之处望大家指教.转载请征得同意. 我在网络上也找了一些2048游戏代码的讲解,但都不是特别详细.所以我希望能够尽量详细的讲解.同时,有的地方我也不懂,希望大家能帮助补充.我会 ...
- 对弈类游戏的人工智能(5)--2048游戏AI的解读
前言: 闲得没事, 网上搜"游戏AI", 看到一篇<<2048游戏的最佳算法是?来看看AI版作者的回答>>的文章. 而这篇文章刚好和之前讲的对弈类游戏AI对 ...
- 最少javascript代码完成一个2048游戏
原生javascript代码写的2048游戏.建议在谷歌浏览器下跑.'WASD'控制方向.演示地址请移步:http://runjs.cn/detail/bp8baf8b 直接贴代码~ html: &l ...
- cocos2d-x游戏开发实战原创视频讲座系列1之2048游戏开发
cocos2d-x游戏开发实战原创视频讲座系列1之2048游戏开发 的产生 视持续更新中.... 视频存放地址例如以下:http://ipd.pps.tv/user/1058663622 ...
随机推荐
- 做一个牛XX的身份证号验证类（支持15位和18位）
原文:做一个牛XX的身份证号验证类(支持15位和18位) #region 是否合法的中国身份证号码 protected bool IsChineseID() { if (str.Length == 1 ...
- IE 加速插件之 Google Chrome Frame
前言 IE 8 及以下版本的速度较慢. 特别是前端的js 和 css 内容较多时尤为突出. 就笔者的开发经验来说GWT, Ext JS, raphael , draw2d 等开发的系统在IE下使用是相 ...
- JSON-C 的安装与使用
下载源代码安装步骤 wget http://oss.metaparadigm.com/json-c/json-c-0.9.tar.gz tar xvf json-c-0.9.tar.gz cd jso ...
- CF 518D（概率dp）
传送门:Ilya and Escalator 题意:有n个人排队进车厢,每秒只能进一个人,而且第1个人进了后面的人才能进,第一个人每秒进入车厢的概率为p,不进的概率为1-p,求t秒后进入车厢总人数的数 ...
- 盒子游戏（The Seventh Hunan Collegiate Programming Contest）
盒子游戏 有两个相同的盒子,其中一个装了n个球,另一个装了一个球.Alice和Bob发明了一个游戏,规则如下:Alice和Bob轮流操作,Alice先操作.每次操作时,游戏者先看看哪个盒子里的球的数目 ...
- 设置SVN忽略文件和文件夹（文件夹）
在多数项目中你总会有文件和文件夹不须要进行版本号控制.这可能包含一些由编译器生成的文件,*.obj,*.lst,也许是一个用于存放可运行程序的输出文件夹.仅仅要你提交改动,TortoiseSVN 就会 ...
- POJ 2151 Check the difficulty of problems （动态规划-可能DP）
Check the difficulty of problems Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 4522 ...
- JQuery是继prototype之后又一个优秀的Javascript库
JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...
- HDOJ 2736 Surprising Strings
Surprising Strings Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- java模拟浏览器包selenium整合了htmlunit，火狐浏览器，IE浏览器，opare浏览器驱
//如果网页源码中有些内容是js渲染过来的,那你通过HttpClient直接取肯定取不到,但是这些数据一般都是通过异步请求传过来的(一般都是通过ajax的get或者post方式).那么你可以通过火狐浏 ...