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="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2FubGluZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
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游戏的更多相关文章
- 2048游戏分析、讨论与扩展 - Part I - 游戏分析与讨论
2048这个游戏从刚出開始就风靡整个世界. 本技术博客的目的是想对2048涉及到相关的全部问题进行仔细的分析与讨论,得到一些大家能够接受而且理解的结果. 在这基础上,扩展2048的游戏性,使其变得更好 ...
- 一个用 C 语言写的迷你版 2048 游戏，仅仅有 500个字符
Jay Chan 用 C 语言写的一个迷你版 2048 游戏,仅仅有 487 个字符. 来围观吧 M[16],X=16,W,k;main(){T(system("stty cbreak&qu ...
- Flex发行2048游戏
近来的2048像挺火的游戏.在公交车,吃.甚至还有人走在路上拿着手机在玩.之前我看我的同事们戏,我认为这是很天真,中移动太无聊了吧 到后面,他是在,我觉得真的很无聊,这时候,无聊的时候无聊,后来我想用 ...
- Cocos2d-x 3.x版2048游戏开发
Cocos2d-x 3.x版2048游戏开发 本篇博客给大家介绍怎样高速开发2048这样一款休闲游戏,理解整个2048游戏的开发流程.从本篇博客你将能够学习到下面内容: 这里注明一下,本教程来自极客学 ...
- powershell字符界面的，powershell加WPF界面的，2048游戏
------[序言]------ 1 2048游戏,有段时间很火,我在地铁上看有人玩过.没错,坐地铁很无聊,人家玩我就一直盯着看. 2 我在电脑上找了一个,试玩了以下,没几次格子就满了.我就气呼呼的放 ...
- 对弈类游戏的人工智能(5)--2048游戏AI的解读
前言: 闲得没事, 网上搜"游戏AI", 看到一篇<<2048游戏的最佳算法是?来看看AI版作者的回答>>的文章. 而这篇文章刚好和之前讲的对弈类游戏AI对 ...
- 微信小程序开发(5) 2048游戏
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发2048小游戏. 本文主要分为两个部分,小程序主体部分及小游戏页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的 ...
- 用javascript制作2048游戏的思路（原创若 转载请附上本链接）
一.项目已上传至github,地址:https://github.com/forjuan/2048game 二.学习了javascript基础后,想要捣鼓点东西做,做了一个自己以前很爱玩的2048游戏 ...
- iOS雪花动画、音频图、新闻界面框架、2048游戏、二维码条形码扫码生成等源码
iOS精选源码 粒子雪花与烟花的动画 iOS 2048游戏 JHSoundWaveView - 简单地声波图.音波图 一个可快速集成的新闻详情界面框架,类似今日头条,腾讯新闻 二维码/条形码扫描及扫描 ...
随机推荐
- iOS多线程：『GCD』详尽总结 ---（转）
文章:https://bujige.net/blog/iOS-Complete-learning-GCD.html 文中 Demo 我已放在了 Github 上,Demo 链接:https://git ...
- 深海机器人（cogs 742）
«问题描述:深海资源考察探险队的潜艇将到达深海的海底进行科学考察.潜艇内有多个深海机器人.潜艇到达深海海底后,深海机器人将离开潜艇向预定目标移动.深海机器人在移动中还必须沿途采集海底生物标本.沿途生物 ...
- 当文字过长时裁剪（显示省略号或只裁剪 用CSS方法，不用程序）
原文发布时间为:2009-09-16 -- 来源于本人的百度文章 [由搬家工具导入] CSS中ellipsis()应用【转】 CSS手册中text-overflow属性的定义： 语法： text- ...
- Sql Server 2005 mdf、ldf文件无法复制问题
[问题原因]Sql Server服务只要启动就一直占用,故无法进行编辑操作. [解决办法 - 1]: 1)在开始-运行对话框中输入"services.msc”,显示如下界面: 2)关闭如上选 ...
- sourceInsight4 破解笔记（完美破解）【转】
转自:http://www.cnblogs.com/Napoleon-Wang/p/6706773.html 软件下载地址:http://www.cr173.com/soft/421803.html ...
- linux根文件系统制作之busybox编译和系统构建【转】
转自:http://blog.chinaunix.net/uid-29401328-id-5019660.html 介绍完相关文件后我们开始构建文件系统,涉及到的文件等到具体用到的时候再讲. 一.编译 ...
- Linux一些防攻击策略
来自http://www.imooc.com/learn/344
- 牛客网 牛客练习赛13 C.幸运数字Ⅲ-思维
C.幸运数字Ⅲ 链接:https://www.nowcoder.com/acm/contest/70/C来源:牛客网 这个题447和477是特殊的,其他的就没什么了. 代码: 1 #i ...
- MySQL的INFORMATION_SCHEMA数据库简介
大家在安装或使用MYSQL时,会发现除了自己安装的数据库以外,还有一个 information_schema数据库.information_schema数据库是做什么用的呢,使用WordPress博客 ...
- Zabbix4.0安装与入门及常见配置
1.安装zabbix-server 环境: 10.0.0.50 zabbix-server 10.0.0.51 zabbix-web 10.0.0.52 zabbix-agent yum -y ins ...