这篇“html5如何实现俄罗斯方块游戏”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“html5如何实现俄罗斯方块游戏”文章吧。

代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>es6-重构俄罗斯方块(基于canvas)</title><styletype="text/css">#tetris{margin:10px250px;}</style></head><body><canvaswidth="700"height="525"id="tetris"></canvas><divid="text"style='color:red;font-size:30px;'>当前分数：0</div><scripttype="text/javascript">/***[一个完整的俄罗斯方块类designbymagic_xiang]*@param{number}side[每个方块边长(px),默认35]*@param{number}width[一行包含的方块数(个),默认20]*@param{number}height[一列包含的方块数(个),默认15]*@param{number}speed[方块下落移动速度(ms),默认400]*/classtetris{constructor(side=35,width=20,height=15,speed=400){this.side=side//每个方块边长this.width=width//一行包含的方块数this.height=height//一列包含的方块数this.speed=speed//方块下落移动速度this.num_blcok//当前方块类型的数字变量this.type_color//当前颜色类型的字符串变量this.ident//setInterval的标识this.direction=1//方块方向,初始化为1，默认状态this.grade=0//用来计算分数this.over=false//游戏是否结束this.arr_bX=[]//存放当前方块的X坐标this.arr_bY=[]//存放当前方块的Y坐标this.arr_store_X=[]//存放到达底部所有方块的X坐标this.arr_store_Y=[]//存放到达底部所有方块的Y坐标this.arr_store_color=[]//存放到达底部所有方块的颜色this.paints=document.getElementById('tetris').getContext('2d')//获取画笔self=this}//封装paints方法，让代码更简洁paintfr(x,y,scale=1){this.paints.fillRect(x*this.side,y*this.side,scale*this.side,scale*this.side)}//游戏开始gameStart(){this.init()this.run()}//初始化工作init(){this.initBackground()this.initBlock()}//方块自动下落run(){this.ident=setInterval("self.down_speed_up()",this.speed)}//初始化地图initBackground(){this.paints.beginPath()this.paints.fillStyle='#000000'//地图填充颜色为黑色for(leti=0;i<this.height;i++){for(letj=0;j<this.width;j++){this.paintfr(j,i)}}this.paints.closePath()}//初始化方块的位置和颜色initBlock(){this.paints.beginPath()this.createRandom('rColor')//生成颜色字符串，this.paints.fillStyle=this.type_colorthis.createRandom('rBlock')//生成方块类型数字this.arr_bX.forEach((item,index)=>{this.paintfr(item,this.arr_bY[index],0.9)})this.paints.closePath()}//利用数组画方块drawBlock(color){this.paints.beginPath()this.paints.fillStyle=colorthis.arr_bX.forEach((item,index)=>{this.paintfr(item,this.arr_bY[index],0.9)})this.paints.closePath()}//画已经在定位好的方块drawStaticBlock(){this.arr_store_X.forEach((item,index)=>{this.paints.beginPath()this.paints.fillStyle=this.arr_store_color[index]this.paintfr(item,this.arr_store_Y[index],0.9)this.paints.closePath()})}//生成随机数返回方块类型或颜色类型createRandom(type){lettemp=this.width/2-1if(type=='rBlock'){//如果是方块类型this.num_blcok=Math.round(Math.random()*4+1)switch(this.num_blcok){case1:this.arr_bX.push(temp,temp-1,temp,temp+1)this.arr_bY.push(0,1,1,1)breakcase2:this.arr_bX.push(temp,temp-1,temp-1,temp+1)this.arr_bY.push(1,0,1,1)breakcase3:this.arr_bX.push(temp,temp-1,temp+1,temp+2)this.arr_bY.push(0,0,0,0)breakcase4:this.arr_bX.push(temp,temp-1,temp,temp+1)this.arr_bY.push(0,0,1,1)breakcase5:this.arr_bX.push(temp,temp+1,temp,temp+1)this.arr_bY.push(0,0,1,1)break}}if(type=='rColor'){//如果是颜色类型letnum_color=Math.round(Math.random()*8+1)switch(num_color){case1:this.type_color='#3EF72A'breakcase2:this.type_color='yellow'breakcase3:this.type_color='#2FE0BF'breakcase4:this.type_color='red'breakcase5:this.type_color='gray'breakcase6:this.type_color='#C932C6'breakcase7:this.type_color='#FC751B'breakcase8:this.type_color='#6E6EDD'breakcase9:this.type_color='#F4E9E1'break}}}//判断方块之间是否碰撞(下)，以及变形时是否越过下边界judgeCollision_down(){for(leti=0;i<this.arr_bX.length;i++){if(this.arr_bY[i]+1==this.height){//变形时是否越过下边界returnfalse}if(this.arr_store_X.length!=0){//判断方块之间是否碰撞(下)for(letj=0;j<this.arr_store_X.length;j++){if(this.arr_bX[i]==this.arr_store_X[j]){if(this.arr_bY[i]+1==this.arr_store_Y[j]){returnfalse}}}}}returntrue}//判断方块之间是否碰撞(左右)，以及变形时是否越过左右边界judgeCollision_other(num){for(leti=0;i<this.arr_bX.length;i++){if(num==1){//变形时是否越过右边界if(this.arr_bX[i]==this.width-1)returnfalse}if(num==-1){//变形时是否越过左边界if(this.arr_bX[i]==0)returnfalse}if(this.arr_store_X.length!=0){//判断方块之间是否碰撞(左右)for(letj=0;j<this.arr_store_X.length;j++){if(this.arr_bY[i]==this.arr_store_Y[j]){if(this.arr_bX[i]+num==this.arr_store_X[j]){returnfalse}}}}}returntrue;}//方向键为下的加速函数down_speed_up(){letflag_all_down=trueflag_all_down=this.judgeCollision_down()if(flag_all_down){this.initBackground()for(leti=0;i<this.arr_bY.length;i++){this.arr_bY[i]=this.arr_bY[i]+1}}else{for(leti=0;i<this.arr_bX.length;i++){this.arr_store_X.push(this.arr_bX[i])this.arr_store_Y.push(this.arr_bY[i])this.arr_store_color.push(this.type_color)}this.arr_bX.splice(0,this.arr_bX.length)this.arr_bY.splice(0,this.arr_bY.length)this.initBlock()}this.clearUnderBlock()this.drawBlock(this.type_color)this.drawStaticBlock()this.gameover()}//方向键为左右的左移动函数move(dir_temp){this.initBackground()if(dir_temp==1){//右letflag_all_right=trueflag_all_right=this.judgeCollision_other(1)if(flag_all_right){for(leti=0;i<this.arr_bY.length;i++){this.arr_bX[i]=this.arr_bX[i]+1}}}else{letflag_all_left=trueflag_all_left=this.judgeCollision_other(-1)if(flag_all_left){for(leti=0;i<this.arr_bY.length;i++){this.arr_bX[i]=this.arr_bX[i]-1}}}this.drawBlock(this.type_color)this.drawStaticBlock()}//方向键为空格的变换方向函数up_change_direction(num_blcok){if(num_blcok==5){return}letarr_tempX=[]letarr_tempY=[]//因为不知道是否能够变形成功，所以先存储起来for(leti=0;i<this.arr_bX.length;i++){arr_tempX.push(this.arr_bX[i])arr_tempY.push(this.arr_bY[i])}this.direction++//将中心坐标提取出来，变形都以当前中心为准letax_temp=this.arr_bX[0]letay_temp=this.arr_bY[0]this.arr_bX.splice(0,this.arr_bX.length)//将数组清空this.arr_bY.splice(0,this.arr_bY.length)if(num_blcok==1){switch(this.direction%4){case1:this.arr_bX.push(ax_temp,ax_temp-1,ax_temp,ax_temp+1)this.arr_bY.push(ay_temp,ay_temp+1,ay_temp+1,ay_temp+1)breakcase2:this.arr_bX.push(ax_temp,ax_temp-1,ax_temp,ax_temp)this.arr_bY.push(ay_temp,ay_temp,ay_temp-1,ay_temp+1)breakcase3:this.arr_bX.push(ax_temp,ax_temp-1,ax_temp,ax_temp+1)this.arr_bY.push(ay_temp,ay_temp,ay_temp+1,ay_temp)breakcase0:this.arr_bX.push(ax_temp,ax_temp,ax_temp,ax_temp+1)this.arr_bY.push(ay_temp,ay_temp-1,ay_temp+1,ay_temp)break}}if(num_blcok==2){switch(this.direction%4){case1:this.arr_bX.push(ax_temp,ax_temp-1,ax_temp-1,ax_temp+1)this.arr_bY.push(ay_temp,ay_temp,ay_temp-1,ay_temp)breakcase2:this.arr_bX.push(ax_temp,ax_temp,ax_temp,ax_temp-1)this.arr_bY.push(ay_temp,ay_temp-1,ay_temp+1,ay_temp+1)breakcase3:this.arr_bX.push(ax_temp,ax_temp-1,ax_temp+1,ax_temp+1)this.arr_bY.push(ay_temp,ay_temp,ay_temp,ay_temp+1)breakcase0:this.arr_bX.push(ax_temp,ax_temp,ax_temp,ax_temp+1)this.arr_bY.push(ay_temp,ay_temp-1,ay_temp+1,ay_temp-1)break}}if(num_blcok==3){switch(this.direction%4){case1:this.arr_bX.push(ax_temp,ax_temp-1,ax_temp+1,ax_temp+2)this.arr_bY.push(ay_temp,ay_temp,ay_temp,ay_temp)breakcase2:this.arr_bX.push(ax_temp,ax_temp,ax_temp,ax_temp)this.arr_bY.push(ay_temp,ay_temp-1,ay_temp+1,ay_temp+2)breakcase3:this.arr_bX.push(ax_temp,ax_temp-1,ax_temp+1,ax_temp+2)this.arr_bY.push(ay_temp,ay_temp,ay_temp,ay_temp)breakcase0:this.arr_bX.push(ax_temp,ax_temp,ax_temp,ax_temp)this.arr_bY.push(ay_temp,ay_temp-1,ay_temp+1,ay_temp+2)break}}if(num_blcok==4){switch(this.direction%4){case1:this.arr_bX.push(ax_temp,ax_temp-1,ax_temp,ax_temp+1)this.arr_bY.push(ay_temp,ay_temp,ay_temp+1,ay_temp+1)breakcase2:this.arr_bX.push(ax_temp,ax_temp,ax_temp+1,ax_temp+1)this.arr_bY.push(ay_temp,ay_temp+1,ay_temp,ay_temp-1)breakcase3:this.arr_bX.push(ax_temp,ax_temp,ax_temp-1,ax_temp+1)this.arr_bY.push(ay_temp,ay_temp-1,ay_temp,ay_temp-1)breakcase0:this.arr_bX.push(ax_temp,ax_temp,ax_temp+1,ax_temp+1)this.arr_bY.push(ay_temp,ay_temp-1,ay_temp,ay_temp+1)break}}if(!(this.judgeCollision_other(-1)&&this.judgeCollision_down()&&this.judgeCollision_other(1))){//如果变形不成功则执行下面代码this.arr_bX.splice(0,this.arr_bX.length)this.arr_bY.splice(0,this.arr_bY.length)for(leti=0;i<arr_tempX.length;i++){this.arr_bX.push(arr_tempX[i])this.arr_bY.push(arr_tempY[i])}}this.drawStaticBlock()}//一行满了清空方块，上面方块Y坐标+1clearUnderBlock(){//删除低层方块letarr_row=[]letline_numif(this.arr_store_X.length!=0){for(letj=this.height-1;j>=0;j--){for(leti=0;i<this.arr_store_color.length;i++){if(this.arr_store_Y[i]==j){arr_row.push(i)}}if(arr_row.length==this.width){line_num=jbreak}else{arr_row.splice(0,arr_row.length)}}}if(arr_row.length==this.width){//计算成绩gradethis.grade++document.getElementById('text').innerHTML='当前成绩：'+this.gradefor(leti=0;i<arr_row.length;i++){this.arr_store_X.splice(arr_row[i]-i,1)this.arr_store_Y.splice(arr_row[i]-i,1)this.arr_store_color.splice(arr_row[i]-i,1)}//让上面的方块往下掉一格for(leti=0;i<this.arr_store_color.length;i++){if(this.arr_store_Y[i]<line_num){this.arr_store_Y[i]=this.arr_store_Y[i]+1}}}}//判断游戏结束gameover(){for(leti=0;i<this.arr_store_X.length;i++){if(this.arr_store_Y[i]==0){clearInterval(this.ident)this.over=true}}}}lettetrisObj=newtetris()tetrisObj.gameStart()//方向键功能函数document.onkeydown=(e)=>{if(tetrisObj.over)returnswitch(e.keyCode){case40://方向为下tetrisObj.down_speed_up()breakcase32://空格换方向tetrisObj.initBackground()//重画地图tetrisObj.up_change_direction(tetrisObj.num_blcok)tetrisObj.drawBlock(tetrisObj.type_color)breakcase37://方向为左tetrisObj.initBackground()tetrisObj.move(-1)tetrisObj.drawBlock(tetrisObj.type_color)breakcase39://方向为右tetrisObj.initBackground()tetrisObj.move(1)tetrisObj.drawBlock(tetrisObj.type_color)break}}</script></body></html>

以上就是关于“html5如何实现俄罗斯方块游戏”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。