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

这个游戏主要分为三部份，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.jb51.net/201610/yuanma/js-html5els(jb51.net).rar

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索js
， css
， html5
俄罗斯方块
javascript俄罗斯方块、俄罗斯方块技巧、神武俄罗斯方块技巧、拖动俄罗斯方块的技巧、冰冻俄罗斯方块技巧，以便于您获取更多的相关知识。

时间： 2024-09-28 13:40:05

js html5 css俄罗斯方块游戏再现_javascript技巧的相关文章

动态加载js、css的实例代码_javascript技巧

一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

JS批量操作CSS属性详细解析_javascript技巧

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type="text/css">        .day        {         background-color:White;        }        .nig

js HTML5 Canvas绘制转盘抽奖_javascript技巧

本文实例为大家分享了js转盘抽奖的具体代码,供大家参考,具体内容如下 1.实现的基本效果   2.主要的内容  •html5中canvas标签的使用  •jQueryRotate.js旋转插件 3.主要html代码 <body> <div class="content"> <div class="wheel"> <canvas class="item" id="wheelCanvas"

用js实现CSS圆角生成更新_javascript技巧

用js生成任意圆角,下一步就是加入直角导角,圆角导外,外圆角导个,还有边框处理,阴影生成,还有柔化处理都是以后的重点和难点. 中工工基 人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压 械夺棋栽夺苛夺棋地花样百出地模压械夺棋栽夺中工工基 人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压 械夺棋栽夺苛夺棋地花样百出地模压械夺棋栽夺 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

require.js+vue开发微信上传图片组件_javascript技巧

由于项目是thinkPHP做后端框架,一直以来都是多页面的后端路由,想使用火热的webpack有点无从下手(原谅我太菜,而且推广vue只有我一个人--),没办法,想把vue用起来,唯有在原来的基础上改进.使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件,这样每一个组件就是一个 .vue 文件,哪里用上这个组件就引入进来,维护起来确实很爽.然而一直以来项目用的都是require.js,那又想以这样的形式来组织vue组件,还要加上vue-router和vue-resou

ASP.NET MVC中使用Bundle打包压缩js和css的方法_实用技巧

在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B

高性能web开发 如何加载JS，JS应该放在什么位置？_javascript技巧

外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容. 有人会问:为什么JS不能像CSS.image一样并行下载了?这里需要简单介绍一下浏览器构造页面的原理, 当浏览器从服务器接收到了HTML文档,并把HTML在内存中转换成DOM树,在转换的过程中如果发现某个节点(node)上引用了CSS或者IMAGE,就会再发1个request去请求CSS或image,然后继续执行下面的转换,

动态载入/删除/更新外部 JavaScript/Css 文件的代码_javascript技巧

动态载入 JavaScript/Csss 文件 传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在<head>标签里面进行添加: 复制代码 代码如下: <head> <script type="text/javascript" src="myscript.js"></script> <link rel="stylesheet" type="te

php使用gzip压缩传输js和css文件的方法_php技巧

本文实例讲述了php使用gzip压缩传输js和css文件的方法.分享给大家供大家参考.具体如下: <?php /** * 完整调用示例: * 1.combine.php?t=j&b=public&fs=jslib.jquery,function * * 该例子调用的是网站根目录下的public/jslib/jquery.js和public/function.js * * 2.combine.php?t=j&fs=jslib.jquery,function * * 该例子调用的