《JavaScript實(shí)現(xiàn)簡潔的俄羅斯方塊完整實(shí)例_》由會員分享，可在線閱讀，更多相關(guān)《JavaScript實(shí)現(xiàn)簡潔的俄羅斯方塊完整實(shí)例_（14頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

1、JavaScript實(shí)現(xiàn)簡潔的俄羅斯方塊完整實(shí)例_ 本文實(shí)例講解并描述了JavaScript實(shí)現(xiàn)簡潔的俄羅斯方塊。分享給大家供大家參考，具體如下： 完整實(shí)例代碼如下： 代碼如下: !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) / 創(chuàng)建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; / 假如有傳參，優(yōu)

6、先用法參數(shù)的，假如有預(yù)告，優(yōu)先用法預(yù)告，都沒有就自己生成 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(嬉戲結(jié)束); 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; / 顯示預(yù)告 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; / 顯示分?jǐn)?shù) 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(); / 旋轉(zhuǎn)方塊 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() / 繪制方塊所在區(qū)域 var bgDiv = createElm(div,f); bgDiv.style.width = size*col+px; bgDiv.style.height = size*row+px; / 繪制預(yù)告所在區(qū)域 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) / 記錄最左邊水平坐標(biāo) if(shapeileftmost) leftmost = shapei; / 記錄最右邊水平坐標(biāo) if(shapeirightmost) rightmost = shapei; / 記錄最下邊垂直坐標(biāo) if(shapei+1u

13、ndermost) undermost = shapei+1; / 推斷是否碰撞 if(this(shapei+1- -y)*100- -(shapei- -x) flag = true; / 推斷是否到達(dá)極限高度 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程序設(shè)計有所關(guān)心。 .