俄罗斯方块游戏
程序员文章站
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;
}
}
三，游戏备注
- 此游戏仅用于学习，培养游戏开发能力
- 关于图形变换的思想参考上图
上一篇： java实现五子棋游戏GUI