技术教程 js html5 css俄罗斯方块游戏再现 正文

js html5 css俄罗斯方块游戏再现

2019-11-28,,,,,

这个游戏主要分为三部份，HTML5+CSS+JAVASCRIPT来完成的。在这里详细讲一下js的代码。因为这个游戏的主要部分其实就是js。

大多数都是靠js来完成的。

完成后的效果如下：

HTML代码： 

<body> 
 <div class="wrap"> 
 <div class="play_wrap"> 
 <div id="play_area"></div> 
 <div class="play_menu"> 
 <p>下一个：</p> 
 <div id="play_nextType"></div> 
 <a id="play_btn_start" class="play_btn" href="javascript:void(0);" 
 unselectable="on">开始</a><a id="play_btn_level" class="play_btn" href="javascript:void(0)" unselectable="on"><span class="level_text">中等</span class="level_icon"></span></a> 
 <div class="level_menu" id="play_menu_level"> 
 <ul> 
 <li><a href="javascript:void(0)" level=0>简单</a></li> 
 <li><a href="javascript:void(0)" level=1>中等</a></li> 
 <li><a href="javascript:void(0)" level=2>困难</a></li> 
 </ul> 
 </div> 
 <p> 
 分数：<span id="play_score">0</span> 
 </p> 
 <p> 
 方向：<span id="play_direction">bottom</span> 
 </p> 
 <p> 
 说明：<br> -“下”、“左”、“右”键控制方向，“上”为变形；<br> -游戏开始前、暂停时可调整难度；<br> 
 -难度分“简单”、“中等”、“困难”三级；<br> -对应的分值为10、20、40；<br> 
 -多行同时消去的倍数为1、4、10、20； 
 </p> 
 </div> 
 </div> 
 </div> 
 </body>

CSS代码： 

<style> 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td 
{ 
 padding: 0; 
 margin: 0; 
} 
 
body { 
 font-family: "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", 
 "Microsoft Yahei", "微软雅黑", Tahoma, Arial, STHeiti, sans-serif; 
 font-size: 12px; 
 background: #fff; 
 color: #333; 
} 
 
a{ 
 outline:none; 
 -moz-outline:none; 
 text-decoration: none; 
} 
 
.wrap{ 
 width:1000px; 
 margin:80px auto; 
} 
 
.play_wrap{ 
 padding-left:260px; 
} 
 
#play_area{ 
 float:left; 
 width:300px; 
 height:480px; 
 margin:auto; 
 background-color:#fefefe; 
 border-radius:2px; 
 color:black; 
 box-shadow:0px 0px 8px #e5e5e5; 
 padding:1px 0 0 1px; 
} 
 
#play_area .play_cell{ 
 float:left; 
 width:19px; 
 height:19px; 
 border:1px solid #eee; 
 margin:-1px 0 0 -1px; 
} 
 
#play_area .play_cell.active{ 
 background:#999; 
 border:1px solid #ccc; 
} 
 
#play_area .play_cell.goal{ 
 background:#0c0; 
} 
 
.play_menu{ 
 float:left; 
 margin-left:60px; 
 font-size:14px; 
 padding-top:20px; 
} 
 
.play_menu #play_nextType{ 
 width:60px; 
 height:60px; 
 padding:1px 0 0 1px; 
 margin:10px 0 20px 0; 
} 
 
.play_menu .play_mini_cell{ 
 float:left; 
 width:14px; 
 height:14px; 
 border:1px solid #fff; 
 margin:-1px 0 0 -1px; 
} 
 
.play_menu .play_mini_cell.active{ 
 background:#999; 
 border:1px solid #ccc; 
} 
 
.play_menu p { 
 line-height:200%; 
 clear:both; 
} 
 
.play_menu a.play_btn{ 
 display:block; 
 margin-bottom:20px; 
 width:80px; 
 height:28px; 
 line-height:28px; 
 text-align:center; 
 text-decoration: none; 
 color:#333; 
 background:#fefefe; 
 border:1px solid #eee; 
 border-radius: 2px; 
 box-shadow: 1px 1px 2px #eee; 
 border-color:#ddd #d2d2d2 #d2d2d2 #ddd; 
 outline: none; 
 -moz-outline:none; 
} 
 
.play_menu a.play_btn:hover{ 
 background-color:#fcfcfc; 
 border-color:#ccc; 
 box-shadow: inset 0 -2px 6px #eee; 
} 
 
.play_menu a#play_btn_level{ 
 position:relative; 
 margin-bottom:30px; 
} 
 
.level_text{ 
 margin-left:-10px; 
} 
 
.level_icon{ 
 display: block; 
 position:absolute; 
 top:12px; 
 right:16px; 
 width:0; 
 height:0; 
 overflow: hidden; 
 border:5px solid #FFF; 
 border-color: #999 transparent transparent transparent; 
} 
 
.level_menu{ 
 position:absolute; 
 margin:-30px 0 0 1px; 
 display:none; 
} 
.level_menu ul{ 
 list-style:none; 
} 
.level_menu li{ 
 float:left; 
} 
.level_menu li a{ 
 display:block; 
 padding:3px 10px; 
 border:1px solid #e8e8e8; 
 margin-left:-1px; 
 color:#09c; 
} 
.level_menu li a:hover{ 
 background:#09c; 
 color:#fefefe; 
} 
</style>

HTML的代码其实就是一个游戏结构的框架，这里框架其实就是几个div的东西，所以不会太长，理解起来也是挺容易的。而CSS则是控制网页的布局与美观，所以要想吸引玩家，那CSS方面必须下功夫，而这里的CSS只是其实就将游戏区域与菜单区域分为左右两边了。而游戏域内的一个个框其实就是多个div，整齐排列在一起而已。

下面到了js了：

因为在代码已经将一些重要的部分做了注释，所以就不打算逐步分去分析了。说一下整体的写法吧。其实它首先是直接定义了一些图形的坐标，然后根据这些坐标画出一个下一个的图形出来，之后就是利用一个setInterval函数在游戏区域标出每个点，如果不能下落了就直接清除掉时间函数，之后在调用一个创建时间函数的函数出来，在画一个图形出来。具体的细节就看代码吧。 

<script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
 <script type="text/javascript"> 
 var Tetris = function(options){ 
 //方块区域 
 this.e_playArea = $("#play_area"); 
 //开始按钮 
 this.e_startBtn = $("#play_btn_start"); 
 //分数 
 this.e_playScore = $("#play_score"); 
 //方向 
 this.e_playDirection = $("#play_direction"); 
 //等级按钮 
 this.e_levelBtn = $("#play_btn_level"); 
 //等级菜单 
 this.e_levelMenu = $("#play_menu_level"); 
 //下一个方块的类型 
 this.e_nextType = $("#play_nextType"); 
 //总的列数 
 this.cellCol = 15; 
 //总的行数 
 this.cellRow = 24; 
 //每个小方块的属性数组 
 this.cellArr = []; 
 //保存右上方下一个那里的小图形数组 
 this.miniCellArr = []; 
 //分数 
 this.score = 0; 
 //方向 
 this.direction = "bottom"; 
 //定时器的ID 
 this.timer = null; 
 //定时器的时间数组 
 this.interval = [600,300,100]; 
 //等级的分数数组 
 this.levelScore = [10,20,40]; 
 //消除的行数多少而给的倍数 
 this.doubleScore = [1,4,10,20]; 
 //默认等级1 
 this.level = 1; 
 //游戏是否进行 
 this.playing = false; 
 //游戏暂停标记 
 this.turning = false; 
 //游戏结束标记 
 this.death = false; 
 //一开始方块列出现的位置 
 this.offsetCol = Math.floor(this.cellCol/2); 
 //一开始方块行出现的位置 
 this.offsetRow = -3; 
 
 this.tetrisArr = []; 
 /* 
 0,1,15,16 
 0,1,15,16 
 */ 
 this.tetrisArr[0] = [ 
 [0,1,this.cellCol,this.cellCol+1], 
 [0,1,this.cellCol,this.cellCol+1] 
 ]; 
 /* 
 1,14,15,16 
 0,15,30,31 
 14,15,16,29 
 -1,0,15,30 
 */ 
 this.tetrisArr[1] = [ 
 [1,this.cellCol-1,this.cellCol,this.cellCol+1], 
 [0,this.cellCol,this.cellCol*2,this.cellCol*2+1], 
 [this.cellCol-1,this.cellCol,this.cellCol+1,this.cellCol*2-1], 
 [-1,0,this.cellCol,this.cellCol*2] 
 ]; 
 /* 
 -1,14,15,16 
 0,1,15,30 
 14,15,16,31 
 0,15,29,30 
 */ 
 this.tetrisArr[2] = [ 
 [-1,this.cellCol-1,this.cellCol,this.cellCol+1], 
 [0,1,this.cellCol,this.cellCol*2], 
 [this.cellCol-1,this.cellCol,this.cellCol+1,this.cellCol*2+1], 
 [0,this.cellCol,this.cellCol*2-1,this.cellCol*2] 
 ]; 
 /* 
 0,15,16,31 
 15,16,29,30 
 */ 
 this.tetrisArr[3] = [ 
 [0,this.cellCol,this.cellCol+1,this.cellCol*2+1], 
 [this.cellCol,this.cellCol+1,this.cellCol*2-1,this.cellCol*2] 
 ]; 
 /* 
 0,14,15,29 
 14,15,30,31 
 */ 
 this.tetrisArr[4] = [ 
 [0,this.cellCol-1,this.cellCol,this.cellCol*2-1], 
 [this.cellCol-1,this.cellCol,this.cellCol*2,this.cellCol*2+1] 
 ]; 
 /* 
 0,14,15,16 
 0,15,16,30 
 14,15,16,30 
 0,14,15,30 
 */ 
 this.tetrisArr[5] = [ 
 [0,this.cellCol-1,this.cellCol,this.cellCol+1], 
 [0,this.cellCol,this.cellCol+1,this.cellCol*2], 
 [this.cellCol-1,this.cellCol,this.cellCol+1,this.cellCol*2], 
 [0,this.cellCol-1,this.cellCol,this.cellCol*2] 
 ]; 
 /* 
 0,15,30,45 
 14,15,16,17 
 */ 
 this.tetrisArr[6] = [ 
 [0,this.cellCol,this.cellCol*2,this.cellCol*3], 
 [this.cellCol-1,this.cellCol,this.cellCol+1,this.cellCol+2] 
 ]; 
 this.tetrisType = [1,1]; 
 this.tetrisType = [1,0]; 
 this.tetrisTypeArr = []; 
 
 this.preTetris = []; 
 this.thisTetris = []; 
 this.fullArr = []; 
 
 this.start(); 
 } 
 Tetris.prototype = { 
 //开始入口函数 
 start : function(){ 
 this.init(); 
 this.menu(); 
 this.control(); 
 }, 
 //选择设置 
 setOptions : function(options){ 
 this.score = options.score === 0 ? options.score 
 : (options.score || this.score); 
 this.level = options.level === 0 ? options.level 
 : (options.level || this.level); 
 }, 
 resetArea : function(){ 
 $(".play_cell.active").removeClass("active"); 
 this.setOptions({ 
 "score" : 0 
 }); 
 this.e.playScore.html(this.score); 
 }, 
 //菜单 
 menu : function(){ 
 var self = this; 
 this.e_startBtn.click(function(){ 
 self.e_levelMenu.hide(); 
 if(self.playing){ 
 self.pause(); 
 } else if(self.death){ 
 self.resetArea(); 
 self.play(); 
 } else { 
 self.play(); 
 } 
 }); 
 this.e_levelBtn.click(function(){ 
 if(self.playing)return; 
 self.e_levelMenu.toggle(); 
 }); 
 this.e_levelMenu.find("a").click(function(){ 
 self.e_levelMenu.hide(); 
 self.e_levelBtn.find(".level_text").html($(this).html()); 
 self.setOptions({ 
 "level" : $(this).attr("level") 
 }); 
 }); 
 }, 
 play : function(){ 
 var self = this; 
 this.e_startBtn.html("暂停"); 
 this.playing = true; 
 this.death = false; 
 if(this.turning){ 
 this.timer = setInterval(function(){ 
 self.offsetRow++; 
 self.showTetris(); 
 },this.interval[this.level]); 
 } else { 
 this.nextTetris(); 
 } 
 }, 
 pause : function(){ 
 this.e_startBtn.html("开始"); 
 this.playing = false; 
 clearTimeout(this.timer); 
 }, 
 //初始化游戏 
 init : function(){ 
 var self =this,_ele,_miniEle,_arr = []; 
 //创建小方块放进cellArr里 
 for(var i=0;i<this.cellCol;++i){ 
 for(var j=0;j<this.cellRow;++j){ 
 _ele = document.createElement("div"); 
 _ele.className = "play_cell"; 
 _ele.id = "play_cell_"+ i + "_" + j; 
 this.cellArr.push($(_ele)); 
 this.e_playArea.append(_ele); 
 } 
 } 
 //创建下一个图形的小方块 
 for(var m=0;m<16;++m){ 
 _miniEle = document.createElement("div"); 
 _miniEle.className = "play_mini_cell"; 
 this.miniCellArr.push($(_miniEle)); 
 this.e_nextType.append(_miniEle); 
 } 
 //保存三维数组tetrisArr的前两维数据编号，k为其第一维编号，j为其二维 
 for(var k=0,klen=this.tetrisArr.length;k<klen;++k){ 
 for(var j=0,jlen=this.tetrisArr[k].length;j<jlen;++j){ 
 this.tetrisTypeArr.push([k,j]); 
 } 
 } 
 //下一个图形的【x】【y】 
 this.nextType = this.tetrisTypeArr[Math.floor(this.tetrisTypeArr.length*Math.random())]; 
 this.showNextType(); 
 }, 
 //按键控制函数 
 control : function(){ 
 var self = this; 
 $("html").keydown(function(e){ 
 if(!self.playing) 
 return !self.playing; 
 switch(e.keyCode){ 
 case 37: 
 self.direction = "left"; 
 break; 
 case 38: 
 self.direction = "top"; 
 break; 
 case 39: 
 self.direction = "right"; 
 break; 
 case 40: 
 self.direction = "bottom"; 
 break; 
 default: 
 return; 
 break; 
 } 
 //显示当前的按键操作 
 self.e_playDirection.html(self.direction); 
 //实行按键的操作函数 
 self.drive(); 
 return false; 
 }); 
 }, 
 //改变图形的状态 
 changTetris : function(){ 
 var _len = this.tetrisArr[this.tetrisType[0]].length; 
 if(this.tetrisType[1] < _len-1){ 
 this.tetrisType[1]++; 
 } else { 
 this.tetrisType[1] = 0; 
 } 
 }, 
 //按键的操作函数 
 drive : function(){ 
 switch(this.direction){ 
 case "left": 
 if(this.offsetCol>0){ 
 this.offsetCol--; 
 } 
 break; 
 case "top": 
 this.changTetris(); 
 break; 
 case "right": 
 this.offsetCol++; 
 break; 
 case "bottom": 
 if(this.offsetRow<this.cellRow-2){ 
 this.offsetRow++; 
 } 
 break; 
 default: 
 break; 
 } 
 //显示图形的函数 
 this.showTetris(this.direction); 
 }, 
 //显示图形的函数 
 showTetris : function(dir){ 
 var _tt = this.tetrisArr[this.tetrisType[0]][this.tetrisType[1]],_ele,self=this; 
 this.turning = true; 
 this.thisTetris = []; 
 for(var i=_tt.length-1;i>=0;--i){ 
 _ele = this.cellArr[_tt[i]+this.offsetCol+this.offsetRow*this.cellCol]; 
 //规定左右移动不能超出边框 
 if(this.offsetCol<7&&(_tt[i]+this.offsetCol+1)%this.cellCol==0){ 
 this.offsetCol++; 
 return; 
 }else if(this.offsetCol>7&&(_tt[i]+this.offsetCol)%this.cellCol==0){ 
 this.offsetCol--; 
 return; 
 } 
 //判断是否下落是与方块碰撞了，排除向左移动时碰到左边的方块而停止下落 
 if(_ele&&_ele.hasClass("active")&&dir=="left"&&($.inArray(_ele,this.preTetris)<0)){ 
 if(($.inArray(_ele,this.cellArr)-$.inArray(this.preTetris[i],this.cellArr))%this.cellCol!=0){ 
 this.offsetCol++; 
 return; 
 } 
 } 
 if(_ele&&_ele.hasClass("active")&&dir=="right"&&($.inArray(_ele,this.preTetris)<0)){ 
 if(($.inArray(_ele,this.cellArr)-$.inArray(this.preTetris[i],this.cellArr))%this.cellCol!=0){ 
 this.offsetCol--; 
 return; 
 } 
 } 
 //找到某个div进行下落的过程 
 //否则找不到直接结束下落的过程 
 if(_ele){ 
 //找到一个div有class=active，而且不是上一次自身的位置，那么就停止 
 //向下走了，因为遇到障碍物了 
 //否则这个div符合，存起来 
 if(_ele.hasClass("active")&&($.inArray(_ele,this.preTetris)<0)){ 
 this.tetrisDown(); 
 return; 
 } else { 
 this.thisTetris.push(_ele); 
 } 
 } else if(this.offsetRow>0){ 
 this.tetrisDown(); 
 return; 
 } 
 } 
 //将上一次的位置的标记全部去除 
 for(var j=0,jlen=this.preTetris.length;j<jlen;++j){ 
 this.preTetris[j].removeClass("active"); 
 } 
 //标记这一次的位置 
 for(var k=0,klen=this.thisTetris.length;k<klen;k++){ 
 this.thisTetris[k].addClass("active"); 
 } 
 //储存起现在的位置，会成为下一次的前一次位置 
 this.preTetris = this.thisTetris.slice(0); 
 }, 
 //无法下落时进行的函数 
 tetrisDown : function(){ 
 clearInterval(this.timer); 
 var _index; 
 this.turning = false; 
 //是否填充满一行的检测 
 forOuter:for(var j=0,jlen=this.preTetris.length;j<jlen;++j){ 
 _index = $.inArray(this.preTetris[j],this.cellArr); 
 for(var k=_index-_index%this.cellCol,klen=_index-_index%this.cellCol+this.cellCol;k<klen;++k){ 
 if(!this.cellArr[k].hasClass("active")){ 
 continue forOuter; 
 } 
 } 
 if($.inArray(_index-_index%this.cellCol,this.fullArr)<0) 
 this.fullArr.push(_index-_index%this.cellCol); 
 } 
 if(this.fullArr.length){ 
 this.getScore(); 
 return; 
 } 
 //如果图形在6-9的div内被标记，那么游戏结束 
 for(var i=6;i<9;++i){ 
 if(this.cellArr[i].hasClass("active")){ 
 this.gameOver(); 
 alert("you lost!"); 
 return; 
 } 
 } 
 this.nextTetris(); 
 }, 
 //下一个图形 
 nextTetris : function(){ 
 var self = this; 
 clearInterval(this.timer); 
 this.preTetris = []; 
 this.offsetRow = -2; 
 this.offsetCol = 7; 
 this.tetrisType = this.nextType; 
 this.nextType = this.tetrisTypeArr[Math.floor(this.tetrisTypeArr.length*Math.random())]; 
 this.showNextType(); 
 this.timer = setInterval(function(){ 
 self.offsetRow++; 
 self.showTetris(); 
 },this.interval[this.level]); 
 }, 
 showNextType : function(){ 
 //_nt为找到在this.nextType[0]行，this.nextType[1]列的一行数据 
 var _nt = this.tetrisArr[this.nextType[0]][this.nextType[1]],_ele,_index; 
 //找到class=active的元素，之后全部删除class元素 
 this.e_nextType.find(".active").removeClass("active"); 
 for(var i=0,ilen=_nt.length;i<ilen;++i){ 
 //因为offsetCol的最小值只能为2，所以在tetrisArr数组中赋的值都减了2 
 //这里要加回2来处理，才能在小的视图里安放图形 
 if(_nt[i]>this.cellCol-2){ 
 _index = (_nt[i]+2)%this.cellCol-1+4*parseInt((_nt[i]+2)/this.cellCol); 
 }else{ 
 _index = _nt[i] + 1; 
 } 
 _ele = this.miniCellArr[_index]; 
 _ele.addClass("active"); 
 } 
 }, 
 //获取分数 
 getScore : function(){ 
 var self = this; 
 //对完整的行消除，对元素进行向下移动 
 for(var i=this.fullArr.length-1;i>=0;--i){ 
 for(var j=0;j<this.cellCol;++j){ 
 this.cellArr[j+this.fullArr[i]].removeClass("active"); 
 if(j==this.cellCol-1){ 
 for(var k=this.fullArr[i];k>=0;--k){ 
 if(this.cellArr[k].hasClass("active")){ 
  this.cellArr[k].removeClass("active"); 
  this.cellArr[k+this.cellCol].addClass("active"); 
 } 
 } 
 } 
 } 
 } 
 this.score += this.levelScore[this.level]*this.doubleScore[this.fullArr.length-1]; 
 this.e_playScore.html(this.score); 
 this.fullArr = []; 
 this.nextTetris(); 
 }, 
 //游戏结束 
 gameOver : function(){ 
 this.death = true; 
 this.pause(); 
 return; 
 } 
 }; 
 $(document).ready(function(e){ 
 var t = new Tetris(); 
 }); 
 </script>

源码下载：http://xiazai.kunjuke.com/201610/yuanma/js-html5els(kunjuke.com).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

  • Java俄罗斯方块小游戏
  • Linux下用C++实现俄罗斯方块
  • C++俄罗斯方块游戏 无需图形库的俄罗斯方块
  • JS俄罗斯方块，包含完整的设计理念
  • shell脚本编写的俄罗斯方块游戏代码
  • JS 俄罗斯方块完美注释版代码
  • 用Python编写一个简单的俄罗斯方块游戏的教程
  • javascript实现俄罗斯方块游戏的思路和方法
  • 一个MIDP俄罗斯方块游戏的设计和实现
  • 60行js代码实现俄罗斯方块

《js html5 css俄罗斯方块游戏再现.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!