简单的JS俄罗斯方块游戏源码，先给大家展示下效果图，如果大家感觉不错，请参考实现代码，
效果图：
代码如下，复制即可使用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用JS实现俄罗斯方块游戏</title> <style type="text/css"> .MainFrame { border: 1px solid burlywood; margin: 10px auto; position: relative; background-color: silver; } .MainFramediv { float: left; margin: 1px; position: absolute; /*z-index: -1;*/ } .smallDiv { margin: 1px; position: absolute; } .smallDivblack { /*float: left;*/ margin: 1px; /*margin: 1px;*/ position: absolute; /*z-index: 2;*/ } #tetris{ width: 50%; margin: 0 auto; padding: 0; /*border: 1px solid silver;*/ } #tetris:after{ content: ""; Display: block; Clear: both; } #control{ float: left; border: 1px solid silver; width: 150px; height: 578px; margin-top: 10px; margin-left: 20px; padding-top: 30px; font-size: 24px; font-weight: 400; color: blue; text-align: center; } #level,#regame{ width: 100px; height: 30px; border: 1px solid blue; font-size: 16px; color: red; font-weight: 300; } #control p{ margin-top: 200px; } #regame{ margin-top: 100px; font-weight: 600; background-color: azure; } #TFrime{ float: left; } #info{ float: left; border: 1px solid silver; width: 150px; height: 578px; margin: 10px auto; padding-top: 30px; text-align: center; color: blue; font-size: 24px; font-weight: 400; } #nextfigure{ width: 100px; height: 100px; background-color: silver; margin: 0 auto; margin-bottom: 100px; position: relative; } .drawdiv{ background-color: red; margin: 1px; border: 1px solid silver; position: absolute; } </style> <!-- 此处需要自己修改JS路径 --> <script src="https://www.jb51.net/js/GameFrame.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.jb51.net/js/graph.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.jb51.net/js/index.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div> <div> 难度： <div><select onchange="changespeed()"> <option value="1000">简单 <option value="500">一般 <option value="200">困难 </select></div> <input type="button" value="重 新 开 始"> <p> ↑：变换<br> ←：左移<br> →：右移<br> ↓：加速<br> </p> </div> <div></div> <div> 下一个图形: <div> </div> <div>分数：<span>0</span></div> </div> </div> <div> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> </div> </body> </html>
GameFrame.js
function GameFrame(unit,row,col) { //单位的像素 this.unit = unit; //横向单位个数(列),,(一行的个数) this.row = row; //纵向单位个数(行)，，(一列的个数) this.col =col; //保存页面创建div容器的属性 this.Content; //小图形 this.samlldiv; //定时器id this.intervalid; //速度 this.speed =document.getElementById("level").value; //速度是否改变 this.ChangeSped=0; //记录每个位置是否有div this.datas=[]; //记录消除行数相应的分数 this.score=[0,100,300,600,1000] //记录当前的图形的下标 this.now; //记录下一个图形的下标 this.next; //记录当前的图形的颜色 this.nowcolor; //记录下一个图形的颜色 this.nextcolor; //保存7种图形相对坐标的数组 this.arr = "0,1,0,2,1,2,2,2;0,1,1,1,1,2,2,2;0,1,0,2,1,1,2,1;0,2,1,1,1,2,2,1;1,0,1,1,1,2,1,3;1,1,1,2,2,1,2,2;1,1,2,0,2,1,2,2".split(";"); //保存小方块的颜色 this.color=["red","blue","green","yellow","#00FFFF","#930093","#F80000","#984B4B"]; //初始化容器div this.init = function() { //创建div var div = document.createElement("div"); //设置div的宽度 div.style.width = (this.unit*this.row)+"px"; //设置div的高度 div.style.height=(this.unit*this.col)+"px"; //设置div的样式 div.className="MainFrame"; div.id="MainFrame"; //加入到body中 document.getElementById("TFrime").appendChild(div); this.Content =div; //保存div的引用 //初始化数组 for(var i=0;i<this.col;i++) //i为行 { for(var j=0;j<this.row;j++){ //j为列 var sdiv = document.createElement("div"); sdiv.className="MainFramediv"; sdiv.style.width = (this.unit - 2) + "px"; sdiv.style.height = (this.unit - 2) + "px"; sdiv.style.left=(j*this.unit)+"px"; sdiv.style.top=(i*this.unit)+"px"; this.Content.appendChild(sdiv); this.datas.push(0); } } this.next=Math.floor(Math.random() * this.arr.length); this.nextcolor=this.color[Math.floor(Math.random() * this.color.length)]; Start(); } this.MoveLeft = function() { this.samlldiv.moveleft(); } this.MoveRight = function(){ this.samlldiv.moveright(); } this.Change = function(){ this.samlldiv.change(); } this.MoveDown = function(){ if(this.samlldiv.movedown()) { // for(var i=0;i<this.samlldiv.divs.length;i++) // { // this.Content.removeChild(this.samlldiv.divs[i]); // } this.samlldiv.rescore(); Start(); } } function Start() { //将next值传给now this.frame.now=this.frame.next; this.frame.nowcolor=this.frame.nextcolor; //创建小div this.frame.samlldiv=new Graph(this.frame); this.frame.samlldiv.init(this.frame.now,this.frame.nowcolor); //绘出下一个图形 this.frame.next=Math.floor(Math.random() * this.frame.arr.length); this.frame.nextcolor=this.frame.color[Math.floor(Math.random() * this.frame.color.length)]; draw(); //调用定时器下落 this.frame.intervalid = setInterval(autoMoveDown,this.frame.speed); //判断游戏是否结束 if (this.frame.samlldiv.movedown()){ clearInterval(this.frame.intervalid); alert("游戏结束！"); } } function autoMoveDown() { if(this.frame.samlldiv.movedown()) { this.frame.samlldiv.rescore(); Start(); } //改变速度 if(this.frame.ChangeSped){ clearInterval(this.frame.intervalid); this.frame.intervalid = setInterval(autoMoveDown,this.frame.speed); this.frame.ChangeSped=0; } } //速度改变，令ChangeSped值为1 this.changespeed=function(){ this.speed=document.getElementById("level").value; this.ChangeSped=1; // alert(this.ChangeSped); } //绘制下一个图形 function draw(){ //清楚原有的图形 var cleardiv=document.getElementsByClassName("drawdiv"); for(;;){ if(cleardiv.length){ document.getElementById("nextfigure").removeChild(cleardiv[0]); }else{ break; } } //绘制图形 var smallarr = this.frame.arr[this.frame.next].split(","); for (var i = 0; i < 8; i += 2) { var drawdiv = document.createElement("div"); drawdiv.className = "drawdiv"; drawdiv.style.backgroundColor=this.frame.nextcolor; drawdiv.style.width = (this.frame.unit - 2) + "px"; drawdiv.style.height = (this.frame.unit - 2) + "px"; drawdiv.style.top = (((smallarr[i] - 0) * this.frame.unit)+18) + "px"; drawdiv.style.left = (((smallarr[i + 1] - 0) * this.frame.unit)+18) + "px"; document.getElementById("nextfigure").appendChild(drawdiv); } } }
graph.js