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

这个游戏主要分为三部份，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";//定时器的IDthis.timer = null;//定时器的时间数组this.interval = [600,300,100];//等级的分数数组this.levelScore = [10,20,40];//消除的行数多少而给的倍数this.doubleScore = [1,4,10,20];//默认等级1this.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,160,1,15,16*/this.tetrisArr[0] = [[0,1,this.cellCol,this.cellCol+1],[0,1,this.cellCol,this.cellCol+1]];/*1,14,15,160,15,30,3114,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,160,1,15,3014,15,16,310,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,3115,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,2914,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,160,15,16,3014,15,16,300,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,4514,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.jb51.net/201610/yuanma/js-html5els（jb51.net）.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。