原生JavaScript编写俄罗斯方块

时间：2021-05-25

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

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

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://plex[this.nextType]; for(var y=0;y<nextOperate.length;y++) { for(var x=0;x<nextOperate[y].length;x++) { //创建元素 if(nextOperate[y][x]) { var el=document.createElement("div"); el.className="block"+this.nextType; el.style.left=(x*this.area.unit)+"px"; el.style.top=(y*this.area.unit)+"px"; document.getElementById("next_operate").appendChild(el); this.nextElements.push(el); //下一个元素 } } } } //创建空对象,即所有的都为0的对象,并返回对象 this.createEmpty=function(x,y) { var elements=[]; for(var y2=0;y2<y;y2++) { elements.push(new Array()); for(var x2=0;x2<x;x2++) { elements[y2].push(0); } } return elements; } //下落(这是一个最关键的函数，决定了这个游戏的成败) this.fallDown=function() { if(self.isRunning()) { if(self.mayMoveDown()) { self.moveDown(); self.fallDownId=setTimeout(self.fallDown,self.speed); //下落的间隔时间 } else { for(var i=0;i<self.elements.length;i++) { self.area.addElement(self.elements[i]); } var lines=self.area.removeFullLines(); if(lines) { self.tetris.status.setLines(self.tetris.status.getLines()+lines); } self.reset(); if(self.mayPlace()) { 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(this.board[y][x]) { /新的X,Y的值/ var newY=this.getY()+this.board.length-1-x; var newX=this.getX()+y; if(newY>this.area.y){return false;} if(newX<0){return false;} if(newX>=this.area.x){return false;} if(this.area.getBlock(newY,newX)){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(this.board[y][x]) { 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+(moveX*this.area.unit)+"px"; el.style.top=el.offsetTop+(moveY*this.area.unit)+"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(this.board[y][x]) { if(this.getY()+y+1>=this.area.y){this.stopGame=true;return false;} //如果触底，那么就停止游戏 if(this.area.getBlock(this.getY()+y+1,this.getX()+x)){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(this.board[y][x]) { if(this.getX()-1+x<0) { return false; } if(this.area.getBlock(this.getY()+y,this.getX()+x-1)){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(this.board[y][x]) { if(this.getX()+1+x>=this.area.x){return false;} if(this.area.getBlock(this.getY()+y,this.getX()+x+1)){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[i]); } 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("lines"), "level":document.getElementById("level"), "time":document.getElementById("time"), "apm":document.getElementById("apm"), "operate":document.getElementById("operate") } this.timeId=null; var self=this; //开始游戏 this.start=function() { this.reset(); //重置 this.timeId=setInterval(this.incTime,1500); } this.stopGame=function() { if(this.timeId) { clearInterval(this.timeId); } } //重置 this.reset=function() { this.stopGame(); this.level=1; this.time=0; this.score=0 this.opeate=0; this.lines=0; 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(i) { this.score==i; this.el.score.innerHTML=this.score; } this.setLevel=function(i) { this.level=i; this.el.level.innerHTML=this.level; //设置内部HTML }; this.getLevel=function() { return this.level; } //线条的SETTER方法 this.setLines=function(i) { this.lines=i; this.el.lines.innerHTML=this.lines; } this.getLines=function() { return this.lines; } //设置动作 this.setActions=function(i) { this.actions=i; //this.el.actions.innerHTML=this.actions; } this.getActions=function() { return this.actions; } //设置apm this.setApm=function(i) { this.apm=i; this.el.apm.innerHTML=this.apm; } this.getApm=function() { return this.apm; } //控制下落操作的类 this.setOperate=function(i) { this.opeate=i; this.el.operate=this.operate; } this.getOperate=function() { return this.opeate; } } //随机数,产生1~6的function random(i){ return Math.floor(Math.random()*i);} } </script> </head> <body> <div id="tetris"> <div id="test"> <div class="t"></div></div> <div id="rect"> <div class="r"> </div></div> <div id="tetris-area"> </div> <div id="next_operate"></div> <div id="game_over">Game Over</div> <div id="keys_Press"> </div> <input type="button" id="startGame" value="Start" /> <div id="lines"></div> <div id="level"></div> <div id="apm"></div> <div id="time"></div> <div id="operate"></div> <div id="tetris-pause"> </div> <div id="tetris-resume" style="display:none"> </div></div><script> var tx=new Tetris(); tx.x=12; tx.y=22; tx.unit=14; //tx.start(); //开始游戏</script> </body></html>

演示图：

项目git地址：
http://git.oschina.net/KMSFan/Tetris_Yang

项目演示地址：http://runjs.cn/detail/ggo07ery

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

原生JavaScript编写俄罗斯方块

相关文章

java代码实现俄罗斯方块

一款适用于Android平台的俄罗斯方块

C语言实现俄罗斯方块源代码

使用JS代码实现俄罗斯方块游戏

C# 实现俄罗斯方块（附源码）