《JavaScript实现简洁的俄罗斯方块完整实例_.docx》由会员分享，可在线阅读，更多相关《JavaScript实现简洁的俄罗斯方块完整实例_.docx（14页珍藏版）》请在三一文库上搜索。
1、JavaScript实现简洁的俄罗斯方块完整实例_ 本文实例讲解并描述了JavaScript实现简洁的俄罗斯方块。分享给大家供大家参考，具体如下： 完整实例代码如下： 代码如下: !DOCTYPE html html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title俄罗斯方块/title style type=text/css .cmargin:1px; width:19px; height:19px; background:red; position:absolute; .dmargin:1p
2、x; width:19px; height:19px; background:gray; position:absolute; .ftop:0px; left:0px; background:black; position:absolute; .etop:0px; background:#151515; position:absolute; .gwidth:100px; height:20px; color:white; position:absolute; /style script type=text/javascript var row = 18; var col = 10; var a
3、nnouncement = 6; var size = 20; var isOver = false; var shapes = (0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2).split(;); var tetris; var container; function createElm(tag,css) var elm = document.createElement(tag); elm.className = c
4、ss; document.body.appendChild(elm); return elm; function Tetris(css,x,y,shape) / 创建4个div用来组合出各种方块 var myCss = css?css:c; this.divs = createElm(div,myCss),createElm(div,myCss),createElm(div,myCss),createElm(div,myCss); if(!shape) this.divs2 = createElm(div,myCss),createElm(div,myCss),createElm(div,my
5、Css),createElm(div,myCss); this.score = createElm(div,g); this.score.style.top = 10*size+px; this.score.style.left = (col- -1)*size+px; this.score.innerHTML = score:0; this.container = null; this.refresh = function() this.x = (typeof(x)!=undefined)?x:3; this.y = (typeof(y)!=undefined)?y:0; / 假如有传参，优
6、先用法参数的，假如有预告，优先用法预告，都没有就自己生成 if(shape) this.shape = shape; else if(this.shape2) this.shape = this.shape2; else this.shape = shape?shape:shapesMath.floor(Math.random()*shapes.length-0.000000001).split(,); this.shape2 = shapesMath.floor(Math.random()*shapes.length-0.000000001).split(,); if(this.contai
7、ner !this.container.check(this.x,this.y,this.shape) isOver = true; alert(嬉戏结束); else this.show(); this.showScore(); this.showAnnouncement(); / 显示方块 this.show = function() for(var i in this.divs) this.divsi.style.top = (this.shapei*2+1- -this.y)*size+px; this.divsi.style.left = (this.shapei*2- -this.
8、x)*size+px; / 显示预告 this.showAnnouncement = function() for(var i in this.divs2) this.divs2i.style.top = (this.shape2i*2+1- -1)*size+px; this.divs2i.style.left = (this.shape2i*2- -1- -col)*size+px; / 显示分数 this.showScore = function() if(this.container this.score) this.score.innerHTML = score: + this.co
9、ntainer.score; / 水平移动方块的位置 this.hMove = function(step) if(this.container.check(this.x- -step,this.y,this.shape) this.x += step; this.show(); / 垂直移动方块位置 this.vMove = function(step) if(this.container.check(this.x,this.y- -step,this.shape) this.y += step; this.show(); else this.container.fixShape(this.
10、x,this.y,this.shape); this.container.findFull(); this.refresh(); / 旋转方块 this.rotate = function() var newShape = this.shape1,3-this.shape0,this.shape3,3-this.shape2,this.shape5,3-this.shape4,this.shape7,3-this.shape6; if(this.container.check(this.x,this.y,newShape) this.shape = newShape; this.show();
11、 this.refresh(); function Container() this.init = function() / 绘制方块所在区域 var bgDiv = createElm(div,f); bgDiv.style.width = size*col+px; bgDiv.style.height = size*row+px; / 绘制预告所在区域 var bgDiv = createElm(div,e); bgDiv.style.left = size*col+px; bgDiv.style.width = size*announcement+px; bgDiv.style.heig
12、ht = size*row+px; / 清空积分 this.score = 0; this.check = function(x,y,shape) / 检查边界越界 var flag = false; var leftmost=col; var rightmost=0; var undermost=0; for(var i=0;i8;i+=2) / 记录最左边水平坐标 if(shapeileftmost) leftmost = shapei; / 记录最右边水平坐标 if(shapeirightmost) rightmost = shapei; / 记录最下边垂直坐标 if(shapei+1u
13、ndermost) undermost = shapei+1; / 推断是否碰撞 if(this(shapei+1- -y)*100- -(shapei- -x) flag = true; / 推断是否到达极限高度 for(var m=0;m3;m+) for(var n=0;ncol;n+) if(thism*100+n) flag = true; if(rightmost- -x+1)col | (leftmost- -x)0 | (undermost- -y+1)row | flag) return false; return true; / 用灰色方块替换红色方块，并在容器中记录灰色方
14、块的位置 this.fixShape = function(x,y,shape) var t = new Tetris(d,x,y,shape); for(var i=0;i8;i+=2) this(shapei+1- -y)*100- -(shapei- -x) = t.divsi/2; / 遍历整个容器，推断是否可以消退 this.findFull = function() var s = 0; for(var m=0;mrow;m+) var count = 0; for(var n=0;ncol;n+) if(thism*100+n) count+; if(count=col) s+;
15、 this.removeLine(m); this.score -= -this.calScore(s); this.calScore = function(s) if(s!=0) return s- -this.calScore(s-1) else return 0; / 消退指定一行方块 this.removeLine = function(row) / 移除一行方块 for(var n=0;ncol;n+) document.body.removeChild(thisrow*100+n); / 把所消退行上面全部的方块下移一行 for(var i=row;i0;i-) for(var j
16、=0;jcol;j+) thisi*100- -j = this(i-1)*100- -j if(thisi*100- -j) thisi*100- -j.style.top = i*size + px; function init() container = new Container(); container.init(); tetris = new Tetris(); tetris.container = container; document.onkeydown = function(e) if(isOver) return; var e = window.event?window.e
17、vent:e; switch(e.keyCode) case 38: /up tetris.rotate(); break; case 40: /down tetris.vMove(1); break; case 37: /left tetris.hMove(-1); break; case 39: /right tetris.hMove(1); break; setInterval(if(!isOver) tetris.vMove(1),500); /script /head body onload=init() /body /html 盼望本文所述对大家JavaScript程序设计有所关心。 .