HTML+CSS+JS实现俄罗斯方块完整版，素材只有图片，想要的下载图片按提示名字保存，css中用的时候注意路径！！主要在JS中！JS附有详细注释
效果：
按键提示：[键盘按键]
素材：图片名字与代码里对应
1、背景图片：tetris.png
2、失败时候的弹出框图片：game-over.png
3、七种色彩小方块图片：
I.png：
J.png：
L.png：
O.png：
S.png：
T.png：
Z.png：
HTML代码
俄罗斯方块 — 经典完整版 SCORE:0
LINES:0
LEVEL:1
CSS代码
.playground { width: 525px; height: 550px; margin: 20px auto 0 auto; position: relative; background-image:url("tetris.png");}.playground img { position: absolute;}.playground p { font-size: 30px; font-family: 'SimHei'; font-weight: bold; color: #667799; position: absolute; left:305px; top:120px;}.playground p+p { top:176px; }.playground p+p+p { top:232px; } JAVASCRIPT代码：分两段附有详细步骤解释
1、tetris.js
window.$=HTMLElement.prototype.$=function(selector){ return (this==window?document:this).querySelectorAll(selector);}var tetris={ RN:20,//总行数 CN:10,//总列数 CSIZE:26,//每个格子的宽高都是26px OFFSET_X:15,//每个单元格的左侧都要加15px OFFSET_y:15,//每个单元格的上面都要加15px pg:null,//保存游戏主界面对象 currShape:null,//专门保存正在移动的图形对象 nextShape:null,//八、专门保存下一个图形 interval:500,//每秒重绘一次==>下落的速度 timer:null, wall:[],//六、保存所有停止的下落的方块 state:1,//十、保存游戏当前状态 STATE_RUNNING:1,//十、游戏正在运行 STATE_GAMEOVER:0,//十、游戏结束 STATE_PAUSE:2,//十、游戏暂停 IMG_GAMEOVER:"img/game-over.png", IMG_PAUSE:"img/pause.png", SCORES:[0,10,50,80,200],//十三,要加的分数档位 score:0,//十三、当前总分 lines:0,//十三、当前总行数 //十、为游戏添加不同状态的图片 paintState:function(){//根据当前游戏状态，为游戏添加不同的图片 var img=new Image(); switch(this.state){ //如果当前状态是STATE_GAMEOVER case this.STATE_GAMEOVER: // img.src设置为IMG_GAMEOVER img.src=this.IMG_GAMEOVER; break; //如果当前状态是STATE_PAUSE case this.STATE_PAUSE: // img.src设置为IMG_PAUSE img.src=this.IMG_PAUSE; } //将img追加到pg中 this.pg.appendChild(img); }, init:function(){ this.pg=$(".playground")[0]; //创建一个随机图形的对象存在currShape中 this.currShape=this.randomShape(); this.nextShape=this.randomShape(); //六、将wall数组初始化为RN的空数组对象 for(var i=0;i =CN var cells=this.currShape.cells; for(var i=0;i =this.CN){ return true; } } return false; }, hit:function(){//检查当前图形是否碰撞 //当前shape中任意一个单元格在wall中相同位置有格 var cells=this.currShape.cells; for(var i=0;i */ this.pg.innerHTML=this.pg.innerHTML.replace(/ /g,""); this.paintShape(); this.paintWall(); this.paintNext(); //十三 this.paintScore(); this.paintState();//十、 }, //十三、计分 paintScore:function(){//找到span元素 //第一个span中放this.score $("span")[0].innerHTML=this.score; //第二个放this.lines $("span")[1].innerHTML=this.lines; }, drop:function(){ //判断能否下落 if(this.state==this.STATE_RUNNING){//该行是第十六步加的 if(this.canDrop()){ this.currShape.drop(); }else{//六、否则 //六、如果不能下落，就将图形中每个cell，放入wall数组中 this.landIntoWall(); //十二、消行、并计分 var ln=this.deleteLines();//消除并返回本次删除的行数 //十三、计分 this.score+=this.SCORES[ln]; this.lines+=ln; //九、如果游戏没有结束才。。 if(!this.isGameOver()){ //七、将等待的nextShape，换到currShape this.currShape=this.nextShape; //七、 this.nextShape=this.randomShape(); }else{//十、否则，一级结束 clearInterval(this.timer); this.timer=null; this.state=this.STATE_GAMEOVER; this.paint();//手动绘制一次 } } } }, //十二、消行，并计分 deleteLines:function(){//检查wall中每一行是否要消除 //遍历wall中每一行,定义lines变量存本次共删除的行数line for(var row=0,lines=0;row 0;r--){ // 从0开始遍历当前行每个格 for(var c=0;c 2、shapes.js
function Cell(row,col,img){ this.row=row; this.col=col; this.img=img; //三下落 if(!Cell.prototype.drop){ Cell.prototype.drop=function(){ this.row++; } } if(!Cell.prototype.moveR){//十一 Cell.prototype.moveR=function(){ this.col++; } } if(!Cell.prototype.moveL){//十一 Cell.prototype.moveL=function(){ this.col--; } }}//十四、下落的各种变化状态function State(r0,c0,r1,c1,r2,c2,r3,c3){ //第0个cell相对于参照cell的下标偏移量 this.r0=r0; this.c0=c0; //第1个cell相对于参照cell的下标偏移量 this.r1=r1; this.c1=c1; //第2个cell相对于参照cell的下标偏移量 this.r2=r2; this.c2=c2; //第3个cell相对于参照cell的下标偏移量 this.r3=r3; this.c3=c3;}function Shape(img,orgi){ this.img=img; this.states=[];//十四、保存每个图形不同状态的数组 this.orgi=orgi;//十四、以它为固定不变的参照点，去旋转变形，就是数组states的下标 this.statei=0;//默认所有图形的最初状态都是0 //三 if(!Shape.prototype.drop){ Shape.prototype.drop=function(){ //遍历当前对象的cells中的每个cell对象 // 调用当前cell对象的drop方法 for(var i=0;i =this.states.length&&(this.statei=0); //获得下一个状态对象 var state=this.states[this.statei]; var orgr=this.cells[this.orgi].row; var orgc=this.cells[this.orgi].col; //遍历当前图形中的每个cell //按state中偏移量，设置每个cell的新位置 for(var i=0;i 效果：
