[转]Tetris(俄罗斯方块) in jQuery/JavaScript!
本文转自:http://pwwang.com/2009/10/25/tetris-in-jquery-javascript/
All in jQuery/JavaScript + HTML!
Demo:Tetris(俄罗斯方块) in jQuery/JavaScript!
文章最后会给出源码下载。
先上两张图:
其实很早就有这样的想法,无奈思想一直不是很成熟,各个细节没有想好。突然某一天灵光闪现,就想到办法了。相信应该也有很多人有过这样的想法,可是总是会被一些细节问题所卡住。只要思路有了,代码的实现上并不难。所以我重点说一下思路。
先说一下这样程序的功能吧。图里面能够看得很清楚了。基本的功能就不说了,其它的包括下一个下落形状的预览(左上角的小方块中),隐藏、显示网格线,隐藏、显示下落时对好的阴影形状。其它的就是俄罗斯方块的基本功能了。
很重要的一点,很多人可能受到了思维定势的影响,觉得既然是俄罗斯方块,那当然是一个个方块往下落。如果你这样想,我敢说这样就算程序的功能都可以完成,也绝对在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)就可以进行转换了。为了效率,我们可以把由四个小方块组成的大方块排除在外,不用旋转。
Home Page in Google Code: http://code.google.com/p/tetris-in-jquery-javascript/
Introduction
jQuery.msgbox game called tetris(俄罗斯方块) in jQuery/JavaScript?
Information
pwwang http://pwwang.com
page http://pwwang.com/technology/js-javascript/tetris-in- jquery-javascript/
demo http://pwwang.com/tools/tetris.html
Details
- It’s a classic tetris
- It has basic functions of tetris
- You could decide to show the grids or not
- You could choose to show the shadow( will the falling shape will locate ) or not
- Pause or resume game
[转]Tetris(俄罗斯方块) in jQuery/JavaScript!的更多相关文章
- [JS]jQuery,javascript获得网页的高度和宽度
[JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...
- jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互.特效.小部件及主题.无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery ...
- Visual Studio 2012设置Jquery/Javascript智能提示
Visual Studio 2012设置Jquery/Javascript智能提示 在Visual Studio 2008 Visual Studio 2010中微软已经开始支持jquery/java ...
- jQuery JavaScript Library v3.2.1
/*! * jQuery JavaScript Library v3.2.1 * https://jquery.com/ * * Includes Sizzle.js * https://sizzle ...
- x01.Tetris: 俄罗斯方块
最强大脑有个小孩玩俄罗斯方块游戏神乎其技,那么,就写一个吧,玩玩而已. 由于逻辑简单,又作了一些简化,所以代码并不多. using System; using System.Collections.G ...
- jQuery/javascript实现全选全不选
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
- jQuery/javascript实现网页注册的表单验证
<html> <head> <meta charset="utf-8"> <title>注册表单验证</title> & ...
- jQuery/javascript实现简单网页计算器
<html> <head> <meta charset="utf-8"> <title>jQuery实现</title> ...
- JQuery & Javascript
Jquery 是一个优秀的javascript框架,是轻量级的js库 jQuery简化了javascript 编程 jQuery很容易学习
随机推荐
- Java50道经典习题-程序27 求素数
题目:求100之内的素数分析:素数即除了1和它本身以外不再有其他因数,最小的素数是2 判断一个数n是否是素数的方法:将n分别与2到(n+1)/2取余,若有一个值为0,则n就不为素数,反之为素数 pub ...
- c 数组作为返回值注意
static char* Test() { char buf[] ="aa"; printf("%s\n",buf); return buf; } int ma ...
- The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
刚才Insus.NET有尝试改一段代码,是让用户能动态变更网页背景图片的小功能.当Insus.NET去执行铵钮Click事件时,它却出现标题的错误.代码是这样的: 此代码,原本是没有什么问题的,但现在 ...
- Google准实时数据仓库Mesa(一)
本文来自网易云社区 作者:王潘安 以下是本人在学习Google的Mesa数据仓库论文的记录,翻译出来给大家分享,翻译水平有限,请多多包涵.因论文比较长,本人将论文按照Mesa不同的模块分开翻译,方便阅 ...
- Liunx在开机后,自动启动openldap、radius、memcached等程序的shell脚本
以下是脚本命令: #!/bin/bash #说明:此文件需放在/etc/rc.d/init.d/目录下,然后编辑文件/etc/rc.d/rc.local,在里面添加bash /etc/init.d/A ...
- 吴裕雄 python 机器学习——等度量映射Isomap降维模型
# -*- coding: utf-8 -*- import numpy as np import matplotlib.pyplot as plt from sklearn import datas ...
- Spring MVC零配置(全注解)(版本5.0.7)
// 核心配置类 package spittr.config; import org.springframework.web.servlet.support.AbstractAnnotationCon ...
- LinkExtractor 构造器各参数说明
LinkExtractor 构造器各参数说明 特例: LinkExtractor构造器的所有参数都有默认值 各参数说明: allow 接收一个正则表达式或一个正则表达式列表,提取绝对url与正则表达式 ...
- 转载Json和Xml的区别,以及它们的底层是如何处理的
XML:可扩展标记语言 JSON:轻量级的数据交换格式 区别: 1.可读性方面:基本相同,Xml的可读性较好些: 2.可扩展性方面:都有较好的扩展性: 3.编码难度方面:json的编码较容 ...
- 10.15 lzxkj
几天前写的,忘了放了,在此填坑 10月16的题我出的不写题解了 lzxkj 题目背景 众所不周知的是, 酒店之王 xkj 一个经常迷失自我的人 有一天, 当起床铃再一次打响的时候, TA 用 O(1) ...