安开发一个苹果手机App:俄罗斯四方游戏。Javascript 俄罗斯四方 游戏代码解释!

俄罗斯方块游戏,是风靡世界几十年之藏游戏,相信大部分丁还玩了这游乐,那么她是什么编写出来的,我们安才会协调编排一个这么的打也?

俄罗斯方块代码说明

打开发步骤

要修一个玩,基本以以下一些手续进行:

1.游戏规则定义

游戏规则决定了这游乐怎么玩,好不好玩,也尽管决定了编写程序实现之靶子。不同之急需导致不同的规则,不同之平整就是需要不同之计去落实。

像,俄罗斯方是由于安项目方块构成,棋盘布局是9*18还是10*20,是否允许旋转,消掉一行获得的分和得到多履行得的分数如何开展添加,等等。

2.抉择娱乐运行平台以及界面设计

当十分多种平台上都足以玩游戏,常见的比如电脑pc或者笔记本上面直接运行游戏exe程序,或者当微机浏览器被运行flash游戏,或者手机及运行游戏App,或者以特别游戏机比如xbox等达成一直运行游戏程序,或者当VR设备上运行游戏程序。

今非昔比的阳台,需要不同的兑现方式,也便用为此不同的次序还是出语言开发工具来促成。

像,在网页上出娱乐,可以为此html+css+js实现,也可就此flash实现;在大哥大上支付娱乐,可以用java语言在android系统受贯彻,也得以为此objective-c在ios系统上落实;在处理器pc机上得就此c语言在windows系统中贯彻。

界面设计就是冲游戏规则决定人机交互界面,决定了输入和输出的法子。

比如,俄罗斯方可以设计成为左边是棋盘,右侧上面是分,下一个四方,还可以拓宽一个还来同样句按钮,或者暂停按钮等等。

方设计成为纯一种颜色块,还是多颜色块,或者是正的还是应有尽有的,或者是卡通图案,这些就是界面设计。

3.设想编程思路与算法设计

若果控制了以哪种平台及因此何种开发语言来编程实现休闲游,则使考虑编程的笔触,数据的积存,以及实际的算法。

如,俄罗斯方块根据棋盘大小是用二维数组来促成,还是用相同维数组来实现,还是用字典表来实现

平柜打是定时计算,还是用一个循环来处理

怎样保存下一个种类,如何算分数,如何判定一个方是否生不可知更挪,如何判定一行是否都于填满,如何判断游戏已经收

4.按前面设计的思路编写代码实现

考虑好编程思路和算法设计下,可以以设想进行实际的编程开发

勿停止的辨证思路,通过开发中之实在情形,可能针对编程思路展开修改调整,直到好全部娱乐效果

代码就是单排一行的修出来,直到成为一个足运行的嬉戏程序

5.游戏测试

测试就是管自己真是实际用户来运作游戏程序,找到打或者存在的题材,避免程序尚未循预期执行,防止程序崩溃死机等气象,验证游戏确实按照游戏规则能完好可靠的周转,这个开发人员可以找其他人进行测试,防止投机留存思维盲区。

6.游戏发布

游玩测试好后,就得以游戏发布暨对应的水道或平台,让更多的食指方可打至者游戏。

比如,苹果手机App可以发表到苹果之AppStore,安卓手机App可以宣告到各个大动市场。

太简便的发表即是直接发送给好之对象,让她们大吃一惊。

/**
    名称:Javascript 俄罗斯方块!
    作者:Gloot
    邮箱:glootz@gmail.com 
     QQ:345268267 
    网站:http://www.cnblogs.com/editor/
*/

OLSFK = {};

游戏规则定义

俄罗斯方游戏有如下规则:

棋盘由涨幅为10格高度也20格底方框构成

方共发生7种植形象:

长条形1个,正方形1个,T型1个,L型2个,S型2个

正方出现在尽上端正中间,同时知道下一个四方是啊

正方往生掉得,每隔1秒下落一行

正方下落中而撞有方块阻挡不可知降则停下滑

正方停止下落后,判断是否发整行都被方块填满,如果产生,则整行消失,上面的一切执行完全下跌一行

统计消掉的总店多次

四方以退过程被,可以依照向下方向键让方直接掉落到直到停止职务

足以往左或往右侧向键让方进行盘,每本键一破盘90渡过

假设没足够的长空为方落下虽玩结束

据俄罗斯方代码应用 JavaScript 脚论代码写成,简单好掌握;

一日游运行平台及界面设计

万一因极其盛的苹果手机作为游戏运行条件,则需开销一个苹果手机App

苹果手机用的是iOS操作系统,开发环境需要Mac电脑和开发工具软件Xcode

付出语言可以利用objective-C,开发娱乐可假设支付用工具包cocos2d

一旦用披露暨苹果AppStore,则需一个开发者账号,以及同年99美金

界面设计:

先后启动之后入主界面,只能竖屏显示游戏

主界面分为横有些

左手为棋盘:显示任何棋盘,正方形的格子组成,宽10约束高20格

依照苹果手机尺寸320点*480接触来设计,20格高度也480触及,则涨幅10格占有240碰

于是左边棋盘占用240沾,右侧剩余80点

右手分为上部及下面

上部也状态栏靠上显示:最上显示显示当前消掉的行数,下面显示方块类型小图标

下为按钮栏靠下显得:从达到往下显得3个按钮,排行榜/关于/重新开始

盖的界面设计如下示意图:

界面运行逻辑:

点击排行榜按钮进入一个新页面,上面显示消掉的行数最多之8独行数数字,下面是一个回去按钮

点击关于按钮进入一个初页面,上面显示同一摆说明图片,下面是一个回到按钮

点击重新开始按钮,将手上棋盘清空并重复开同小卖部打,游戏启动

一日游启动后,第一单方块从最上面中间开始通往生掉得,每秒下落一行

又,上方之状态栏,显示下一个即将出现的方类型小图标

四方下落过程被,在屏幕及只是因左滑可以于左逆时针旋转当前方,或者以屏幕及只因右滑得向右侧顺时针旋转当前方

尚可以在屏幕上单指下滑可以叫眼前方直接掉到脚

四方如果未可知再次向下移动一行的时光,则方块停止,同时开始判断是否会消掉某些行

设若能消掉某些行,则统计消掉的行数,增加及上边状态栏显示消掉的数字达到,刷新显示

消掉的行从屏幕上解除,同时上的兼具执行于生整走

加入棋盘最上中间的供方块出现的地方已经被方块占已了,则以为这同一局打结束

游戏结束则弹有一个窗口亮游戏了信息,显示总共消掉了聊行,然后将该记录保留至数据库被

弹来窗口上出返按钮,点击返回按钮,弹出窗口关闭,回到游戏主界面,主界面停止游戏,点击重新开按钮开始新一店家

全代码采用静态类及静态变量成员做;

编程思路和算法设计

多少存储:

设想用二维列表来存储棋盘上的各一个格子

[[0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0],

……

[0,0,0,0,0,0,0,0,0,0]]

二维列表中,第一层是加大总计20执,第二重合内凡是推广每一行的10个格子

若是格子里面有方块,则存放数字1,如果无方块则存放数字0

看清一行要整凡1,则意味着该行填满了方格,需要消掉

运用下列数字来对7栽方块进行区分,存储2只变量,当前方和生一个方

1:长条形 2:正方形 3:T型 4:L型向左 5:L型向右侧 6:S型左上右侧下 7:S型右上左下

生成下一个四方则动用随机函数生成1到7当面临的轻易数

下一场不同方块如果进展了兜会起不同的状态,定义旋转状态如下:

11:竖立长条 12:横排长条

21:正方形

31:T型尖头朝下 32:T型尖头朝左 33:T型尖头朝上 34:T型尖头朝右

41:L型短头向左长头向上 42:L型短头向达长头向右 43:L型短头向右侧长头向下
44:L型短头向下长头向左

51:L型短头向右侧长头向上 52:L型短头向下长头向右 53:L型短头向左长头向下
54:L型短头向达长头向左

61:S型左上右侧下戳 62:S型左上右侧下横排

71:S型右上错误下戳 72:S型右上错误下横排

使2单变量x,y存储时方的左上角的正方的行号和列号

下变量存储时早就破的行数

算法设计:

点击重新开按钮后,主程序启动

清空整个棋盘,对二维列表全部数字清零

下一场变第1单随机数,赋值给当下方变量

然后生成第2个随机数,赋值给下一个方变量

刷新显示页面

进去定时处理函数,定时间隔时间为1秒:

定时处理函数:

判断当前方如果得以为生移动,则向下活动,修改二维列表变量

而不可以下浮了,则判断是否足以排除某行,如果排除了某行则上的所有行的价值完下更换一实施

一经非得以下浮也无可以排了,则将生一个四方的数值赋值给当下方,随机数异常成下一个四方

接下来判断时方是否可放入棋盘最上端的中等位置,如果得以放入则改二维列表变量,如果无可知放入,则打了

看清当前方是否可以下换函数:

根据目前方类型变量,以及方块即盘状态,结合二维列表变量判断,举例:

若是11戳长条形,则冲当下方左上角的行号和列号,可以清楚最下方的坐标位置

比如x=0执,y=5排列,则最下方的坐标为(3,5),那么只要看二维列表的(4,5)如果为1虽然不足下换,否则可以下浮

仍要是31:T型尖头朝下

x=0,y=4,那么下方可能发3单方块可能撞阻碍,分别是(0,4)/(1,5)/(0,6)

那么要看二维列表的(1,4)/(2,5)/(1,6)只要来一个吧1虽不行下更换,否则可以下浮

判断是否可以破某行函数:

针对二维列表进行巡回,如果一行当中的具备值都为1,则可以打消

一直用拥有方的实行的值为生复制,最上面一行的价周赋值为0,同时总的消行数变量加1

认清当前方是否好放入棋盘最上之中档位置函数:

因目前方类型变量,以及方块即转状态,结合二维列表变量判断,举例:

如果是1长带状,默认为11起家长条形

则用看清(0,5)/(1,5)/(2,5)/(3,5)这4只坐标在二维列表中是否为1,只要来1独职务为1虽不足放入

依要是3T型尖头朝下

尽管要判定(0,4)/(0,5)/(0,6)/(1,5)这4单坐标

旋转处理:

一共允许有3栽滑动手指操作,向下/向左/向右侧

为下滑动手指,表示将手上方直接倒掉到最好下方直到碰到阻碍停住

通向左滑动手指,表示将手上方进行逆时针转动

向右侧滑动手指,表示用眼前方进行顺时针旋转

望下丢得到处理:

又调用前面定义之判定当前方是否好下移函数

自从第一尽循环到结尾一行坐标,即可得出最多可落下到啊一行

逆时针转动处理:

基于当下方类型变量,以及方块即盘状态,结合二维列表变量判断,举例:

要是是11竖起长条形,旋转中心点取从达成向生第2只方块

那么根据旋转后待占用的职位,需要判定(1,4)/(1,6)/(1,7)这3独岗位在二维列表中之价必须是0才可以转动

旋转完成后应该左上角坐标应该打(0,5)变成(1,4),方块时盘状态从11成为12

请圈下面的示意图:

这就是说,顺时针旋转和这看似,只是选择后的左上角左边变量变化,以及方块即盘状态值变化

全脚本通过兑现代码全局配置 OLSFK.Options = {…}

现实代码实现

由篇幅所限,这里不得不约讲述核心的有些代码实现方式

开准备:

先是取得注册一个AppleID

接下来于Mac电脑及设置好Xcode开发软件

引入相关工具开发包:

导入cocos2d开发工具包和要的一部分系Frameworks

数量操作类:

AllData.h

#define SIZE 24

#define WIDTH 320

#define HEIGHT 480

@interface AllData : NSObject

@property int next;

@property int current;

@property int currentstatus;

@property int posx;

@property int posy;

@property int alllines;

@property (nonatomic,retain) NSMutableArray *numberdatas;

//取得时仿佛的实例

+(AllData *) sharedAllData;

//初始化棋盘

-(void)initAllData;

//取得下一个方

-(int) getNextValue;

//逆时针旋转当前方

-(void)changeLeft;

//顺时针旋转当前方

-(void)changeRight;

//判断是否好下浮当前方

-(boolean)canMoveDown;

//处理消除慢行操作

-(void)removeLines;

@end

囤控制类:

DBUtil.h

@interface DBUtil : NSObject

+ (NSString *)dataFilePath;

+ (void)initDataBase;

//存储一庄打消除行数数字

+(void)insertOneData:(int)topnumber;

//取得最老之8个记录数:消除行数

+ (NSMutableArray *)getListDataFromDb;

@end

正方绘画类:

#import “CommonUtil.h”

#import “AllData.h”

@implementation CommonUtil

//绘画棋盘中的一个格子

+ (void) drawOneNumber:(int)number pos:(CGPoint)pos
layer:(CCLayer*)layer {

CCSpriteBatchNode *numbatch = [CCSpriteBatchNode
batchNodeWithFile:[NSString stringWithFormat:@”num_%d.png”,number]
capacity:15];

numbatch.anchorPoint = CGPointZero;

[numbatch setPosition:pos];

[layer addChild:numbatch];

CCSprite *sprite1 = [CCSprite spriteWithTexture:numbatch.texture
rect:CGRectMake(0, 0, SIZE-2, SIZE-2)];

sprite1.position = ccp(0,0);

sprite1.anchorPoint = CGPointZero;

[numbatch addChild:sprite1];

}

// 绘画整个棋盘

……

启航进入主界面:

@implementation AppDelegate

– (void) applicationDidFinishLaunching:(UIApplication*)application

{

……

[[AllData sharedAllData] initAllData];

[DBUtil initDataBase];

[[CCDirector sharedDirector] runWithScene: [MainLayer scene]];

…….

状态栏和工具栏:

@interface ToolLayer : CCLayer {

}

@implementation ToolLayer

– (void) drawTool {

[self removeAllChildrenWithCleanup:YES];

//画底部背景

CCSprite *bg = [CCSprite spriteWithFile:@”tool_bootom_back.png”];

bg.anchorPoint = CGPointZero;

[self addChild:bg z:0 tag:0];

//排行按钮

CCMenuItem *gold = [CCMenuItemImage itemFromNormalImage:@”gold.png”
selectedImage:@”gold_pressed.png” target:self
selector:@selector(gold:)];

//关于按钮

CCMenuItem *about = [CCMenuItemImage itemFromNormalImage:@”about.png”
selectedImage:@”about_pressed.png” target:self
selector:@selector(about:)];

//重新开始按钮

CCMenuItem *restart = [CCMenuItemImage
itemFromNormalImage:@”restart.png” selectedImage:@”restart_pressed.png”
target:self selector:@selector(restart:)];

……

// 绘画消除行数的图标

// 绘画消除行数的数字

// 绘画下一个四方的图标

– (void) restart:(id) sender

{

[[AllData sharedAllData] initAllData];

MapLayer *mapLayer = (MapLayer *)[[CCDirector
sharedDirector].runningScene getChildByTag:0];

[mapLayer startGame];

[self drawTool];

}

棋盘滑动手势控制方法:

– (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

NSSet *allTouches = [event allTouches];

switch ([allTouches count])

{

case 1:

{

UITouch *touch1 = [[allTouches allObjects] objectAtIndex:0];

single = [touch1 locationInView:[touch1 view]];

} break;

default:

break;

}

}

– (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {

NSSet *allTouches = [event allTouches];

switch ([allTouches count])

{

case 1:

{

UITouch *touch1 = [[allTouches allObjects] objectAtIndex:0];

CGPoint singleend = [touch1 locationInView:[touch1 view]];

float x = single.x – singleend.x;

float y = single.y – singleend.y;

if (x*x > y*y && x*x > 2500 && x > 0) {

//向左横向滑动超过50

NSLog(@”左”);

[self changeLeft];

}else if (x*x > y*y && x*x > 2500 && x < 0) {

//向右侧横向滑动超过50

NSLog(@”右”);

[self changeRight];

}else if (x*x < y*y && y*y > 2500 && y < 0) {

//向下就是为滑动超过50

NSLog(@”下”);

[self moveDown];

}

} break;

default:

break;

}

}

主界面程序:

@interface MapLayer : CCLayer {

}

@implementation MapLayer

-(void) startGame{

[self removeAllChildrenWithCleanup:YES];

int toppos = 0;

for (NSMutableArray *onerow in [AllData sharedAllData].numberdatas) {

int leftpos = 0;

toppos = toppos + SIZE + 1;

for (NSNumber *onepos in onerow) {

leftpos = leftpos + SIZE + 1;

[CommonUtil drawOneNumber:[onepos intValue] pos:CGPointMake(leftpos,
toppos) layer:self];

}

}

// 设置定时器处理函数,定时间隔时间1秒

……

}

//定时器处理函数

//判断时方如果可以往下移动,则向下活动,修改二维列表变量

//如果非得以下浮了,则判断是否好排除某行,如果排除了某行则上的所有行的价完下转移一执行

//如果未得以下浮也不可以解了,则用生一个四方的数值赋值给当下方,随机数异常成下一个四方

//然后判定时方是否足以放入棋盘最上端的中级位置,如果得以放入则改二维列表变量,如果不克放入,则玩了

……

现实代码这里不粘了,有矣详实的算法程序设计和数据存储类型,要促成出来并无是无与伦比为难,只是要耐心细心而已。

概念方块起始坐标及定义各自的转动点;

玩耍测试

玩的重头戏程序完成后,就可以单方面测试一边修改

测试的上要顾测试各种边界情况,例如

将眼前方移动至极致左边,看看碰到边界的时候会无会见出错

拿眼前方卡入一个刚刚插入的空槽形状中,看程序是未是会见出错

伺机眼前方掉入一个空槽,然后就转,理论及应有无能够旋转了,测试看看程序会无会见拧

测试一次性消掉4实行,看看程序是未是会错

一旦协调测试的差不多了,就好用次第打包发送给爱人测试

偶然,开发的口非常不便测试好编写的程序,但是反而吃他人可以测试出多问题

起初始化俄罗斯四方界面开始,再监听键盘事件;以及左右,向下和旋转动作判断,重新渲染方块位置;

玩耍发布

下介绍一下约的披露流程,让大家发出个初步印象,详细的宣布流程网上可以寻找到多

打闹测试到骨干无不当后,就足以将戏发布暨苹果的AppStore了

发布App需要购置苹果的开发者账号,一年是99美金,目前因故信用卡支出为杀便利

然后登陆https://developer.apple.com,进行一些证书的设置

别好证明后,将证件下充斥及Mac电脑受到导入到Xcode之中

然后使Xcode进行编译和打包好一个ipa文件

接下来登陆https://itunesconnect.apple.com创建一个App,填写一些介绍信息,需要一些App的截图

然后回Xcode使用Application
Loader这个工具软件将ipa文件上传到itunesconnect当中

接下来回到itunesconnect网站上提交App

下一场就是等待苹果AppStore的审批,一般7-10独工作日可以完成对

成就审查之后,你的App就会见现出于苹果手机的AppStore里面了,就可搜寻到了

接下来就足以告诉你的心上人等,让他俩大吃一惊吧。

=

看清是否消行,以及对应的加级判断,执行进度,加分操作来实行;

末了为判断是否当前级别大于所定义之无比酷级别来判断是否结束;

代码说明讲解

OLSFK.Options = { //相关参数
    width:12,//界面横向方块数
    height:20,//界面纵向方块数
    boxWidth : '16px',
    curLevel:1,
    speed : 1000, //setInterval,setTimeout
    direct : { //可以设定是A S D W, 还是← ↓ → 
        Down: 40 , /*run speed*/
        Left: 37,
        Right: 39,
        Rotate: 38
    },
    Move:true,//是否正在移动
    Eventing:false,
    Levels: {
        1:1000,
        2:900,
        3:800,
        4:700,
        5:600,
        6:500,
        7:400,
        8:300,
        9:200,
        10:100
    },
    curBlock:4, //当前移动的图形名称
    nextBlock:0,
    GampMap:new Object(),
    Timer:null,
    deline:0,
    Score:0,
    Deling:false,
    Start:false,
    lineNum:10, //删除几行了,加级
    ScoreNum:40 //消一行加分
}

direct 代表 使用键盘方位键来操作方块的倒方向;

运用啊种方向键按擅自喜欢配置,比如许母键的A, S, D, W;
或右手小数字键盘的数字键各自的键盘编码;

以 上(旋转)、下、左、右 方向键的编码分别吗:38、40、37、39;

Levels:表示级别配备,本配置并分为10层,每个级别所对应之低落速度,即定时执行间隔;

curBlock:表示手上倒之正方;

nextBlock:表示接下执行之方框索引,并展示界面右上比赛的预览框中;

GampMap:用于保存在因定义行列数形成的一日游表格中保存每个约的数额信息;

OLSFK.Options.GampMap[x+'_'+y] = 0;

目标表格为: id: “box_”+x+”_”+y;

初始化数据吧 ‘0’;  表示该表还无占用;当有占用时,设置值为 ‘1’;

Timer:为定时执行器;setTimeout
定时实施方下落的底频率;定时时间越聊,速度越快;

Deling:当在尽消行操作时,下次小勿显得并退;

lineNum:表示消超过 10 行,加一级;

ScoreNum:表示每消一行所加的分;

 

OLSFK.ReItems = function (cur){ //key旋转点

    switch (cur)
    {
        case 1:
            OLSFK.Items[1] = {//长块 LongBlock
                                1:{x:4,y:0},
                                2:{x:5,y:0},
                                3:{x:6,y:0},
                                4:{x:7,y:0},
                                5:{x:5,y:0} //旋转点
                            };
            break;
                        //....
        }
}

该方式用于恢复方块的始发设置;

OLSFK.Next = { //key旋转点
    //长块 LongBlock
    1: {
        1:{x:0,y:1},
        2:{x:1,y:1},
        3:{x:2,y:1},
        4:{x:3,y:1}
    },
        //...
}

啊非了无跟戏方块的设置冲突,独立出来下次随便方块的靶子配置;

OLSFK.Items = { //key旋转点
    //长块 LongBlock
    1: {
        1:{x:4,y:0},
        2:{x:5,y:0},
        3:{x:6,y:0},
        4:{x:7,y:0},
        5:{x:5,y:0}
    },
    //方块Box
    2: {
        1:{x:4,y:0},
        2:{x:5,y:0},
        3:{x:4,y:1},
        4:{x:5,y:1},
        5:{x:0,y:0}
    },
    //凸块 TuBlock
    3: {
        1:{x:4,y:1},
        2:{x:5,y:0},
        3:{x:5,y:1},
        4:{x:6,y:1},
        5:{x:5,y:1}
    },
    //L块 LBlock
    4: {
        1:{x:5,y:0},
        2:{x:5,y:1},
        3:{x:5,y:2},
        4:{x:6,y:2},
        5:{x:5,y:2}
    },
    5: { //反向L块 FLBlock
        1:{x:5,y:2},
        2:{x:6,y:2},
        3:{x:6,y:1},
        4:{x:6,y:0},
        5:{x:6,y:2}
    },
    //Z块 ZBlock
    6: {
        1:{x:4,y:0},
        2:{x:5,y:0},
        3:{x:5,y:1},
        4:{x:6,y:1},
        5:{x:5,y:0}
    },
    7: {//反向Z块 FZBlock
        1:{x:4,y:1},
        2:{x:5,y:1},
        3:{x:5,y:0},
        4:{x:6,y:0},
        5:{x:5,y:1}
    }
}

正方共分为:长段,方块,凸块(T块),L块,反L块,Z块,反Z片几种植;

共7种植方块,以1,2,3,4,5,6,7
索引键表示,方块是四只小片组成,每块都生各自的坐标,1-4意味着结合该块的始发坐标位置,5意味旋转点;

OLSFK.Init = function() { //初始化界面
    //...
}

俄罗斯方的界面初始化方法;将当 window.onload 中调用执行;

var w = OLSFK.Options.width;
    var h = OLSFK.Options.height;
    var total = w * h;

    var x=0,y=0;
    for (var i=0; i<total; i++)
    {

        OLSFK.Options.GampMap[x+'_'+y] = 0;

        Lib.Tag('SPAN',{id:"box_"+x+"_"+y,name:"cbox",style:{
            width:OLSFK.Options.boxWidth,
            height:OLSFK.Options.boxWidth,
            border:"2px outset #669",
            background:"#ddd",
            float:"left",
            overflow:"hidden"
        },innerHTML:"&nbsp;",className:"cssbox"},back);

        var end = i + 1;
        x++;
        if (end >= w && end % w == 0)
        {
            x=0;
            y++;
            Lib.Tag('DIV',{style:{
                clear:"both"
            }},back);
        }

    }

由此安装的 Options.width, Options.height
列数与行数,以及安装的小方格宽度,初始化了一个丰厚:Options.width列,高也
Options.height 的表界面出来;

Lib.Tag 用于创造标签对象;

Lib.Tag = function(TAG,json,pnode) {
    //...
}

TAG为标签名,比如: div, span 等;

json为安标签样式 style;

pnode 是拖欠创建所于的父容器;

OLSFK.Init = function() {}
还创造主游戏区域边缘的下次任意方块预览区,当前级别,及分,以及操作“开始”,“暂停”按钮等;

图片 1

娱初开始称口点

window.onload = function() {
    if (window.isIE)
    {
        document.attachEvent("onkeydown",function(e) {
            if (OLSFK.Options.Start)
            {
                var E = OLSFK.KeyCode();
                OLSFK.EventFunc(E);
            }

        });

        document.attachEvent("onkeyup",function(e) {
            if (!OLSFK.Options.Move && OLSFK.Options.Start)
            {
                OLSFK.Options.Move = true;
                OLSFK.Options.Eventing = false;

                OLSFK.Options.Timer = setTimeout(function() {
                    OLSFK.play();
                }, OLSFK.Options.Levels[OLSFK.Options.curLevel]);
            }
        });
    } else {
        document.addEventListener("keydown",function(e) {

            if (OLSFK.Options.Start)
            {
                var E = OLSFK.KeyCode();
                OLSFK.EventFunc(E);
            }

        },false);

        document.addEventListener("keyup",function(e) {
            if (!OLSFK.Options.Move && OLSFK.Options.Start)
            {
                OLSFK.Options.Move = true;
                OLSFK.Options.Eventing = false;

                OLSFK.Options.Timer = setTimeout(function() {
                    OLSFK.play();
                }, OLSFK.Options.Levels[OLSFK.Options.curLevel]);
            }
        },false);
    }
    OLSFK.Init();
}

要是监听键盘事件,根据 键盘事件 返回的按钮编码与 OLSFK.Options.direct
设置方向键匹配来操作方块的活动,旋转等;

keydown 用于操作下落方块的走方向,旋转等;并重新绘制方块位置;

keyup 后持续按照本级速度向下落;

OLSFK.Options.Levels[OLSFK.Options.curLevel]

代表即级别相应的速度,即定时器间隔执行时(毫秒);

OLSFK.EventFunc = function(code) {
    switch (code)
    {
        case OLSFK.Options.direct.Left: //LEFT
            if (!OLSFK.Options.Deling)
            {
                clearTimeout(OLSFK.Options.Timer);
                OLSFK.Options.Eventing = true;
                OLSFK.Options.Move = false;
                OLSFK.Left();
            }

            break;
            //...
        }
}

该法是 监听 keydown 事件实施之动作;code 为以键 编码;

当判断不当消行动作频仍,清除定时器,OLSFK.Options.Eventing 设置为事件被
true,OLSFK.Options.Move 为 false 表示已活动;

上 向左移动方法 OLSFK.Left();

OLSFK.Left = function() {
    var block = OLSFK.Items[OLSFK.Options.curBlock];

    if (block)
    {
        var flag = true;
        for (var i=1; i<=4; i++)
        {
            var x = block[i].x;
            var y = block[i].y;

            if (x-1 < 0)
            {
                flag = false;
                break;
            }

            if (OLSFK.Options.GampMap[(x-1)+'_'+y] == 1 && !OLSFK.isMe(x-1,y))
            {
                flag = false;
                break;
            }
        }

        if (flag)
        {
            for (var i=1; i<=4; i++) //清除图形
            {
                var itm = block[i];
                var box = Lib.Getid('box_'+itm.x+'_'+itm.y);

                box.style.background = '#ddd';
                OLSFK.Options.GampMap[itm.x+'_'+itm.y] = 0;
            }

            for (var i=1; i<=5; i++)
            {
                var x = block[i].x;
                var y = block[i].y;

                OLSFK.Items[OLSFK.Options.curBlock][i] = {x:(x-1),y:y};
            }

            OLSFK.draw();
        } 
    }
}

var block = OLSFK.Items[OLSFK.Options.curBlock];
表示收获当前移动方块;

if (OLSFK.Options.GampMap[(x-1)+'_'+y] == 1 && !OLSFK.isMe(x-1,y))
{
    flag = false;
    break;
}

判定该方块四独稍方块左边是否来深受占用的方框,也尽管: OLSFK.Options.GampMap[(x-1)+’_’+y]
为 1; 并且该位置块不属方块自己的;

当左边方向无占用格时,清除当前方四只小方块位置,重新绘制方块新坐标位置;并重置
相应的 OLSFK.Options.GameMap [x+y] 相应格的价值;

当按钮 keyup 时,继承正常为下落;

OLSFK.isMe 代码:

OLSFK.isMe = function(x,y) {
    var block = OLSFK.Items[OLSFK.Options.curBlock];

    if (block)
    {
        for (var i=1; i<=4; i++)
        {
            if (block[i].x == x && block[i].y == y)
            {
                return true;
            }
        }
    }

    return false;
}

不畏指定的 x,y (参数值) 是否还在时方四单坐标内;

OLSFK.Right () 与 Left() 一样;

盘方块代码;

OLSFK.Rotate = function() {
    var block = OLSFK.Items[OLSFK.Options.curBlock];

    if (block)
    {
        var flag = true;

        var R = block[5];
        for (var i=1; i<=4; i++)
        {
            var x = block[i].x;
            var y = block[i].y;

            if (R.x == x && R.y == y)
            {

            } else {
                var nson = new Object();

                nson.x = R.x + R.y - y;
                nson.y = R.y - R.x + x;

                if ( nson.x < 0 || nson.y < 0 || nson.x >= OLSFK.Options.width || nson.y >= OLSFK.Options.height )
                {
                    flag = false;
                    break;
                }

                if (OLSFK.Options.GampMap[nson.x+'_'+nson.y] == 1 && !OLSFK.isMe(nson.x,nson.y))
                {
                    flag = false;
                    break;
                }
            }
        }

        if (flag)
        {
            for (var i=1; i<=4; i++) //清除图形
            {
                var itm = block[i];
                var box = Lib.Getid('box_'+itm.x+'_'+itm.y);

                box.style.background = '#ddd';
                OLSFK.Options.GampMap[itm.x+'_'+itm.y] = 0;
            }

            var Pnt = 1;

            for (var i=1; i<=4; i++)
            {
                var x = block[i].x;
                var y = block[i].y;

                if (R.x == x && R.y == y)
                {
                    Pnt = i;
                } else {
                    var nson = new Object();

                    nson.x = R.x + R.y - y;
                    nson.y = R.y - R.x + x;
                    OLSFK.Items[OLSFK.Options.curBlock][i] = {x:nson.x,y:nson.y};
                }
            }

            OLSFK.Items[OLSFK.Options.curBlock][5] = OLSFK.Items[OLSFK.Options.curBlock][Pnt];

            OLSFK.draw();
        } 
    }
}

var R = block[5]; 就是抱旋转点;

尽管开始对方块四只小片以旋转点为着力,逆时针旋转(并无咸是 90
度);当当前片不呢转点时,旋转公式;

var nson = new Object();

nson.x = R.x + R.y - y;
nson.y = R.y - R.x + x;

以此公式要如此看; 

ResultX = RotateX + (RotateY - CurrentY);
ResultY = RotateY - (RotateX - CurrentX);

//Y的偏移量,就是X的增加值;
//反之同

当盘四周都管占用物时;清除当前图,重绘旋转后底图纸位置;

重置 OLSFK.Options.GampMap[itm.x+’_’+itm.y] 各个方块的占用值;

OLSFK.Random = function() {

    if (OLSFK.Options.nextBlock != 0)
    {
        OLSFK.Options.curBlock = OLSFK.Options.nextBlock;

        var block = OLSFK.Next[OLSFK.Options.nextBlock];
        if (block)
        {
            for (var i=1; i<=4; i++)
            {
                var itm = block[i];
                var box = Lib.Getid('cur_'+itm.x+'_'+itm.y);

                box.style.background = '#ddd';
                //OLSFK.Options.GampMap[itm.x+'_'+itm.y] = 0;
            }
        }
    } else {
        OLSFK.Options.curBlock = Math.floor(Math.random() * 7 + 1);
    }
    OLSFK.Options.nextBlock = Math.floor(Math.random() * 7 + 1);

    OLSFK.drawNext();
}

随意大成下次预下落的方;并出示到右上较量的预览表格里;

OLSFK.play = function(speed) {
    var block = OLSFK.Items[OLSFK.Options.curBlock];

    if (block && OLSFK.Options.Move)
    {

        var flag = true;
        for (var i=1; i<=4; i++)
        {
            var x = block[i].x;
            var y = block[i].y;

            if (y+1 >= OLSFK.Options.height)
            {
                flag = false;
                break;
            }

            if (OLSFK.Options.GampMap[x+'_'+(y+1)] == 1 && !OLSFK.isMe(x,y+1))
            {
                flag = false;
                break;
            }
        }

        if (flag)
        {
            for (var i=1; i<=4; i++) //清除图形
            {
                var itm = block[i];
                var box = Lib.Getid('box_'+itm.x+'_'+itm.y);

                box.style.background = '#ddd';
                OLSFK.Options.GampMap[itm.x+'_'+itm.y] = 0;
            }

            for (var i=1; i<=5; i++)
            {
                var x = block[i].x;
                var y = block[i].y;

                OLSFK.Items[OLSFK.Options.curBlock][i] = {x:x,y:(y+1)};
            }
            OLSFK.draw();

            var S = OLSFK.Options.Levels[OLSFK.Options.curLevel];
            if (speed)
            {
                S = 50;
            }
            OLSFK.Options.Timer = setTimeout(function() {
                OLSFK.play();
            }, S);
        } else {
            OLSFK.ReItems(OLSFK.Options.curBlock);
            OLSFK.newRun();
        }
    }
}

OLSFK.play
正常下落的法门,也得判断下落一格是否发生被占据的约束,如果没有,清除当前方,绘制方块新岗位;

当方块不能够还降低时(flag = false),重置当前方坐标配置;
OLSFK.ReItems(OLSFK.Options.curBlock);

入 OLSFK.newRun(); 新下落方块下落过程准备;

OLSFK.newRun = function() {

    clearTimeout(OLSFK.Options.Timer);
    OLSFK.DelFunc();
    if (OLSFK.Options.deline >= 10)
    {
        OLSFK.Options.deline = 0;
        OLSFK.Options.curLevel ++;
        OLSFK.Element.CurLevel.setHTML("级:"+OLSFK.Options.curLevel);
    }
    OLSFK.Element.Score.setHTML("分:"+OLSFK.Options.Score);

    if (OLSFK.Options.curLevel <= OLSFK.Options.lineNum)
    {
        OLSFK.Random();
        //判断是否结束
        OLSFK.ChkEnd();
    } else {
        OLSFK.Options.Move = false;
        OLSFK.Options.Start = false;
        OLSFK.Options.Eventing = false;
        OLSFK.Options.Deling = false;
        Lib.Getid('spn').innerHTML = 'Game Is Over! You Win the Game!';

        Lib.Getid('dobtn').innerHTML = ' 开始 ';
    }

}

当退结束时,清除定时器,暂停新方块下落,检测是否出可解除的履;减了有些行;

每减去一行 加分 OLSFK.Options.Score += OLSFK.Options.ScoreNum;

是主意在 : 

OLSFK.DelFunc = function() {
    OLSFK.Options.Deling = true;
    OLSFK.Options.Move = false;
    OLSFK.Options.Eventing = false;
    var Fn = 0;
    for (var i=OLSFK.Options.height-1; i>=0; i--)
    {
        Fn = 0;
        for (var j=0; j<OLSFK.Options.width; j++)
        {
            if (OLSFK.Options.GampMap[j+'_'+i] == 1)
            {
                Fn++;
            }
        }

        if (Fn == OLSFK.Options.width)
        {
            OLSFK.Options.deline ++;
            OLSFK.Options.Score += OLSFK.Options.ScoreNum;
            OLSFK.DelLine(i);
            i++;
        }
    }
    OLSFK.Options.Deling = false;
    OLSFK.Options.Move = true;
    OLSFK.Options.Eventing = true;
}

中执行;

减了一行,就重置该行以上有行往下降一行;并重置 :

OLSFK.Options.GampMap[x+’_’+y] =
OLSFK.Options.GampMap[x+’_’+(y-1)];

该减行为上行的数;

if (Fn == OLSFK.Options.width)
        {
            OLSFK.Options.deline ++;
            OLSFK.Options.Score += OLSFK.Options.ScoreNum;
            OLSFK.DelLine(i);
            i++;
        }

欠论断表示该行上具有格都被占用到;

回 newRun 上,当判断消行超过几行时,即加级;

if (OLSFK.Options.curLevel <= OLSFK.Options.lineNum)
    {
        OLSFK.Random();
        //判断是否结束
        OLSFK.ChkEnd();
    }

倘级数小于配置的总级数,则跻身 OLSFK.random();

安装当前下降方块,并随意大成下次降方块并预览右上角表格上;

OLSFK.ChkEnd = function() {
    var block = OLSFK.Items[OLSFK.Options.curBlock];

    if (block && OLSFK.Options.Move)
    {

        var flag = true;
        for (var i=1; i<=4; i++)
        {
            var x = block[i].x;
            var y = block[i].y;

            if (OLSFK.Options.GampMap[x+'_'+y] == 1)
            {
                flag = false;
                break;
            }
        }
    }

    if (flag )
    {
        OLSFK.draw();

        //定时往下掉
        OLSFK.Options.Timer = setTimeout(function() {
            OLSFK.play();
        }, OLSFK.Options.Levels[OLSFK.Options.curLevel]);
    } else {
        OLSFK.Options.Move = false;
        OLSFK.Options.Start = false;
        OLSFK.Options.Eventing = false;
        OLSFK.Options.Deling = false;
        Lib.Getid('spn').innerHTML = 'Game Is Over';

        Lib.Getid('dobtn').innerHTML = ' 开始 ';
    }
}

当当前跌的方进入表格上发出给霸占的格子,即让死,游戏结束;

反倒的 则 setTimeout 开始新方块的骤降动作;

另措施求证

OLSFK.Event = function() {
    if (window.isIE)
        return window.event;
    func = OLSFK.Event.caller; 

    while(func!=null) 
    {
        var arg0=func.arguments[0]; 
        if(arg0) 
        {
            return arg0; 
        }
        func=func.caller; 
    }
    return null; 
}

OLSFK.KeyCode = function() {
    return OLSFK.Event().keyCode || OLSFK.Event().which;
}

OLSFK.Event = function();

立是均等栽获得当前风波之艺术,可以比配合获取当前之风波;

俄罗斯四方 JavaScript 代码

http://files.cnblogs.com/editor/OLSFK.rar