欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

俄罗斯方块游戏

程序员文章站 2024-03-18 19:51:10
...

俄罗斯方块游戏

俄罗斯方块游戏

一,游戏结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html,body{
				height: 100%;
				overflow: hidden;
			}
			*{
				margin:0px;
				padding: 0px;
				
			}
			.wrap{
				width: 300px;
				height: 500px;
				background: black;
				margin: 100px auto;
				position: relative;
			}
			.square{
				width: 20px;
				height: 20px;
				background: #fff;
				position: absolute;
				border: 3px solid red;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
		</div>
	</body>
</html>
<script src="js/俄罗斯方块01.js"></script>

二,游戏脚本

/*
 俄罗斯方块的所有形状均在4*4的矩阵内,皆从0*0开始
 * */

//function rnd(min,max)
function ForinGame(){
	this.wrap=document.querySelector(".wrap");//获取形状容器
	this.count=1;
	this.rightSwitch=false;
	this.shaps=[
	//奇数下标是Y,偶数小标是X
	    //直线条
	    [0,0,1,0,2,0,3,0],
	    //Z线条
	    [0,0,1,0,1,1,2,1],
	    //T线条
	    [0,0,1,0,2,0,1,1,],
	    //田线条
	    [0,0,1,0,0,1,1,1]
	]
	
	this.initShape=function(){
		var Index=Math.floor(Math.random()*4);
		for(var i=0;i<this.shaps[Index].length/2;i++){
			 var oS=document.createElement("span");
			     oS.id="new";
			     oS.classList.add("square");
			     oS.style.left=this.shaps[Index][2*i]*20+"px";
			     oS.style.top=this.shaps[Index][2*i+1]*20+"px";
			     this.wrap.appendChild(oS);
		}
		this.dropMove()
	}
	this.dropMove=function(){
		var isEnd=false;
		var timer=setInterval(function(){
			var all=document.querySelectorAll('#new');
			var old=document.querySelectorAll("#old");//选取已经停下的方块
			  if(old.length>=1){//下落过程中碰到其它方块停下
				  	for(var i=0;i<old.length;i++){
						  
				  		  for(var j=0;j<all.length;j++){
				  		  	  if(all[j].offsetLeft==old[i].offsetLeft && all[j].offsetTop==old[i].offsetTop-20){
				  		  	  	   clearInterval(timer);
				  		  	  	   this.emidtId();
				  		  	  	   this.initShape();
				  		  	  	   return;
				  		  	  }
						  	
				  		  }
				  	}
			  	
			  }
			
			all.forEach(function(item){
				item.style.top=item.offsetTop+20+"px";
				if(item.offsetTop>=this.wrap.clientHeight-20){
					this.emidtId();
					clearInterval(timer);
					isEnd=true;
				}
				
			}.bind(this));
			
			if(isEnd){
				isEnd=false;
				this.initShape();
				
			}
			
		}.bind(this),500)
	}
	this.emidtId=function(){
		var all=document.querySelectorAll('#new');
		all.forEach(function(item){
			  item.id="old"
		})
	}
	this.toggleShap=function(){
		var all=document.querySelectorAll('#new');
		var Index=Math.floor(Math.random()*4);
		var currentShap=this.shaps[Index];
		var initTop=all[0].offsetTop;
		var initLeft=all[0].offsetLeft;
		for(var i=0;i<all.length;i++){
			 all[i].style.left=currentShap[2*i]*20+initLeft+"px";
		     all[i].style.top=currentShap[2*i+1]*20+initTop+"px";
		}
//		 all[i].style.left=currentShap[2*i]*20+"px";
//	     all[i].style.top=all[i].offsetTop+"px";
	}
	this.toRight=function(){
		var all=document.querySelectorAll('#new');
		console.log(all.length)
		if(!this.rightSwitch){
			this.rightSwitch=false;
			all.forEach(function(item){
				    item.style.left=item.offsetLeft+20+"px";
					if(item.offsetLeft>=this.wrap.clientWidth-20){//最右边一列已经碰到边界\n
						this.rightSwitch=true;
					}
				
				}.bind(this));
		}
	}
	this.toRightLimit=function(){
		   var all=document.querySelectorAll('#new');
		   all.forEach(function(item){
		   	
		   })
	}
}

var game=new ForinGame();
game.initShape();
document.onkeyup=function(ev){
	var ev=ev||event;
	switch (ev.keyCode){
		case 37:
			break;
		case 39:
		    game.toRight();
			break;
		case 40:
			break;
		case 13:
		    game.toggleShap();
			break;
	}

}

三,游戏备注

  1. 此游戏仅用于学习,培养游戏开发能力
  2. 关于图形变换的思想参考上图