图片 1

创意俄罗斯方块

首先这里感谢@jdkleo
提出的宝贵建议!说实在的吧,我这个俄罗斯方块大家玩起来别骂我就万岁了,还没完全完成的,只完成了50%,而且还有很多BUG。可以实现的功能:1.掉方块2.随机生成新方块3.方块移动。目前BUG还很多,由于是第一次写这么“大”的游戏,有1000多行代码,所以还请高人指点,BUG太多了。按START开始游戏。大家提提建议,我第一次写JS游戏。参考了一下网上其他人的代码,但是不是照抄。代码可以直接运行,不用引用JQUERY。希望大神们能给点建议!!!!不甚感激!!!

版权声明:访问者可将本网站提供的内容或服务用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯本网站及相关权利人的合法权利。除此以外,将本网站任何内容或服务用于其他用途时,须征得本网站及相关权利人的书面许可,并支付报酬。转载需表明文章地址。

Ver
0.2版本已经出来了哦,最新的代码:此次修正的东西:1.左边右边可以移动。2.可以旋转3.可以消除满行的方块。

本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站,予以删除。

无标题文档 #test{ /*width:25px;*/} .t{width:10px;height:10px;border:1px solid black;float:left; } body{ margin:0 auto; width:1000px; height:600px; } /*游戏相关*/#startGame{ } #lines{ } #level{ } #time{ } /*俄罗斯方块实体类*/#tetris-area{ width:auto; height:auto; background:blue;} /*JS生成的CLASS,俄罗斯方块实体*/#tetris .block0,#tetris .block1, #tetris .block2, #tetris .block3,#tetris .block4,#tetris .block5,#tetris .block6{ z-index:1000; font-size:10px; line-height:1em; position:absolute; width:13px; height:13px; border:0.5px solid red; background:#000;} //2维数组,用来存放俄罗斯方块的坐标 var xYAxis=[];xYAxis.push; //alert; //复制节点/*$.ready { for { if.append; //加上换行符 } $.appendTo; } //动态得到test的宽度,包含两边的边框BORDER $.width*2+1);});*///获得区域的横坐标和纵坐标function getArea{ this.x=x; this.y=y; this.unit=unit; //每个单元的大小,单位为像素 this.el=document.getElementById; //得到ID对象 this.board=[]; //面板,即在区域范围内的元素 /*创建2D范围矩阵*/ for { this.board.push; for { this.board[y].push; } } /*从2D矩阵中消除元素*/ this.destroy=function() { for(var y=0;y<this.board.length;y++) { for(var x=0;x<this.board[y].length;x++) { if { this.el.removeChild; this.board[y][x]=0; } } } } //添加元素 this.addElement=function { //得到起始元素的X开始坐标和Y开始坐标的位置 //得到X坐标的下落次数,和Y轴的左右移动的次数 var xBegin=parseInt; var yBegin=parseInt; if(xBegin>=0&&xBegin<=this.x&&yBegin>=0&&yBegin<=this.y) { this.board[yBegin][xBegin]=el; //确定元素的位置 } } //消掉所有的行 this.removeFullLines=function() { var lines=0; for(var i=this.y-1;i>0;i--) { if { this.removeLines; lines++; y++; } } return lines; //返回线条 } //和线性有关的东西 this.linesRelated=function { for { if{return false;} //如果不为0的话,那么菜返回FALSE } return true; }; //去掉行 this.removeLines=function { for { this.el.removeChild; this.board[y][x]=0; } y--; for { /*今天暂时写到这里*/ /*继续于2014-12-21*/ for { if { var el=this.board[y][x]; el.style.top=el.offsetTop+this.unit+"px"; this.board[y+1][x]=el; this.board[y][x]=0; } } } }; //活动区域 this.getBlock=function{return 0;} if { return this.board[y][x]; } else { throw "Area get failed!"; } }} /*俄罗斯方块实体类*/function Tetris(){ var self =this; //自身 var operate=null; this.area=null; this.operate=null; //操作 this.status=new State(); //新建状态 /*初始化X,Y,单元为5或者20*/ this.x=20; this.y=20; this.unit=20; this.running=null; //是否在运行中 //俄罗斯方块实体ID this.; /*开始的时候暂停是FALSE的*/ this.paused=false; //开始游戏 this.start=function; //重新开始游戏 self.status.start(); this.area=new getArea(this.x,this.y,this.unit,"tetris-area"); //获得Area对象 ,其中TEMPID是俄罗斯方块实体类ID this.operate=new OperateTetris; //是否可以替换 if(this.operate.mayPlace; this.operate.place(); } else { self.gameOver(); } } //游戏结束 this.gameOver=function() { self.status.stopGame(); //停止游戏 self.operate.stopGame(); //操作类停止游戏 } /*重置游戏*/ this.reset=function { self.operate.destroy(); //重新开始 self.operate=null; } if { self.area.destroy(); self.area=null; } //隐藏游戏结束 document.getElementById.style.display="none"; document.getElementById.style.display="block"; //下一个操作 document.getElementById.style.display="block"; //显示按键 self.status.reset(); self.paused=false; document.getElementById.style.display="block"; //暂停按钮 } /*暂停游戏*/ this.pause=function() { if { return ; } if { self.operate.running=true; /*这里还没写完2014-12-22*/ } else { } } //上 this.up=function() { if(self.operate&&self.operate.isRunning()&&!self.operate.isStopped { if(self.operate.mayRotate { self.operate.rotate(); self.status.setActions(self.status.getActions; } } } //下 this.down=function() { if(self.operate&&self.operate.isRunning()&&!self.operate.isStopped { if(self.operate.mayMoveDown { self.operate.moveDown(); self.status.setActions(self.status.getActions; } } } //左 this.left=function() { if(self.operate&&self.operate.isRunning()&&!self.operate.isStopped { if(self.operate.mayMoveLeft { self.operate.moveLeft(); self.status.setActions(self.status.getActions; } } } //右 this.right=function() { if(self.operate&&self.operate.isRunning()&&!self.operate.isStopped { if(self.operate.mayMoveRight { self.operate.moveRight(); self.status.setActions(self.status.getActions; } } } //开始游戏 document.getElementById.onclick=function};//} //Tetris是一个整体类,里面包含了很多方法。 var keyboard=new Keyboard(); //创建键盘类实体 keyboard.set(keyboard.n,this.start); keyboard.set; keyboard.set(keyboard.down,this.down); keyboard.set(keyboard.left,this.left); keyboard.set(keyboard.right,this.right); document.onkeydown=keyboard.event; //按下按键按钮的事件 /*键盘操作方法*/function Keyboard(){ this.up=38; //上 this.down=40; //下 this.left=37; //左 this.right=39; //右 this.n=78; this.p=80; this.r=82; this.space=32; //空格 this.f12=123; this.escape=27; //退格键 this.keys=[]; //键位集合 this.funcs=[]; var self=this; //设置键位 this.set=function { this.keys.push; this.funcs.push; } this.event=function{e=window.event;} for(var i=0;i<self.keys.length;i++) { if(e.keyCode==self.keys[i]) { self.funcs[i](); } } } } //具体的操作类function OperateTetris{ var self=this; //当前对象 this.area=area; this.tetris=tetris; this.types=null; //方块的类型; this.nextType=null; //下一个类型 //初始化X和Y this.x=null; this.y=null; this.position=0; //初始位置 this.board=[]; //用来填充HTML元素的 this.elements=[]; this.nextElements=[]; //下一个元素 this.running=null; //是否在运行中 this.stopped=null; //是否停止 this.fallDownId=null; //往下掉落的 this.speed=null; //速度 /*方块的组合方式,用数组进行组合 用0,1表示是否有方块存在,如果是0:不存在,1:存在, 以下的逻辑就可以非常的清楚了。*/ this.blockComplex=[ [ [0,0,1],[1,1,1],[0,0,0] //_| ], [ [1,0,0],[1,1,1],[0,0,0] //L ], [ [0,1,0],[1,1,1],[0,0,0] //T ], [ [0,0,0],[1,1,1],[0,0,0] //-- ], [ [0,0,0],[0,1,1],[0,1,1] //口 ], [ [0,1,1],[0,1,0],[1,1,0] //Z ] ]; this.stopGame=function() { this.running=false; } /*一连串的GETTER方法 分别是速度,X,Y轴,运行和停止的GETTER方法*/ this.getSpeed=function() { return this.speed; } this.getX=function() { return this.x; } this.getY=function() { return this.y; } this.isRunning=function() { return this.running; } this.isStopped=function() { return this.stopped; } //重置 this.reset=function() { if { clearTimeout; //下落的时候去掉时间间隔 } this.types=this.nextType; this.nextType=random(this.blockComplex.length); this.position=0; this.board=[]; this.elements=[]; this.x=null; this.y=null; this.speed=200; //速度暂定为51 this.running=false; this.stopped=false; //移除下一个元素 for(var i=0;i<this.nextElements.length;i++) { document.getElementById.removeChild; } this.nextElements=[]; //下一个元素 } //下一个类型,随机抽取 this.nextType=random(this.blockComplex.length); //重置 this.reset(); /*判断是否替换*/ this.mayPlace=function() { var isOperate=this.blockComplex[this.types]; /*area开始的坐标原点*/ var areaStartX=parseInt(this.area.x-isOperate[0].length); var areaStartY=1; var lineFound=false; var lines=0; for(var y=isOperate.length-1;y>=0;y--) { for(var x=0;x<isOperate[y].length;x++) { if { lineFound=true; if(this.area.getBlock(areaStartY,areaStartX+x)) {return false;} } } if { lines++; } if { break; } } return true; } /*替换*/ this.place=function() { //初始化 var operate=this.blockComplex[this.types]; //区域开始X轴的位置 var AreaXStartPos=parseInt(this.area.x-operate[0].length); //区域开始Y轴的位置 //var AreaYStartPos=parseInt(this.area.y-operate[0]); var AreaYStartPos=1; //因为X轴的位置可能变化,而Y轴总是从最上面下来的,所以是1 this.x=AreaXStartPos; //把新的位置赋给X; this.y=AreaYStartPos; //把新的位置赋给y; //构建空对象,并存入BOARD /*y:行,x:列*/ //alert(operate[0].length+" "+operate.length); this.board=this.createEmpty(operate[0].length,operate.length); /*线条,往下掉落,初始化*/ var lines=0; var foundLines=false; //循环遍历,先遍历行,每一行再来遍历列 for(var yAxis=operate.length-1;yAxis>=0;yAxis--) { for(var xAxis=0;xAxis<=operate[yAxis].length;xAxis++) { if(operate[yAxis][xAxis]) { var el=document.createElement; el.className="block"+this.types; //确定这个元素的CLASSNAME //确定左边距和上边距 el.style.left=*this.area.unit+"px"; el.style.top=*this.area.unit+"px"; this.area.el.appendChild; //这个EL去APPEND主要的EL。 this.board[yAxis][xAxis]=el; this.elements.push; //推入elements中 } } /*个人感觉这个功能应该是加速往下掉落的方法?不明觉厉*/ if { yAxis--; } if { lines++; } } this.running=true; this.fallDownId=setTimeout(this.fallDown,this.speed); //间隔时间,掉落下的 var nextOperate=this.blockComplex[this.nextType]; for(var y=0;y<nextOperate.length;y++) { for(var x=0;x<nextOperate[y].length;x++) { //创建元素 if { /*先写到这里:2014-12-22*/ var el=document.createElement; el.className="block"+this.nextType; el.style.left=+"px"; el.style.top=+"px"; document.getElementById.appendChild; this.nextElements.push; //下一个元素 } } } } //创建空对象,即所有的都为0的对象,并返回对象 this.createEmpty=function { var elements=[]; for { elements.push; for { elements[y2].push; } } return elements; } //下落(这是一个最关键的函数,决定了这个游戏的成败) this.fallDown=function() { if { if { self.moveDown(); self.fallDownId=setTimeout(self.fallDown,self.speed); //下落的间隔时间 } else { for(var i=0;i<self.elements.length;i++) { self.area.addElement; } var lines=self.area.removeFullLines { /*这里到时候再写*/ self.tetris.status.setLines(self.tetris.status.getLines; } self.reset) { self.place(); } else { self.tetris.gameOver(); } } } else { } } //是否可以旋转俄罗斯方块 this.mayRotate=function() { for(var y=0;y<this.board.length;y++) { for(var x=0;x<this.board[y].length;x++) { if { /新的X,Y的值/ var newY=this.getY()+this.board.length-1-x; var newX=this.getX()+y; if{return false;} if{return false;} if{return false;} if(this.area.getBlock{return false;} //获得区域 } } } return true; } //旋转俄罗斯方块 this.rotate=function() { var puzzle=this.createEmpty(this.board.length,this.board[0].length); //创建一个空的矩阵 for(var y=0;y<this.board.length;y++) { for(var x=0;x<this.board[y].length;x++) { //旋转,X轴和Y轴的坐标互换 if { var newY=puzzle.length-1-x; var newX=y; var el=this.board[y][x]; //旋转前的对象 var moveY=newY-y; var moveX=newX-x; //长度是offsetTop或left加上偏移量 el.style.left=el.offsetLeft++"px"; el.style.top=el.offsetTop++"px"; puzzle[newY][newX]=el; } } } this.board=puzzle; } //下落方法 this.mayMoveDown=function() { for(var y=0;y<this.board.length;y++) { for(var x=0;x<this.board[y].length;x++) { if { if+y+1>=this.area.y){this.stopGame=true;return false;} //如果触底,那么就停止游戏 if(this.area.getBlock+y+1,this.getX{this.stopGame=true;return false;} } } } return true; } //下落 this.moveDown=function() { //用一个循环去控制下落 for(var i=0;i<this.elements.length;i++) { this.elements[i].style.top=this.elements[i].offsetTop+this.area.unit+"px"; } this.y++; } this.mayMoveLeft=function*/ for(var y=0;y<this.board.length;y++) { for(var x=0;x<this.board[y].length;x++) { if { if { return false; } if(this.area.getBlock+y,this.getX{return false;} } } } return true; } //向左移动 this.moveLeft=function*/ for(var i=0;i<this.elements.length;i++) { this.elements[i].style.left=this.elements[i].offsetLeft-this.area.unit+"px"; } this.x--; } /*是否可以向右移动*/ this.mayMoveRight=function() { for(var y=0;y<this.board.length;y++) { for(var x=0;x<this.board[y].length;x++) { if { if+1+x>=this.area.x){return false;} if(this.area.getBlock+y,this.getX{return false;} } } } return true; } /*向右移动*/ this.moveRight=function() { for(var i=0;i<this.elements.length;i++) { this.elements[i].style.left=this.elements[i].offsetLeft+this.area.unit+"px"; } this.x++; } /*摧毁方法*/ this.destroy=function() { for(var i=0;i<this.elements.length;i++) { this.area.el.removeChild; } this.elements=[]; this.board=[]; this.reset(); }} /*俄罗斯方块状态*/function State(){ /*初始化*/ this.level; this.time; this.score; this.opeate; this.lines; this.apm; //不明觉厉 this.actions; //动作 this.el= { "lines":document.getElementById, "level":document.getElementById, "time":document.getElementById, "apm":document.getElementById, "operate":document.getElementById } this.timeId=null; var self=this; //开始游戏 this.start=function; //重置 this.timeId=setInterval; } /*停止游戏*/ this.stopGame=function { clearInterval; } } //重置 this.reset=function; this.level=1; this.time=0; this.score=0 this.opeate=0; this.lines=0; /*以后可能加INNERHTML*/ this.el.level=this.level; this.el.time=this.time; this.el.score=this.score; this.el.operate=this.opeate; this.el.lines=this.lines; } //和SetInterval有关 this.incTime=function() { self.time++; self.el.time.innerHTML=self.time; //设置时间 self.actions=parseInt(self.actions/self.time)*60; this.el.apm.innerHTML=self.apm; } /*设置分数*/ this.setScore=function { this.score==i; this.el.score.innerHTML=this.score; } /*设置等级*/ this.setLevel=function { this.level=i; this.el.level.innerHTML=this.level; //设置内部HTML }; this.getLevel=function() { return this.level; } //线条的SETTER方法 this.setLines=function { this.lines=i; this.el.lines.innerHTML=this.lines; } this.getLines=function() { return this.lines; } //设置动作 this.setActions=function { this.actions=i; //this.el.actions.innerHTML=this.actions; } this.getActions=function() { return this.actions; } //设置apm this.setApm=function { this.apm=i; this.el.apm.innerHTML=this.apm; } this.getApm=function() { return this.apm; } //控制下落操作的类 this.setOperate=function { this.opeate=i; this.el.operate=this.operate; } this.getOperate=function() { return this.opeate; } } //随机数,产生1~6的function random{ return Math.floor;} } /*Tetris是一个整体类,里面包含了很多方法*/            Game Over             var tx=new Tetris(); tx.x=12; tx.y=22; tx.unit=14; //tx.start(); //开始游戏 

作者QQ:1765813715

项目git地址:

由于这个游戏倾入了我大量的时间和创意
所以写了个版权声明

项目演示地址:

这个游戏在基础的俄罗斯方块上面还添加了
两种方块

以上所述就是本文的全部内容了,希望能够对大家学习javascript有所帮助。

一种是幽灵方块
(可以在方块间任意移动 直到它所在的这一列下面没有空)

另一种是 炸弹方块
(他可以在激活和非激活中转换,激活时到达底部后会清除周围3*3的方块
非激活就和普通方块没有什么区别

第一次用WindowsApi写游戏
注释很多。 也查了很多资料

Windows窗口的创建以后我在写一个详细的
这里我就直接从CALLBACK WndProc
开始讲解我的程序结构了

图片 1

下面讲解每一个函数