JavaScript jQuery实现Tetris(俄罗斯方块)游戏代码

标签: jQuery jQuery俄罗斯方块 jQuery网页游戏 jquery游戏代码
1418人阅读 评论(0) 收藏 举报
分类:

原文:JavaScript jQuery实现Tetris(俄罗斯方块)游戏代码

游戏在线试玩地址

其实很早就有这样的想法,无奈思想一直不是很成熟,各个细节没有想好。突然某一天灵光闪现,就想到办法了。相信应该也有很多人有过这样的想法,可是总是会被一些细节问题所卡住。只要思路有了,代码的实现上并不难。所以我重点说一下思路。

先说一下这样程序的功能吧。图里面能够看得很清楚了。基本的功能就不说了,其它的包括下一个下落形状的预览(左上角的小方块中),隐藏、显示网格线,隐藏、显示下落时对好的阴影形状。其它的就是俄罗斯方块的基本功能了。

很重要的一点,很多人可能受到了思维定势的影响,觉得既然是俄罗斯方块,那当然是一个个方块往下落。如果你这样想,我敢说这样就算程序的功能都可以完成,也绝对在1000行以上(我的程序不超过1000行,包括各个函数的注释),甚至要远远超过这个数。如果跳出了这个方块下落和思维定势,那问题就好解决了。

有人可能要问了,既然方块不动,那是什么在动呢?有人说颜色,但更确切地说是样式!每一次,让下一个方格的样式用上一个方块来替代,这样下落就成了对样式的操作了!虽然下落是位置在变,位置(top,left)也是样式,但是这可能要涉及到HTML,或者DOM元素的操作了。相比而言,前一种思路不用动任何的HTML元素!这是简化的最关键所在了。

再说一下其它方面。

方块的排列:

用一个float:left就能排列好了,需要注意的是,在设置容器的长宽时,要注意小方块的方框宽度,这个也要计算在内。

按键的处理:

我们知道,像DIV,SPAN(容器用的DIV,方块用的SPAN)无法直接响应按键按下的事件(onkeydown),那我们只好先用可以响应的元素来接收这个事件,我用的是document,由于我把它写在了类的内部,所以,要把事件内容的this变成实际要处理的元素(Tetris),就需要用到javascript的call函数了。

形状在移动(左、右、下、旋转)的时候出界或者是否压住了其他方块的判断:

有两种方式,第一种是先计算好方块可以移动的最小距离,然后再判断方块是否移动超过了这个最小距离。(注意我这里说的移动都是对样式的操作)。这种方式比较麻烦,因为首先要得到方块的最左,最右和最下的方块,然后再通过这些方块来计算这个最小距离,并且旋转就无法用距离来衡量了。但是如果要得到阴影(后面解释阴影的实现)的话,还是得计算这个最小距离。我的做法是移动一步(包括旋转)采取第二种方法,而直接下落和生成阴影而采用第一种方法。

第二种方式是先将坐标值预存起来,然后假设方块移动了,再判断这个方块是否在界内,并没在压住其它的方块。如果不符合条件,再将坐标值还原回去。这里插一句,如果预存坐标?我的坐标采用的是数组的形式储存的,不能直接用=来赋值,这个只能将变量指向右值而成为右值的引用。要复制数组或对象,必须采用循环或者遍历对象属性,且元素或属性的值为基本类型时才能赋值。

下一个形状预览的问题:

想清楚了最关键的问题,这个问题很好解决,这个就是大容器的缩小版,当前显示形状的时候同时计算下一个形状的序列号,并存储。下次显示形状的时候调用这个序列号就行了。

最后说一下旋转的问题:

其实这是一个数学问题。

由于旋转前后,向量的长度(设为R)不变,所以:

cosA = x0/R,  sinA = y0/R     ……   (2)

对于右图:

x1 = R * cos(A+B)=R(cosAcosB – sinAsinB)

y1 = R|* sin(A+B)=R(sinAcosB + cosAsinB)

将(2)代入得到:

x1 = x0 * cosB – y0 * sinB

y1 = x0 * sinB + y0 * cosB

由于我设定的是逆时针旋转,所以再将B=-B代入上式:

x1 = x0 * cosB + y0 * sinB

y1 = -x0 * sinB + y0 * cosB

再者,我们旋转的角度为90度,再代入,得到:

x1=y0, y1=-x0   …………. (3)

这是以原点为出发的向量,如果不是原点为出发点,假设这个点(旋转中心)为(cx,cy),将向量进行平移:

x1-cx = y0-cy, y1-cy = cx-x0,于是(3)变成:

x1 = cx-cy+y0, y1 = cx+cy-x0  (4)

这里值得提一下的是,尽管我们的坐标系和正规的xy平面坐标系不同,我们的原点在左上角,x(二维数组第一下标)轴垂直向下,y(二维数组第二下标)轴水平向右,但是由于我们旋转的时候选取的是向量,它的方向是确定的,不随坐标系的变化而变化,所以(4)仍然适用于我们的坐标系。

有了公式(4),选取适当的旋转中心(x0,y0)就可以进行转换了。为了效率,我们可以把由四个小方块组成的大方块排除在外,不用旋转。

原文:http://pwwang.com/2009/10/25/tetris-in-jquery-javascript/

源代码下载

查看评论

联机俄罗斯方块游戏开发实战(C#)

本课程手把手的教你从零开始实现一款支持联机对战的俄罗斯方块游戏,强化大家关于面向对象的编程思想,突出设计模式在软件开发中的意义,强调重构对于编写高质量代码的极端重要性,明确编码规范的重要性,打磨软件架构的可维护性、可扩展性。
  • 2016年09月28日 23:18

JS/Jquery版本的俄罗斯方块(Tetris)

1.前言 写这个Jquery版本的小游戏的缘由在于我想通过从零到有,自己写一个Jquery版本的游戏用来练手。 经历了V1,V2版本,当前版本是V3。 游戏功能:关卡,分数,暂停,虚拟键,状态栏,自定...
  • unionline
  • unionline
  • 2017-03-18 09:33:17
  • 568

【jquery】jquery写<俄罗斯方块>

闲来无事,蛋疼了一下,于是..... 纯属娱乐,没啥技术含量   var tab=null; var score=0;//得分 var speds=1000;//下落速度 $(functio...
  • zzvnzz
  • zzvnzz
  • 2012-06-20 12:14:09
  • 2968

俄罗斯方块(控制台版)

前言 听了老师的思路,自己实现了一个. 没有参考任何工程,  分层不是很明显. 本来应该分成4个层 : UI + 逻辑 + 算法 + 基础函数集. 中间调试花了很长时间,将自己玩的不轻. 现在大概分为...
  • LostSpeed
  • LostSpeed
  • 2015-11-01 10:46:23
  • 1212

纯js实现俄罗斯方块详解与源码

对于小白来说用js实现俄罗斯方块还是有难度的,网上找了很多代码看,有的很长难懂,有的短小精悍,但不只用到了js还用到了框架,对于还未接触框架的小白宝宝,也只能无奈自己是小白了,自己写不出来那就找一篇纯...
  • d1105260363
  • d1105260363
  • 2017-08-23 17:54:45
  • 916

[前端 3]纯Js制作俄罗斯方块游戏

导读:在别人文章里看到了,然后写了一遍。结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法。忘了在 哪一篇上面看的了,就贴不出来链接地址。原谅。呃,真没自己的东西,权当练打字了吧。其实,...
  • u013034889
  • u013034889
  • 2016-04-10 00:08:30
  • 2242

JavaScript canvas实现俄罗斯方块

JavaScript canvas实现俄罗斯方块。简洁逻辑清晰的代码,代码量少。要记录这些模型有很多种办法,可以用记录其相对位置,记录每一个方块的x,y坐标等。自己想了一种思路来记录这7种模型,很简洁...
  • cc_fys
  • cc_fys
  • 2017-09-12 10:20:33
  • 735

【JavaScript】(二)俄罗斯方块

最近研究了一个“俄罗斯方块”的写法,设计的很巧妙,代码展示如下: 我的小方块! ...
  • u013047584
  • u013047584
  • 2018-02-02 21:53:06
  • 176

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码,代码下载地址:http://www.zuidaima.com/share/1759652641295360.htm...
  • yaerfeng
  • yaerfeng
  • 2014-04-28 09:52:37
  • 52914

JavaScript jQuery实现Tetris(俄罗斯方块)游戏代码

原文:JavaScript jQuery实现Tetris(俄罗斯方块)游戏代码 源代码下载地址:http://www.zuidaima.com/share/1882054152457216....
  • yaerfeng
  • yaerfeng
  • 2016-12-15 10:17:55
  • 1418
    友情链接
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 456万+
    积分: 4万+
    排名: 111
    博客专栏
    最新评论