当前位置 & &
& 风靡全球的《俄罗斯方块》是怎么设计出来的...
风靡全球的《俄罗斯方块》是怎么设计出来的？
14:14:30&&出处：&&
编辑：鲲鹏 &&)
让小伙伴们也看看：
阅读更多：
好文共享：
文章观点支持
当前平均分：0(0 次打分)
[06-05][05-29][05-28][04-26][04-17][03-25][03-11][02-23][02-19][01-19]
登录驱动之家
没有帐号？
用合作网站帐户直接登录前面的，口水话 请直接跳过。
虽然现在不比以前了 也没多少人气了，放到首页 都不到几百的点击量。也许博客园整体水平也是在往水的方向发展。不谈那些了，哥也曾经辉煌过 有过一天上千的点击量 ，哥也曾经有过粉丝，被小妹称为大神去指点问题，虽然这大神水分有点重。
人都是有虚荣心的 正是因为这样激励着我持续学习技术，去探索。 才有我持续发表技术博文的动力。我写的都是自己真切实意的关于技术的心得经验 并不是纯控件 使用demo 或者商业数据库项目那种码农式的代码。有那么一丁点算法或者技术上的技巧 属于我自己的偏好&但是大多数智商水平也就小学 ，就图像处理那几篇 用到的算法原理也就超过初中智商水平一点点。
从四年前进歪医用胶片公司发俄罗斯方块的博文开始就一直持续不断的激励着我，然后一有东西我都记录下来。不说了 要点击量就去写小说了 还有钱。
正文，到博客园从写c#俄罗斯方块开始 ,可能有的朋友已经把它忘了。那么我们又来写俄罗斯方块 只不过这次是android版的 。也许是结束 ，也许是新的开始呢。
主代码在原来c#基础上改的 基本上没怎么动，如果你见过原来的版本 一看就明白 还是那几个类。对于android平台的开发自己看书 本身没几天 勿喷。
游戏主要逻辑类三个 game gamearea shape，这里多了个point& 因为c#里有用于定位的值类型Point ，java里没有 那么我们就为他手动定义一个 免得改动其他逻辑代码&。
先说game类 ，new game() 既代表初始化了一个游戏，以前c#版本 游戏数据直接在form里通过gdi重绘 ，游戏数据展现给使用者 这是最基本的。所以我让game类变成自定义控件 继承自view 一来我可以通过这种方式把它放到主界面 二来游戏数据发生改变需要重绘的时候 可以通过自带的函数重绘。
&其他的基础代码方面 c#跟java稍微有差别比如
定义二维数组
1 bool[,] gameAreaA
1 boolean [][] gameAreaA
还有java里的switch 好像只能判断数字，害的我把switch代码都改成了if else if 幸好不多。
android里添加事件 是setonClickListener 然后把一堆东西都写在那个函数里面，这个我也暂时还没习惯 熟悉了就好了。
android下的界面及控件都是以xml树状结构配置，并且跟代码对应 所有控件都继承自view。就单从这一设计理念上来说他跟wpf是一样的，左边xml界面 右边代码界面。用这种理念去看 winform或者mfc界面，winform 或者mfc界面 那种方式就像山顶洞人。wpf也不像winform那样一定双击通过硬编码去添加按钮事件，个人觉得通过硬编码添加按钮处理 弊端多。winform搞个什么漂亮点的界面得onPaint 搞个什么漂亮点的界面得onPaint 还不能随心所欲的设计界面。 说明时代是发展的社会是进步的 新东西不得不学啊。
android下木有messagebox.show() 让我这种这种大老土 情何以堪啊。最常用的是toast。
方块不断的下落 原来在winform 用timeer控件，在android平台 暂时我没有找到timer控件 所有我就用了多线程。也是在网上大概瞄了下java的多线程处理方式 然后根据自己的要求抄了段代码了事。
ttt = new Thread(new Runnable() {
public void run() {
while (true) {
if (gg.isOver()) {
// 对游戏逻辑 进行&下移& 操作（具体的下移到什么地方 比如到底了又如何
// 这些逻辑统统是在game类里面进行判断 操作）
mekSound(gg.go());
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
ttt.start();
但是有一个小问题，认真看过代码都知道 这个俄罗斯方块游戏 背后的数据模型就是一个二维数组 ，这里新开一个线程对数据执行&下落&的操作。而界面主线程的按钮同时也要对同一数据进行左右移动 或者变形操作，我代码逻辑里控制了 游戏本身不会报错 但是会出现一些很神奇的事情 比如方块掉到坑里了之类的。都说的很明白了 需要进行所谓的线程间数据同步 这个请亲们自己去修复。
&关于音频处理，得分或者什么的时候总得给点叮当声 什么的吧 否则死气沉沉的，特别是现在这种眼球经济的时代 没卖相更加死得快。
音频处理我是用的网上推荐的自带的Mediaplayer 对于我来说足够。对于不同的类型 比如得分 什么的 我给不同的音效，唯一注意的地方就是 ，在播放前就给回掉函数 播放完成后对资源进行回收 ，要不然搞几下你的程序就搞不起了& 我试过。音频处理：
1 public void mekSound(int type) {
switch (type) {
m_sound = MediaPlayer.create(this, R.raw.money);
m_sound.start();
m_sound.setOnCompletionListener(new OnCompletionListener() {
public void onCompletion(MediaPlayer arg0) {
// TODO Auto-generated method stub
m_sound.release();
要记住始终以用户为前提，得分时的金币的声音可以让脑残的用户觉得愉悦。
关于另外一个小东西，通常情况下android 程序按一下返回键 不是都会提示 &再次按返回退出程序&么。这个其实也很简单，按第一下记录时间 按第二下再次记录时间 如果时间差低于两秒 就退出 ，否则给toast提示&再次按返回键退出&:
1 private boolean m_flagExit = false;
Date backTime = new Date("");
public boolean onKeyDown(int keyCode, KeyEvent event) {
// TODO Auto-generated method stub
if (keyCode == KeyEvent.KEYCODE_BACK) {
Date nowTime = new Date();
if (backTime.getYear() == nowTime.getYear()
&& backTime.getMonth() == nowTime.getMonth()
&& backTime.getDate() == nowTime.getDate()
&& backTime.getHours() == nowTime.getHours()
&& backTime.getMinutes() == nowTime.getMinutes()
&& nowTime.getSeconds() - backTime.getSeconds() &= 2
return super.onKeyDown(keyCode, event);
backTime = nowT
Toast.makeText(this, "再次按返回键退出游戏", 500).show();
return false;
return false;
程序设计上只要你用心去想这个事情的来龙去脉 那么你就能够把它做成功。
另外我还自己用photoshop画了几个图标 虽然有点丑
下面是完整项目代码:
这里是可以直接安装的app:
谁说做c#开发的就不能做java开发了 。java就是个蛋 只不过另外一套开发平台 熟悉而已 ，说到底不过是工具。
手机上也可以用socket 也可以进行io 各种文件流网络流操作& 也可以想怎么绘图怎么绘图 ，并且开发接口也很方便 。这他娘的就是电脑嘛& 当还沉浸在老一代PC程序员时代的时候 所谓的移动互联网时代已经到了我们身边& 老了 没跟上时代的脚步 不服不行啊。
现在离开歪医用胶片的公司了 ，算是告别吧。可能以后发的东西质量 渐差， 或者发的比较少。各位兄台见谅
阅读(...) 评论()扫二维码下载作业帮
1.75亿学生的选择
下载作业帮安装包
扫二维码下载作业帮
1.75亿学生的选择
为什么俄罗斯方块要叫俄罗斯方块
扫二维码下载作业帮
1.75亿学生的选择
这个游戏看似简单却变化无穷,令人上瘾,尤其是在那个游戏资源严重缺乏的年代.只是,玩了这么久的游戏,还真不知道这个游戏竟隐喻了如此的深意!当然,作者的理解难免牵强和偏颇,但不失为独到了.\x0d《俄罗斯方块》其实反映了作者的一种反社会叛逆倾向.任何事物的完美——人类一直在追求的终极目标,在俄罗斯方块中则以无缝无隙的紧密团结来隐喻这种完美（我们也可以认为作者所力求表现出的这种团结是反映人类社会）.\x0d“四百亿人应该有相同的理念,相同的审美观,相同的正义与邪恶.”如果没有记错的话,这是《银河英雄传说》中某位政客的言论（大意如此,记不清了）.对于他们这些人而言,这样是绝对有利于他们的统治的.而在现实生活中,从小便以国家教育机器对孩子们进行精神控制的国家也并不在少数,我们日常所说的“小P孩”,其实有很大一部分正是这种教育体制的牺牲品.不过更让人吃惊的是,还有一批人竟疯狂地支持人类的“精神大同”,他们认为这样才能使这个地球——整个人类社会尽快统一,并得以飞速发展.而在《俄罗斯方块》中,作者以他的代码告诉了我们这种思想的唯一结局——没错,毁灭,只有毁灭.\x0d文学、音乐、科技、战争……这所有的一切都是来源于人类精神上、思想上的分歧与差异,而这正是推动人类发展的原动力,“天下大同”也许会带给我们和平与安宁,但那却是一种令人窒息得发狂的和平与安宁.\x0d《俄罗斯方块》之父阿列克谢·帕基特诺夫\x0d让我们看一下《俄罗斯方块》之父阿列克谢·帕基特诺夫这个人吧.虽然没有什么证据,但我们有理由推测他正是以这个作品来反映自己对那个“绝对精神控制”的斯大林时代的愤怒.虽然《俄罗斯方块》的前身TETRIS问世乃是在1987年,早已远离了那个恐怖的年代,但或者正是父辈的遭遇,才使得阿列克谢下定决心用这部作品来隐喻自己的思想及对那个时代的愤怒.可笑的是,愚蠢的克格勃（国家安全委员会,苏联间谍情报机关,U吧注）并未看出《俄罗斯方块》中的反抗思想,并有众多人为此游戏而疯狂痴迷着,不知对于阿列克谢来说,这是一种幸运抑或是悲哀呢?\x0d方块、长条、扭曲积木……这些不断落下的物体不断地构成团结体,然后在不断地毁灭消无,构成了一种近乎永恒的循环,阿列克谢以这一看似平凡单调的过程默默地表现着人类的发展史,也就是“存在—错误—毁灭—存在”的过程,如果你一直让这种团结存在又消失的话,那就构成了一个在狭小空间内的永远无法断裂的圆环,这正是人类永远的悲哀.\x0d当我看到几岁的小孩和七八十岁的老人捧着手掌机为那一行一行的消失而欢欣雀跃时,心中却会涌现出一股难以名状的悲哀……\x0d人类永恒的悲哀……
为您推荐：
其他类似问题
扫描下载二维码html5学习（8）
特别提示：
本文中的运行效果需要&Chrome&浏览器或者&Firefox&浏览器。
一、从数据出发还是从界面出发
要写一个俄罗斯方块小游戏，我们先来一块考虑一下下面几个问题：
1、用什么表示方块
2、怎么设置或者改变方块的颜色
3、怎么移动方块
4、怎么消除方块
请考虑一分钟后再继续向下看。。。。。。
如果你对上面几个问题思考，每一个答案都和界面、控件、平台有关的话，就是说假如你是用 .Net 的，你的每一个答案都是围绕着如何利用控件、如何使用窗体、在控件的哪个事件里面改变哪个属性等等，那么说明你被微软的 RAD 开发环境毒害的不浅，我建议你立刻扔掉 Visual Studio，改用其他轻量级的编程语言和开发平台，这样你可以更多的关注问题的本身，而不是控件。
记住：程序 = 数据结构 + 算法
界面只是数据的表象，而数据才是问题的本质。
下面，我们将一步一步建立一个俄罗斯方块小游戏的数据模型，当整个模型建立完毕后，我们会发现，虽然没有界面，仍然不妨碍这是一个功能完整的俄罗斯方块游戏，因为发生的每一件事情都很清楚，我们只是没把它画而已。当然，后面我们会给出一个操作简易的界面，等到下一篇，会专门探讨界面的问题。
二、“形状”的数据模型
俄罗斯方块是一个经久不衰的小游戏，最常见的版本中一般有七个形状，分别是：
直线型、S型、Z型、L型、反L型、T型、方形等，如下图：
那么我们在程序中如何表示这七个形状呢？我们发现每一形状都是四个小方块组成的，我们完全可以用四个点表示。
但是问题又来了，四个点的坐标分别是什么呢？我查到的方法是：每个形状都有一个自己的坐标系，比如S型，可以入下图表示：
这样，S型的数据模型可以表示为四个点组成的数组：[ [ 0, -1 ],& [ 0, 0 ],&& [ -1, 0 ],& [ -1, 1 ] ] 。
我们可以用同样的方法建立其他形状的数组模型，然后再将这七个形状的数组模型合起来组成一个大的数组。
另外，每个形状可以是单色，也可以有自己的颜色。增加颜色会增加编程的复杂度，但是也增加不了多少，所以我们的模型中也会考虑颜色。
最后，我们最好给每个形状一个编号，这样方便在形状数组和颜色数组中应用他们。
完成上面的分析后，我们就可以给出形状数据模型的代码了：
形状模型的代码
//各种形状的编号，0代表没有形状
NoShape=<span style="color:#;
ZShape=<span style="color:#;
SShape=<span style="color:#;
LineShape=<span style="color:#;
TShape=<span style="color:#;
SquareShape=<span style="color:#;
LShape=<span style="color:#;
MirroredLShape=<span style="color:#
//各种形状的颜色
Colors=[&black&,&fuchsia&,&#cff&,&red&,&orange&,&aqua&,&green&,&yellow&];
//各种形状的数据描述
&&&&[&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&]&],
&&&&[&[&<span style="color:#,&-<span style="color:#&],&&[&<span style="color:#,&<span style="color:#&],&&&[&-<span style="color:#,&<span style="color:#&],&&[&-<span style="color:#,&<span style="color:#&]&],
&&&&[&[&<span style="color:#,&-<span style="color:#&],&&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&]&],
&&&&[&[&<span style="color:#,&-<span style="color:#&],&&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&]&],
&&&&[&[&-<span style="color:#,&<span style="color:#&],&&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&]&],
&&&&[&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&]&],
&&&&[&[&-<span style="color:#,&-<span style="color:#&],&[&<span style="color:#,&-<span style="color:#&],&&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&]&],
&&&&[&[&<span style="color:#,&-<span style="color:#&],&&[&<span style="color:#,&-<span style="color:#&],&&[&<span style="color:#,&<span style="color:#&],&&&[&<span style="color:#,&<span style="color:#&]&]
三、定位和旋转形状
我们上面说到每个形状都是在自己的坐标系里面描述的，另外还有一个全局坐标系，用来给形状定位，这样我们就需要一个方法将形状的四个点从自身坐标系转换到全局坐标系，从而给形状定位。
假如S型在自身坐标系中四个点的坐标为：[ [ 0, -1 ],& [ 0, 0 ],&& [ -1, 0 ],& [ -1, 1 ] ]
它当前在全局坐标系位置为：[12,8]
则，四个点转换为全局坐标系的坐标为：[ [ 0&#43;12, -1&#43;8 ],& [ 0&#43;12, 0&#43;8 ],&& [ -1&#43;12, 0&#43;8 ],& [ -1&#43;12, 1&#43;8 ] ]
这样，我们就完成了 S型 的全局坐标转换。
这里需要注意一个问题，形状自身坐标系是用 (x,y) 描述的，而全局坐标系为了逻辑上更直观，是用 (row,col) 描述的，所以我们在实际编程中并不是向上面那样转换的，而是：
[ [ -1&#43;12,&0&#43;8 ],& [ 0&#43;12, 0&#43;8 ],&& [ 0&#43;12,&-1&#43;8 ],& [ 1&#43;12, -1&#43;8 ] ]
即：先将 x 变为 col ，y 变为 row ，再转换为全局坐标系。
旋转是在形状的自身坐标系中，并围绕形状的原点完成的，公式很简单，每个点旋转后的坐标与旋转前坐标的关系如下（向右旋转）：
注意：方块形状不发生旋转。
有了上面的分析，我们就可以给出两个全局方法，他们用来对形状进行全局定位和旋转：
全局定位和旋转的代码
//将形状自身的坐标系转换为&&Map&的坐标系，row&col&为当前形状原点在&Map&中的位置
function&translate(data,row,col){
&&&&var&copy=[];
&&&&for(var&i=<span style="color:#;i&<span style="color:#;i&#43;&#43;){
&&&&&&&&var&temp={};
&&&&&&&&temp.row=data[i][<span style="color:#]&#43;
&&&&&&&&temp.col=data[i][<span style="color:#]&#43;
&&&&&&&&copy.push(temp);
&&&&return&
//向右旋转一个形状：x'=y,&y'=-x
function&rotate(data){
&&&&var&copy=[[],[],[],[]];
&&&&for(var&i=<span style="color:#;i&<span style="color:#;i&#43;&#43;){
&&&&&&&&copy[i][<span style="color:#]=data[i][<span style="color:#];
&&&&&&&&copy[i][<span style="color:#]=-data[i][<span style="color:#];
&&&&return&
四、移动空间
前面我们说过，形状是由四个点组成的，而形状的移动空间也是由 m * n 个点组成的一个二维数组。
这里为了更直观的描述，我将 n 个点组成一条线 Line，再将 m 条 Line 组成形状的移动空间，我把它叫做 Map 。
我们有了这&m * n 个点有什么用呢？用处很简单，就是保存形状的编号，如果一个点没有被形状占用，则编号为 NoShape。这就是前面给出形状编号的用处，同时也是为什么要有一个 NoShape 编号的原因。
Map 应该具有什么功能呢？下面我列举了一些：
1、构造函数：这不用说了，n 个点组成一行 Line， m&行 Line 组成Map，每个点初始化成 NoShape
2、newLine：生成新的一行。为什么需要这个方法呢，因为除了构造函数中，游戏运行过程中我们也需要用到它，当一行或者几行被消除以后，我们需要在顶部假如一行或者几行新的Line
3、isFullLine(row)：这个方法用来判断第 row 行是否满了，每次一个形状落地后，就需要对每一行进行这个判断，满了当然是消除了。
4、isCollide(data): data 是一个定位后的形状数据，这样我们就可以检查这些数据是否超出移动空间的上下左右边界，另外还检查数据的四个点是否已经被占用，这就是碰撞检测。
5、appendShape(shape_id,data)：当一个形状落地以后，我们就应该将运行空间中某些点的&#20540;改变为这个形状的编号，我把这称为占用。
6、消除操作：这个功能没有单独列为一个方法，我把它放在 appendShape 方法中了。消除操作也很简单，发现某一行 isFullLine 了以后，在 lines 数组中移除这一行，并在 lines 数组的顶部加入一个空行即可。
有了上面的分析，我们就可以给出移动空间的代码了：
移动空间的代码
&*&说明：由&m&行&Line&组成的&#26684;子阵
function&&Map(w,h){
&&&&//游戏区域的长度和宽度
&&&&this.width=w;
&&&&this.height=h;
&&&&//生成&height&个&line&对象，每个&line&宽度为&width
&&&&this.lines=[];
&&&&for(var&row=<span style="color:#;row&h;row&#43;&#43;)
&&&&&&&&this.lines[row]=this.newLine();
//说明：间由&n&个&#26684;子组成的一行
Map.prototype.newLine=function(){
&&&&var&shapes=[];
&&&&for(var&col=<span style="color:#;col&this.col&#43;&#43;)
&&&&&&&&shapes[col]=NoS
&&&&return&
//判断一行是否全部被占用
//如果有一个&#26684;子为&NoShape&则返回&false
Map.prototype.isFullLine=function(row){
&&&&var&line=this.lines[row];
&&&&for(var&col=<span style="color:#;col&this.col&#43;&#43;)
&&&&&&&&if(line[col]==NoShape)
&&&&&&&&&&&&return&false
&&&&return&true;
&*&预先移动或者旋转形状，然后分析形状中的四个点是否有碰撞情况：
&*&&&&&&1：col&0&||&col&this.width&超出左右边界
&*&&&&&&2：row==this.height&，说明形状已经到最底部
&*&&&&&&3：任意一点的&shape_id&不为&NoShape&，则发生碰撞
&*&&如果发生碰撞则放弃移动或者旋转
Map.prototype.isCollide=function(data){
&&&&for(var&i=<span style="color:#;i&<span style="color:#;i&#43;&#43;){
&&&&&&&&var&row=data[i].
&&&&&&&&var&col=data[i].
&&&&&&&&if(col&<span style="color:#&||&col==this.width)&return&true;
&&&&&&&&if(row==this.height)&return&true;
&&&&&&&&if(row&<span style="color:#)&continue;
&&&&&&&&else
&&&&&&&&&&&&if(this.lines[row][col]!=NoShape)
&&&&&&&&&&&&&&&&return&true;
&&&&return&false;
//形状在向下移动过程中发生碰撞，则将形状加入到&Map&中
Map.prototype.appendShape=function(shape_id,data){
&&&&//对于形状的四个点：
&&&&for(var&i=<span style="color:#;i&<span style="color:#;i&#43;&#43;){
&&&&&&&&var&row=data[i].
&&&&&&&&var&col=data[i].
&&&&&&&&//找到所在的&#26684;子,将&#26684;子的颜色改为形状的颜色
&&&&&&&&this.lines[row][col]=shape_
&&&&//========================================
&&&&//形状被加入到&Map&中后，要进行逐行检测，发现满行则消除
&&&&for(var&row=<span style="color:#;row&this.row&#43;&#43;){
&&&&&&&&if(this.isFullLine(row)){
&&&&&&&&&&&&//将满的那一行替换成新的空，这一步主要是为了显示效果，可以不要！
&&&&&&&&&&&&//this.lines[row]=
&&&&&&&&&&&&//重绘&Map&消除效果
&&&&&&&&&&&&//onClearLine(row);
&&&&&&&&&&&&//将满行删除
&&&&&&&&&&&&this.lines.splice(row,<span style="color:#);
&&&&&&&&&&&&//第一行添加新的一行
&&&&&&&&&&&&this.lines.unshift(this.newLine());
&&&&&&&&&&&&//重绘&Map&整行下落效果
&&&&&&&&&&&&onDraw(this.lines);
五、游戏模型
我们有了游戏的数据模型，我们就可以读写他们了。所谓读好理解，所谓写就是改变他们，改变的方法当然是用户的操作了。
下面给出 GameModel 类，他维护三个主要的数据：
1、一个形状的编号，就是用户可以操作移动的那个形状
2、形状的全局位置，用 row col 表示
3、一个 Map，用它完成碰撞检测，添加等操作
另外，还抽象出几个用户的操作动作：
1、left：左移。将形状的全局坐标 col& 减少 1 。请思考一下，这样就可以了吗？当然不行，我们还需要进行碰撞检测，如果已经在最左边，则放弃处理。
2、right：右移。同上。
3、rotate：旋转。同上。
4、down：下落。同上。下落过程中的碰撞检测有所不同，一旦发生碰撞，我们不能再放弃处理了，而是要将当前形状加入到空间中。
5、GameOver：下落过程中还需要进行一个检测就是游戏是否结束。如果当前形状在出生地点刚一下落就发生碰撞，说明已经到顶部了，则游戏结束。
有了上面的分析，我们就可以给出 GameModel 的代码：
GameModel 代码
&*&说明：GameModel&类
function&GameModel(w,h){
&&&&this.map=new&Map(w,h);
&&&&this.born();
//出生一个新的形状
GameModel.prototype.born=function(){
&&&&//随机选择一个形状
&&&&this.shape_id=Math.floor(Math.random()*<span style="color:#)&#43;<span style="color:#;
&&&&this.data=Shapes[this.shape_id];
&&&&//重置形状的位置为出生地点
&&&&this.row=<span style="color:#;
&&&&this.col=Math.floor(this.map.width/<span style="color:#);
&&&&//通知绘制移动效果，传回数据为形状的四个点在&Map&中的位置
&&&&onMove(this.shape_id,this.map,translate(this.data,this.row,this.col));
//向左移动
GameModel.prototype.left=function(){
&&&&this.col--;
&&&&var&temp=translate(this.data,this.row,this.col);
&&&&if(this.map.isCollide(temp))
&&&&//发生碰撞则放弃移动
&&&&&&&&this.col&#43;&#43;;
&&&&//通知绘制移动效果，传回数据为形状的四个点在&Map&中的位置
&&&&&&&&onMove(this.shape_id,this.map,temp);
//向右移动
GameModel.prototype.right=function(){
&&&&this.col&#43;&#43;;
&&&&var&temp=translate(this.data,this.row,this.col);
&&&&if(this.map.isCollide(temp))
&&&&&&&&this.col--;
&&&&&&&&onMove(this.shape_id,this.map,temp);
GameModel.prototype.rotate=function(){
&&&&//正方形不旋转
&&&&if(this.shape_id==SquareShape)&return;
&&&&//获得旋转后的数据
&&&&var&copy=rotate(this.data);
&&&&//转换坐标系
&&&&var&temp=translate(copy,this.row,this.col);
&&&&//发生碰撞则放弃旋转
&&&&if(this.map.isCollide(temp))
&&&&&&&&return;
&&&&//将旋转后的数据设为当前数据
&&&&this.data=
&&&&//通知绘制移动效果，传回数据为形状的四个点在&Map&中的位置
&&&&onMove(this.shape_id,this.map,translate(this.data,this.row,this.col));
GameModel.prototype.down=function(){
&&&&var&old=translate(this.data,this.row,this.col);
&&&&this.row&#43;&#43;;
&&&&var&temp=translate(this.data,this.row,this.col);
&&&&if(this.map.isCollide(temp)){
&&&&&&&&//发生碰撞则放弃下落
&&&&&&&&this.row--;
&&&&&&&&//如果在&1&也无法下落，说明游戏结束
&&&&&&&&if(this.row==<span style="color:#)&{
&&&&&&&&&&&&//通知游戏结束
&&&&&&&&&&&&//onGameOver();
&&&&&&&&&&&&alert(&Game&Over&)
&&&&&&&&&&&&return;
&&&&&&&&//无法下落则将当前形状加入到&Map&中
&&&&&&&&this.map.appendShape(this.shape_id,old);
&&&&&&&&//出生一个新的形状
&&&&&&&&this.born();
&&&&//通知绘制移动效果，传回数据为形状的四个点在&Map&中的位置
&&&&&&&&onMove(this.shape_id,this.map,temp);
六、一个简单的操作界面
虽然到现在为止，我们没有给出一行和界面有关的代码，但是整个游戏在逻辑上已经完全可以运行起来了，只是我们没有把他画出来而已，要想把他画出来也很简单。
注意上面给出的代码中很多地方调用了两个全局函数：onDraw 和 onMove ，这两个函数就是用来进行绘制的。
绘制的代码其实只占很少的一部分，其中一些绘图函数我为了方便对 HTML5 的 2D 函数进行了简单的封装，您完全可以用原生的 HTML5 函数，或者用您自己平台的绘图函数，因为他们本身不是太复杂。
另外有一个全局变量 Spacing ，他表示一个&#26684;子的宽度。
下面给出操作界面的代码：
界面操作代码
//每一&#26684;的间距，也即一个小方块的尺寸
Spacing=<span style="color:#;
//在内存中绘制一个小方块
function&drawRect(color){
&&&&var&temp=new&Surface(Spacing,Spacing,&rgba(255,255,255,0.2)&);//背景色
&&&&temp.fillRect(<span style="color:#,&<span style="color:#,&Spacing-<span style="color:#,&Spacing-<span style="color:#,&color);//前景色
&&&&return&
var&display=&Display.attach(document.getElementById(&html5_09_1&));
var&model&=&new&GameModel(display.width/Spacing,display.height/Spacing);
function&onDraw(map){
&&&&//清屏
&&&&display.clear();
&&&&var&lines=map.
&&&&//依次绘制每一个非空的&#26684;子
&&&&for(var&row=<span style="color:#;row&map.row&#43;&#43;)
&&&&&&&&for(var&col=<span style="color:#;col&map.col&#43;&#43;){
&&&&&&&&&&&&var&shape_id=lines[row][col];
&&&&&&&&&&&&if(shape_id!=NoShape){
&&&&&&&&&&&&&&&&var&rect&=&drawRect(Colors[shape_id]);
&&&&&&&&&&&&&&&&var&y=row&*&S
&&&&&&&&&&&&&&&&var&x=col&*&S
&&&&&&&&&&&&&&&&display.draw(rect,&x,&y);
&&&&&&&&&&&&}
function&onMove(shape_id,map,data){
&&&&onDraw(map);
&&&&//绘制当前的形状
&&&&for(var&i=<span style="color:#;i&<span style="color:#;i&#43;&#43;){
&&&&&&&&var&y=data[i].row&*&S
&&&&&&&&var&x=data[i].col&*&S
&&&&&&&&var&rect&=&drawRect(Colors[shape_id]);
&&&&&&&&display.draw(rect,&x,&y);
function&down(){
&&&&model.down();
function&left(){
&&&&model.left();
function&right(){
&&&&model.right();
function&rotate_click(){
&&&&model.rotate();
HTML 代码很简单，也给出来吧，就一块画布和四个按钮，如下：
&canvas&id=&html5_09_1&&width=&260&&height=&400&&style=&&background-color:&black&&&
&&&&你的浏览器不支持&Canvas&标签，请使用&Chrome&浏览器&或者&FireFox&浏览器
&/canvas&&p/&
&input&type=&button&&value=&向下&&onclick=&down()&/&
&input&type=&button&&value=&向左&&onclick=&left()&/&
&input&type=&button&&value=&向右&&onclick=&right()&/&
&input&type=&button&&value=&旋转&&onclick=&rotate_click()&/&
七、运行效果
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：39393次
排名：千里之外
转载：182篇
(30)(5)(28)(121)}