Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>俄罗斯方块</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
html{
overflow: hidden;
}
body{
width: 100%;
height: 100%;
overflow:hidden;
background-color: #000000;
}
.box{
position: absolute;
left: 50%;
top: 50%;
width: 302px;
height: 400px;
margin-left: -152px;
margin-top: -200px;
background-color: #ffffff;
}
.left{
position: absolute;
left: 0px;
top:0px;
width: 200px;
height: 100%;
border: 1px solid #808080;
}
.right{
position: absolute;
left: 200px;
top:0px;
width: 100px;
height: 100%;
border: 1px solid #808080;
}
.mask{
position: absolute;
left: 0px;
top:0px;
width: 100%;
height: 100%;
background-color: orange;
opacity: 0.8;
filter:alpha(opacity=80);
}
.msgbox{
position: absolute;
width: 200px;
height: 100px;
line-height: 100px;
background-color: #ffffff;
left: 50%;
top: 50%;
margin-left: -98px;
margin-top: -48px;
text-align: center;
font-size: 15px;
border: 4px solid #cccccc;
}
</style>
<script type="text/javascript">
var fw = {};
fw.math = {};
fw.getId = function (id){
return document.getElementById(id);
}
fw.callEach = function(a, cb){
for (var i=0,l=a.length;i<l;i++) cb(a[i], i);
}
fw.each = function(a, cb, r){
if(r) for(var i=0,t,l=a.length;i<l;i++)(t=cb(a[i],i))!=undefined&&r.push(t);
else for(var i=a.length-1;i>=0;i--)(a[i]=cb(a[i],i))==undefined&&a.splice(i,1);
return r||a;
}
fw.math.random = function (s,e){
return Math.floor(Math.random()*(e+1-s)) + s;
}
</script>
<script type="text/javascript">
var tetris = {};
//初始化
tetris.init = function(ctrlid, levelid, previewid, scoreid, maskid, msgboxid){
var colorlist = { blue:"dodgerblue", orange:"orangered", green:"green", purple:"purple", red:"firebrick", brown:"brown", cyan:"darkcyan", white:"#ffffff" };
this.sharplist = [
{ letter:"S", pos:["22233132","22323343"], color:colorlist.blue },
{ letter:"Z", pos:["21223233","23333242"], color:colorlist.orange },
{ letter:"L", pos:["22324243","31323323","23334322","21222331"], color:colorlist.green },
{ letter:"J", pos:["23334342","21222333","22324223","31323321"], color:colorlist.purple },
{ letter:"I", pos:["12223242","31323334"], color:colorlist.red },
{ letter:"O", pos:["22233233"], color:colorlist.brown },
{ letter:"T", pos:["21222332","22324233","31323322","23334332"], color:colorlist.cyan }
];
this.setpos();
document.onkeyup = this.presskey;
this.marginleft = 0;
this.margintop = 0;
this.toprow = 20;
this.rest = false;
this.defaultcolor = colorlist.white;
this.currcolor = colorlist.white;
this.grid = this.creategrid(fw.getId(ctrlid), 20, 10);
this.letterindex = 0;
this.posindex = 0;
this.currpos = { row:[1,1,1,1], col:[1,1,1,1] };
this.previewgrid = this.creategrid(fw.getId(previewid), 4, 4);
this.previewletterindex = 0;
this.previewposindex = 0;
this.previewpos = { row:[1,1,1,1], col:[1,1,1,1] };
this.levelobj = fw.getId(levelid);
this.scoreobj = fw.getId(scoreid);
this.maskobj = fw.getId(maskid);
this.msgboxobj = fw.getId(msgboxid);
this.level = 1;
this.speed = 500;
tetris.redo();
}
//重来一局
tetris.redo = function (msg){
msg && this.showmsg(msg);
for (var rowindex=1; rowindex<=20; rowindex++){
for (var colindex=1; colindex<=10; colindex++){
this.grid[rowindex][colindex].type = "blank";
this.grid[rowindex][colindex].obj.bgColor = this.defaultcolor;
}
}
this.score = this.scoreobj.innerHTML = 0;
this.movetoleftable = true;
this.movetorightable = true;
this.movetobottomable = true;
this.addpreview();
this.add();
this.start();
}
//显示提示消息
tetris.showmsg = function(msg){
this.maskobj.style.display = "";
this.msgboxobj.innerHTML = msg;
window.setTimeout('tetris.maskobj.style.display="none"', 2000);
}
//建表格
tetris.creategrid = function (container, rowsnum, colsnum){
var spanhtml = '<div style="margin:3px; width:10px; height:10px; line-height:10px; border:2px solid #ffffff"> </div>';
var html = [];
for (var rowindex=1; rowindex<=rowsnum; rowindex++){
html.push('<tr>'+Array(colsnum+1).join('<td width="20" height="20">'+spanhtml+'</td>')+'</tr>');
}
html = html.join("");
container.innerHTML = '<table width="'+colsnum*20+'" height="'+rowsnum*20+'" border="0" cellpadding="0" cellspacing="0">'+html+'</table>';
var grid = [];
for (var rowindex=1; rowindex<=rowsnum; rowindex++){
grid[rowindex] = [];
for (var colindex=1; colindex<=colsnum; colindex++){
grid[rowindex][colindex] = { obj:container.firstChild.rows[rowindex-1].cells[colindex-1], type:"blank" };
}
}
return grid;
}
//按下按键
tetris.presskey = function (e){
if (tetris.rest) return;
var cmd = ["movetoleft","chgsharp","movetoright","highspeed"][(window.event||e).keyCode-37];
cmd && tetris[cmd]();
}
//看能否移动
tetris.chkmoveable = function(){
//document.title = this.movetobottomable;
this.movetoleftable = true;
this.movetorightable = true;
this.movetobottomable = true;
var isfull = function(gridindex, rowoffset, coloffset){
var row = tetris.currpos.row[gridindex] + rowoffset + tetris.margintop;
var col = tetris.currpos.col[gridindex] + coloffset + tetris.marginleft;
return tetris.grid[row][col].type == "full";
};
for (var gridindex=0; gridindex<4; gridindex++){
if (this.marginleft==1-Math.min.apply(null,this.currpos.col) || isfull(gridindex,0,-1)) this.movetoleftable = false;
if (this.marginleft==10-Math.max.apply(null,this.currpos.col) || isfull(gridindex,0,1)) this.movetorightable = false;
if (this.margintop==20-Math.max.apply(null,this.currpos.row) || isfull(gridindex,1,0)) this.movetobottomable = false;
}
}
//向左移动
tetris.movetoleft = function(){
if (!this.movetoleftable) return;
tetris.clear();
this.marginleft--;
tetris.render();
this.chkmoveable();
}
//向右移动
tetris.movetoright = function(){
if (!this.movetorightable) return;
tetris.clear();
this.marginleft++;
tetris.render();
this.chkmoveable();;
}
//变形
tetris.chgsharp = function(){
var sharp = this.sharplist[this.letterindex];
var index = this.posindex + 1;
if (index>=sharp.pos.length){
index = 0;
}
if (this.chksharp(sharp.pos[index])){
this.posindex = index;
this.currpos = sharp.pos[this.posindex];
tetris.render();
}
}
//判断变形是否有效
tetris.chksharp = function(pos){
//alert([pos.row,pos.col]);
if (Math.max.apply(null,pos.col)+this.marginleft<1) return false;
if (Math.max.apply(null,pos.col)+this.marginleft>10) return false;
if (Math.max.apply(null,pos.row)+this.margintop>20) return false;
var r = this.margintop;
if (r<1-Math.min.apply(null,pos.row)){
r = 1 - Math.min.apply(null,pos.row);
}
for (var gridindex=0; gridindex<4; gridindex++){
var row = pos.row[gridindex] + r;
var col = pos.col[gridindex] + this.marginleft;
//alert(this.grid[row][col].type);
if (this.grid[row][col].type == "full") return false;
}
tetris.clear();
this.margintop = r;
return true;
}
//加速
tetris.highspeed = function(){
while (this.movetobottomable){
tetris.autodown();
}
for (var gridindex=0; gridindex<4; gridindex++){
var rownumber = this.currpos.row[gridindex] + this.margintop;
var colnumber = this.currpos.col[gridindex] + this.marginleft;
this.grid[rownumber][colnumber].type = "full";
}
window.clearInterval(this.timer);
this.rest = true;
window.setTimeout(function(){
tetris.rest = false;
tetris.clearfullrow();
if (tetris.score>=800) return tetris.redo();
if (tetris.toprow<=1) return tetris.redo("请继续努力!");
tetris.add();
tetris.start();
}, 200);
}
//开始一段方块
tetris.start = function (){
this.timer = window.setInterval("tetris.autodown()", this.speed);
}
//自动下移
tetris.autodown = function(){
if (!this.movetobottomable) return this.highspeed();
tetris.clear();
this.margintop++;
tetris.render();
this.chkmoveable();
}
//消除满行
tetris.clearfullrow = function(){
var fullgridsnum = function (row){
var count = 0;
for (var colindex=1; colindex<=10; colindex++){
if (tetris.grid[row][colindex].type=="full") count++;
}
return count;
}
var swaprow = function (newrow, oldrow){
for (var colindex=1; colindex<=10; colindex++){
tetris.grid[newrow][colindex].type = tetris.grid[oldrow][colindex].type;
tetris.grid[newrow][colindex].obj.bgColor = tetris.grid[oldrow][colindex].obj.bgColor;
}
}
var lowestrow = 20;
var fullrowsnum = 0;
while (fullgridsnum(lowestrow)>0){
if (fullgridsnum(lowestrow)==10){
fullrowsnum++;
for (var rowindex=lowestrow; rowindex>0&&fullgridsnum(rowindex)>0; rowindex--) swaprow(rowindex,rowindex-1);
}else lowestrow--;
}
this.toprow = lowestrow;
fullrowsnum>0 && tetris.addscore(fullrowsnum);
}
//加分
tetris.addscore = function(fullrowsnum){
this.score += [0,10,30,50,80][fullrowsnum];
this.scoreobj.innerHTML = this.score;
if (this.score>=800){
this.showmsg([,"运气不错,请进入第2关!", "水平不错,请进入第3关!", "你太棒了,恭喜你通关了! "][this.level]);
this.level++;
this.speed -= 150;
if (this.level>3){
this.level = 1;
this.speed = 500;
}
this.levelobj.innerHTML = this.level;
}
}
//添加
tetris.add = function(){
this.letterindex = this.previewletterindex;
this.posindex = this.previewposindex;
this.currpos = this.previewpos;
this.currcolor = this.sharplist[this.letterindex].color;
this.marginleft = 3;
this.margintop = 1 - Math.min.apply(null,this.currpos.row);
this.movetoleftable = true;
this.movetorightable = true;
this.movetobottomable = true;
this.render();
this.addpreview();
}
//着色
tetris.render = function(){
this.each("active", this.currcolor);
}
//清空
tetris.clear = function(){
this.each("blank", this.defaultcolor);
}
//遍历
tetris.each = function(type, color){
for (var gridindex=0; gridindex<4; gridindex++){
var rownumber = this.currpos.row[gridindex] + this.margintop;
var colnumber = this.currpos.col[gridindex] + this.marginleft;
this.grid[rownumber][colnumber].type = type;
this.grid[rownumber][colnumber].obj.bgColor = color;
}
}
//添加预显
tetris.addpreview = function(){
this.previewrender(this.defaultcolor);
this.previewletterindex = fw.math.random(0,6);
var previewsharp = this.sharplist[this.previewletterindex];
this.previewposindex = fw.math.random(0, previewsharp.pos.length-1);
this.previewpos = previewsharp.pos[this.previewposindex];
this.previewrender(previewsharp.color);
}
//预显着色
tetris.previewrender = function(color){
for (var gridindex=0; gridindex<4; gridindex++){
var rownumber = this.previewpos.row[gridindex];
var colnumber = this.previewpos.col[gridindex];
this.previewgrid[rownumber][colnumber].obj.bgColor = color;
}
}
//位置转换
tetris.setpos = function(){
fw.callEach(this.sharplist, function(sharpobj){
fw.each(sharpobj.pos, function(pos){
var posobj = { row:[], col:[] }
fw.callEach(pos.match(/../g), function(gridpos, gridindex){
posobj.row[gridindex] = +gridpos.slice(0,1);
posobj.col[gridindex] = +gridpos.slice(-1);
});
return posobj;
});
});
}
</script>
</head>
<body>
<div class="box">
<div id="ctrlarea" class="left"></div>
<div class="right">
<div id="level" style="text-align:right; margin-right:15px;">1</div>
<div id="previewgrid" style="margin-left:10px;"></div>
<div style="text-align:center; margin-top:150px;">得分</div>
<div id="score" style="text-align:center;">0</div>
</div>
<div id="mask" class="mask" style="display:none;">
<div id="msgbox" class="msgbox"></div>
</div>
</div>
<script type="text/javascript">
tetris.init("ctrlarea", "level", "previewgrid", "score", "mask", "msgbox");
</script>
</body>
</html>
45万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
