俄罗斯方块方块是小时候的一个回忆，从最开始的掌上的黑白游戏机，到电视游戏机，到电脑，无不有它的痕迹，今天我们来一起重温它的一种实现方法，也算是整理一下我的思路吧......
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 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 以上就是小编给大家分享的关于基于javascript代码编写的网页版俄罗斯方块。希望大家喜欢。