posts - 48,comments - 156,trackbacks - 0

本来想写几句的,但是看到前面一篇的反映不是很理想,所以也没动力了,原计划下面还想写个“贪吃蛇”的,看看再说吧,直接上源代码。

这一次在上一篇程序的基础上增加了以下功能:

1、键盘控制

2、开始、暂停

3、消除时候空行的停顿效果

4、随着消除行数的增多,速度加快

5、音效

等等。

代码里的注释已经很详细了,上一篇中模型的代码基本上没改动,只是增加了控制和图形的代码,自己感觉写的还是比较有条理的。

代码下载:点击

 

提示:本文中的俄罗斯方块游戏需要 Chrome 浏览器才能得到最好的运行效果,Firefox 浏览器也可以运行,但是没有声音效果。

 

{{{{{{

你的浏览器不支持 Canvas 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器

}}}}}}

 

后面罗嗦两句,愿意看的就看看。

这一部分代码主要由两个定时器组成。

 

第一个定时器每间隔一段时间就产生一个 TickMessage 消息,对这个消息的处理就是使方块下落,下落后每消去一次,触发的速度就更快一点。

 

第二个定时器是消息循环,他尽可能快的循环,所以时间间隔设置为0。

因为整个游戏的模型部分和控制部分会产生很多的事件,谁也不知道用户什么时候按下按键,所以这里维护了一个消息队列。

一旦有新的情况产生,就在消息队列里面添加上一条对应的消息,而消息循环不停的从里面取出消息,只要有就取出一条,并处理它。

 

图形部分,重点是要把七种颜色的小方块事先绘制好,并缓存起来,后面需要的时候直接使用。否则临时绘制的话,随着方块的增多,程序会出现卡死现象。

 

好了,就说这么多吧,有什么问题请留言。

 


//==========================================

posted on 2010-10-18 18:31 左洸 阅读(2988) 评论(9)  编辑  收藏 所属分类: HTML5

FeedBack:
# re: HTML5边玩边学(10):俄罗斯方块就是这么简单 之 控制界面篇(源码)
2010-10-18 18:55 | 左洸
如果 上下左右键 没有起作用,可能是页面没有完全装入,我的页面里广告比较多,所以有时候速度可能比较慢,呵呵,刷新一下就好了。  回复  更多评论
  
# re: HTML5边玩边学(10):俄罗斯方块就是这么简单 之 控制界面篇(源码)
2010-10-19 10:55 | kookoo
我用的chrome啊 一直是黑的
  回复  更多评论
  
# re: HTML5边玩边学(10):俄罗斯方块就是这么简单 之 控制界面篇(源码)
2010-10-19 21:32 | huliqing
呵呵,上一个我玩了一下,不过叠了两行之后浏览器死了。
这个在ff(FireFox3.6.10)下是没有反应呢。  回复  更多评论
  
# re: HTML5边玩边学(10):俄罗斯方块就是这么简单 之 控制界面篇(源码)
2010-10-20 15:30 | 楼主
@kookoo
点击开始按钮  回复  更多评论
  
# re: HTML5边玩边学(10):俄罗斯方块就是这么简单 之 控制界面篇(源码)
2010-10-20 15:31 | 楼主
@huliqing
如果上一个能玩,这一个肯定没问题,请确定页面全部装入后再开始  回复  更多评论
  
# re: HTML5边玩边学(10):俄罗斯方块就是这么简单 之 控制界面篇(源码)
2010-10-20 18:19 | huliqing
@楼主
我可没有骗你哦,我用FF的控制台查到了错误所在行, 截了张图。或许能帮你找到问题的原因。
http://www.blogjava.net/images/blogjava_net/huliqing/html5-js-error.jpg
另外我的环境(vista, FF版本是3.6.10)  回复  更多评论
  
# re: HTML5边玩边学(10):俄罗斯方块就是这么简单 之 控制界面篇(源码)
2010-10-20 20:31 | 楼主
@huliqing
发来你的图看看
  回复  更多评论
  
# re: HTML5边玩边学(10):俄罗斯方块就是这么简单 之 控制界面篇(源码)
2010-12-13 17:18 | 左洸
@huliqing

Display 是我自己定义的一个类,在另外一个 JS 文件中,你没有下载他,当然运行不起来。

绘制的代码其实只占很少的一部分,其中一些绘图函数我为了方便对 HTML5 的 2D 函数进行了简单的封装,您完全可以用原生的 HTML5 函数,或者用您自己平台的绘图函数,因为他们本身不是太复杂。  回复  更多评论
  
# re: HTML5边玩边学(10):俄罗斯方块就是这么简单 之 控制界面篇(源码)
2011-04-05 22:26 | chatwin
大师你好!请问如果我想方块用图形画出,而不是单色图块,应该怎样修改?我试了drawImage,程序没响应。
谢谢!  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: