小游戏——俄罗斯方块（附带超详细源码，复制就可实现效果）

本文链接：https://blog.csdn.net/qq_41067077/article/details/137503451

该博客介绍使用Web前端基础知识实现俄罗斯方块，还展示了实现效果，并且提供了可复制以实现所有效果的详细代码源码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用web前端基础的知识做个俄罗斯方块玩玩。

先来看看实现的效果：

俄罗斯方块

复制就可以实现所有效果哦！！！

详细代码源码：


<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>俄罗斯方块小游戏JS版-孙也</title>

   <script>

       window.onload=function()
{
                  
var iLevel=1;
var oWrap=document.getElementById("wrap");
                  
var oScore=document.getElementById("score");
                  
var oPause=document.getElementById("pause");
                  
var oRestart=document.getElementById("restart");
                  
var oLevel=document.getElementById("level");

                  var oNext=document.getElementById("next");
                  
var oTime=document.getElementById("time");
                  
var oOl=oNext.getElementsByTagName("ol")[0];
                  
var oAlert=document.getElementById("alert");
                  
var oSur=document.getElementById("surrender");
                  
var aLi=[]
var clock=null;
       
oSur.onclick=function()
{
                  
oAlert.style.display="none";
};
       
function toDou(iNum)
{

                  if(iNum<10)
{
                  
return"0"+iNum;
}
                  
else return iNum;
}

                  var oDate=new Date();

                  var startTime=oDate.getTime();
                 
clock=setInterval(function(){

                       var NowTime=new Date().getTime();
                       
var hour=toDou(parseInt((NowTime-startTime)/1000/3600));
                       
var minute=toDou(parseInt((NowTime-startTime)/1000%3600/60));
                       
var second=toDou(parseInt((NowTime-startTime)/1000%3600%60));
                       
oTime.innerHTML=hour+":"+minute+":"+second;
},1000);
                       
oTime.innerHTML="00:00:00";
              
for(var i=0;i<40;i++)
{
                       
aLi[i]=document.createElement("li");

                       oOl.appendChild(aLi[i]);
                
}

                    function clearNext()
{

            for(var i=0;i<aLi.length;i++)
{

                      aLi[i].className="";
}
            
}
                    
RussianDiamonds();
          
function RussianDiamonds()
{

                        var iRow=18;

                       var iCol=10;
                       
var arr=[[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]];
                       
var diamond=[];
                       
var aFinishedRow=[];
                       
var aShape=[];
                       
var nowShape=0;
                       
var nextShape=0;
                       
var iScore=0;

                       var iType=0;

                       var bRowFinished=true;
                       
var bPause=false;

                       var bEnd=false;
                       
var bOver=false;
                       
var timer=null;

                        aShape.push(parseInt(Math.random()*6));

                                            createBoard();
                             
oScore.innerHTML=iScore;
autoDrop();
                             
oPause.onclick=function()
{

                                      if(!bOver)
{
 
                                    if(bPause)
{
                             
oPause.value="暂停";
                             
bPause=false;
switch(iLevel)
{

                                                    case 1:
timer=setInterval(function(){
goDown();
},800);
                                                    
break;
                                                    
case 2:
timer=setInterval(function(){
goDown();
},600);
                                                    
break;
                                                    
case 3:
timer=setInterval(function(){
goDown();
},400);
                                                    
break;
                                                         
}
                                            
}
                                                
else
{

                                       oPause.value="继续";
                                             
bPause=true;
clearInterval(timer);
                                     
}
                              
}
                                          
};
oRestart.onclick=function()
{
                              
window.location.reload();
                          
};
function goDown()
{

                     bEnd=false;
                          
for(var i=0;i<4;i++)
{
if(diamond[0][i]==iRow-1)
{
bEnd=true;
                        
}
                           
}

            if(!bEnd)
{

                          for(var i=0;i<4;i++)
{

                              var belowDiamondCol=diamond[0][i]+1;
if(arr[belowDiamondCol][diamond[1][i]].className=="finished")