用JavaScript寫的俄羅斯方塊小遊戲（很簡單，很詳細）
2021-02-27 12:00:25
效果
編寫外部框架
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width:320px;
height:450px;
position:absolute;
margin:0 auto;
left:0;
top:20px;
right:0;
bottom:0;
background:gray;
border-radius:10px;
}
#mainDiv{
width:300px;
height:400px;
position:absolute;
margin:0 auto;
left:0;
top:10px;
right:0;
bottom:0;
}
.bottom{
width:600px;
height:30px;
position:absolute;
bottom:1px;
right:1px;
}
.bottom .button1{
position: absolute;
right: 55px;
width: 50px;
font-size: 14px;
}
.bottom .button2{
position: absolute;
right: 5px;
width: 50px;
font-size: 14px;
}
.bottom .span1{
position: absolute;
right: 155px;
color: white;
font-size: 8px;
}
.bottom .span2{
position: absolute;
right: 255px;
color: white;
font-size: 8px;
}
</style>
</head>
<body>
<div id='box'>
<div id='mainDiv'>
</div>
<div class='bottom'>
<span id='score' class='span1'>分數：0</span>
<span id='time' class='span2'>時間：0</span>
<button onclick='start()' class='button1'>開始</button>
<button onclick='stop()' class='button2'>結束</button>
</div>
</div>
<script type="text/javascript" src='tetris.js'></script>
<script type="text/javascript">
</script>
</body>
</html>
效果：
新增內部畫布，以及繪製地圖
首先建立線的建構函式Line
function Line(ctx,o){
this.x=0,//x座標
this.y=0,//y座標
this.startX=0,//開始點x位置
this.startY=0, //開始點y位置
this.endX=0,//結束點x位置
this.endY=0;//結束點y位置
this.thin=false;//設定變細係數
this.ctx=ctx;
this.init(o);
}
Line.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}
Line.prototype.render=function(){
innerRender(this);
function innerRender(obj){
var ctx=obj.ctx;
ctx.save()
ctx.beginPath();
ctx.translate(obj.x,obj.y);
if(obj.thin){
ctx.translate(0.5,0.5);
}
if(obj.lineWidth){//設定線寬
ctx.lineWidth=obj.lineWidth;
}
if(obj.strokeStyle){
ctx.strokeStyle=obj.strokeStyle;
}
//劃線
ctx.moveTo(obj.startX, obj.startY);
ctx.lineTo(obj.endX, obj.endY);
ctx.stroke();
ctx.restore();
}
return this;
}設定引數、執行繪製等相關方法
function Game(el){
this.renderArr=[];//待渲染物件儲存陣列
this.aliveModel=[];//用來存到底的model組合
this.score=0;//分數
this.time=0;//時間
this.moveCount=1;//計時控制器
}
Game.prototype.init=function(el,score,time){
if(!el) return ;
this.el=el;
this.scoreEL=score;
this.timeEL=time;
var canvas = document.createElement('canvas');//建立畫布
canvas.style.cssText="background:darkgrey;border:1px solid grey;";//設定樣式
var W = canvas.width = 300; //設定寬度
var H = canvas.height = 400;//設定高度
el.appendChild(canvas);//新增到指定的dom物件中
this.ctx = canvas.getContext('2d');
this.canvas=canvas;
this.w=W;
this.h=H;
this.disX=20;//每個格子的x方向大小
this.disY=20;//每個格子的y方向大小
this.maxX=15;//x方向格子總數
this.maxY=20;//y方向格子總數
this.control();//
this.draw();//繪製
}
//繪製地圖
Game.prototype.createMap=function(){
var renderArr = this.renderArr;
var disX = this.disX;
var disY = this.disY;
var maxX=this.maxX;
var maxY=this.maxY;
var rectW = this.w;
var rectH = this.h;
var rect=null;
var color;
for(var i=1;i<maxY;i++){//20行
var line = new Line(this.ctx,{
x:0,
y:0,
startX:0,
startY:i*disY,
endX:this.w,
endY:i*disY,
thin:true,
strokeStyle:'white',
lineWidth:0.2
})
renderArr.push(line);
}
for(var i=1;i<maxX;i++){//15列
var line = new Line(this.ctx,{
x:0,
y:0,
startX:i*disX,
startY:0,
endX:i*disX,
endY:this.h,
thin:true,
strokeStyle:'white',
lineWidth:0.2
})
renderArr.push(line);
}
}
Game.prototype.draw=function(){
this.createMap();//繪製地圖
this.render();//渲染
}此時遊戲區域的格子以及繪製如下：
再來繪製模型
模型定義：分別是一字形、田字形、二字形2種、七字形2種、凸字形等共7種。
變形定義：1字形可以變形2種、田字形不能變形，其他的都可以變形4種。
模型的組成：模型是有4個小方塊來組成，每個模型裡面有陣列blocks來存取4個小方塊的x、y座標，然後繪製出來就是模型了。
模型的變形：變形的時候就只要切換每個方塊的X\Y座標就可以達到變形的效果。
下面來建立模型的建構函式
//模型建構函式
function Model(o){
this.blocks=[],//儲存方塊的陣列，繪製的時候根據陣列來繪製
this.type=1,//模型的形狀，預設是一字形（共7種）
this.dir=1,//方向預設為1，總共4種，其中一字形為2種，田字形為1種，其他為4種
this.x=0,//x座標(只傳入第一個x，根據這個x來生成其他的x）
this.y=0,//y座標(只傳入第一個y，根據這個y來生成其他的y）
this.init(o);
}
//初始化
Model.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}舉例
新增一個建立七字形的方法（因為七字形有4種擺放方式，所以有dir來區分，怎麼擺放）
//建立七字形1
Model.prototype.createQi1=function(){
var blocks=this.blocks,x=this.x,y=this.y;
switch(this.dir){
case 1://
blocks.push({x:x,y:y});
blocks.push({x:x,y:y-1});
blocks.push({x:x,y:y-2});
blocks.push({x:x+1,y:y-2});
break;
case 2://
blocks.push({x:x+2,y:y});
blocks.push({x:x+1,y:y});
blocks.push({x:x,y:y});
blocks.push({x:x,y:y-1});
break;
case 3://
blocks.push({x:x+1,y:y-2});
blocks.push({x:x+1,y:y-1});
blocks.push({x:x+1,y:y});
blocks.push({x:x,y:y});
break;
case 4://
blocks.push({x:x-2,y:y-1});
blocks.push({x:x-1,y:y-1});
blocks.push({x:x,y:y-1});
blocks.push({x:x,y:y});
break;
}
}建立一個七字形試試（傳入的x、y是第一個放個的位置）
var model = new Model({//建立1字
x:6,y:6,fillStyle:'#0370BD',fill:true,game:this,type:5,dir:1
});
this.renderArr.push(model);
//當前的模型
this.currentModel=model;
編寫變形方法（每一次變形都是按前一個模樣逆時針旋轉90度，修改每個小方塊x、y來修改就行）
------------------------ >>> 
左邊這個圖形要變成右邊的圖形，需要怎麼變更呢？
-------------------->>> 
標上號碼就很容易明白，1還是對應的1,2還是對應的2，以此類推，只不過X\Y變了
1方塊：只要x+2就可以移到指定的位置；
2方塊：x、y都需要加1
3方塊：y+2就可以
4方塊：x-1和y+1即可
其他都是一樣的道理，來寫一下變形的方法
//七1變形
Model.prototype.transformQi1=function(){
var blocks = this.blocks,block2=blocks[1];
switch(this.dir){
case 1://豎著的
tran1();
this.dir=2;
break;
case 2://橫著的
tran2();
this.dir=3;
break;
case 3://豎著的
tran3();
this.dir=4;
break;
case 4://橫著的
tran4();
this.dir=1;
break;
}
function tran1(){//變成橫著的
for(var i=0;i<blocks.length;i++){
block=blocks[i];
if(i==0){
block.x+=2;
}else if(i==1){
block.x+=1;
block.y+=1;
}else if(i==2){
block.y+=2;
}else if(i==3){
block.x-=1;
block.y+=1
}
}
}
function tran2(){//豎著的
for(var i=0;i<blocks.length;i++){
block=blocks[i];
if(i==0){
block.x-=1;
block.y-=2;
}else if(i==1){
block.y-=1;
}else if(i==2){
block.x+=1;
}else if(i==3){
block.y+=1
}
}
}
function tran3(){//變成橫著的
for(var i=0;i<blocks.length;i++){
block=blocks[i];
if(i==3){
block.x+=2;
}else if(i==2){
block.x+=1;
block.y-=1;
}else if(i==1){
}else if(i==0){
block.x-=1;
block.y+=1
}
}
}
function tran4(){//豎著的
for(var i=0;i<blocks.length;i++){
block=blocks[i];
if(i==3){
block.x-=1;
block.y-=2;
}else if(i==2){
block.x-=2;
block.y-=1;
}else if(i==1){
block.x-=1;
}else if(i==0){
block.y+=1;
}
}
}
}給w和向上鍵新增為變形事件，同時左移動、右移動、下加速也新增好事件
//按鍵的控制
Game.prototype.control=function(){
var that=this;
global.addEventListener('keydown',function(e){
//if(!that.timmer) return ;
switch (e.keyCode){
case 87://w
case 38://上
that.currentModel.transform();//變形
break;
case 83://s
case 40://下
that.currentModel.move('d');//移動
break;
case 65://a
case 37://左
that.currentModel.move('l');//移動
break;
case 68://d
case 39://右
that.currentModel.move('r');//移動
break;
}
//測試用，記得刪除
that.render();
});
}接下來變形試試
新增移動方法
//移動
Model.prototype.move=function(dir){
var cur = this.game.currentModel,dis=1,blocks = this.blocks;
if(dir=='r'||dir=='ld'){
dis=1
}else if(dir=='l'){
dis=-1;
}else if(dir=='d'){
dis=3;
}
var stopMoveObj = this.stopMove(dir,dis),
val=stopMoveObj.val,resDis=stopMoveObj.resDis;
if(val) {
if(dir=='d'||dir=='ld'){//到底了
[].push.apply(this.game.aliveModel,cur.blocks);//放到已到底的組合中
this.game.renderArr.pop();//當前模型彈出
this.game.clearBlock();//消除
this.game.createModel();//繪製一個新圖形
}
return ;//如果返回true 則不能再往這個方向移動
}
if(resDis>0){
dis=resDis;
}
//更新每一個block的位置
for(var i=0;i<blocks.length;i++){
block=blocks[i];
if(dir=='d'||dir=='ld'){
block.y+=dis;
}else{
block.x+=dis;
}
}
}加入邊界判斷和碰撞檢測（邊界檢測比較簡單、碰撞檢測在快進的時候要注意處理一下，看程式碼吧）
//停止移動
Model.prototype.stopMove=function(dir,dis){
var cur = this.game.currentModel,blocks = this.blocks;
var maxX = this.game.maxX,maxY = this.game.maxY,res,temp;
for(var i=0;i<blocks.length;i++){
block=blocks[i];
if(dir=='d'||dir=='ld'){
if(block.y>=maxY-1){//到底了
return {val:true};
}
}else if(dir=='r'){
if(block.x>=maxX-1){//到右邊界了
return {val:true};
}
}else if(dir=='l'){
if(block.x<=0){//到左邊界了
return {val:true};
}
}
//碰撞檢測
temp=this.collide(block,dis,dir);
if(temp.val){
return temp;
}
if(!res || res.resDis==0 || (temp.resDis!=0 && temp.resDis<res.resDis)){
res=temp;
}
}
return res;
}
//檢查當前模型是否與其他存底的模型相觸碰
Model.prototype.collide=function(block,dis,dir){
var aliveModel = this.game.aliveModel,item;
var res={},val=false,resDis=0,maxY = this.game.maxY;
if(dir=='r'){//向右判斷
for(var i=0;i<aliveModel.length;i++){
item = aliveModel[i];
if(!item) continue;
if(item.y==block.y && item.x==block.x+1){
val= true;
break;
}
}
}else if(dir=='l'){//向左判斷
for(var i=0;i<aliveModel.length;i++){
item = aliveModel[i];
if(!item) continue;
if(item.y==block.y && item.x==block.x-1){
val= true;
break;
}
}
}else {//向下判斷
if(aliveModel.length>0){
for(var i=0;i<aliveModel.length;i++){
item = aliveModel[i];
if(!item) continue;
if(item.x==block.x){//下方有存在的方塊
if(item.y==block.y+1){
val= true;
break;
}else if(item.y<=block.y+Math.abs(dis)){
var temp=item.y-block.y-1;
if(resDis==0 || temp<resDis){
resDis = temp;
}
}
}else{//下發不存在方塊
if(maxY<=block.y+Math.abs(dis)){
var temp=maxY-block.y-1;
if(resDis==0 || temp<resDis){
resDis = temp;
}
}
}
}
}else{//第一個模型
if(maxY<=block.y+Math.abs(dis)){
var temp=maxY-block.y-1;
if(resDis==0 || temp<resDis){
resDis = temp;
}
}
}
}
res.resDis=resDis;
res.val=val;
return res;
}
到底後的處理
1.給當前的遊戲物件的aliveModel陣列，存取當前到底的模型所對應的4個小方塊（執行render方法的時候就繪製出來）
2.在renderArr陣列中此模型要刪除
3.每次觸底需要加入消除判斷，符合條件就消除
4.繪製一個新的模型
繪製觸底的模型方塊
//繪製存底的圖形
Game.prototype.aliveModelRender=function(){
var context=this.ctx;
var disX=this.disX,disY=this.disY;
context.save();
context.beginPath();
_.each(this.aliveModel,function(item){
if(item){
context.rect(item.x*disX+1,item.y*disY+1,disX-1,disY-1);
//context.fillStyle='';
context.fill();
}
});
context.restore();
}消除行、積分、以及下降
//消除行
Game.prototype.clearBlock=function(){
var maxX=this.maxX,aliveModel=this.aliveModel;
//將y相同的放在一起
var rowArr=[],rowObj={};
_.each(aliveModel,function(item,index){
if(item) {
if(!rowObj[item.y]){
rowObj[item.y]=[];
}
rowObj[item.y].push(index);
}
});
var that=this;
var keys = Object.keys(rowObj),row,num=0;
_.each(keys,function(k){
row = rowObj[k];
if(row.length>=maxX){//消除這行
_.each(row,function(r){
aliveModel.splice(r,1,undefined);//先用undefined代替
})
num++;//行數計數器
that.down(k,1);//清楚當前行
}
})
//完成消除
for(var i=0;i<aliveModel.length;i++){
if(!aliveModel[i]) {
console.log(123)
aliveModel.splice(i,1);
}
}
var score = 0;
switch (num){
case 1:
score=100;//1行100分
break;
case 2:
score=300;//2行300分
break;
case 3:
score=600;//3行600分
break;
case 4:
score=1000;//4行1000分
break;
}
//積分
this.calcuScore(score);
}
//消除後的下降
Game.prototype.down=function(y,num){
var aliveModel=this.aliveModel;
_.each(aliveModel,function(item){
if(item && item.y<y){
item.y+=num;
}
});
}自動往下移動、更新、顯示時間、分數
//顯示分數
Game.prototype.calcuScore=function(s){
this.score+=s;
this.scoreEL.innerText='分數：'+this.score;
}
//顯示時間
Game.prototype.calcuTime=function(){
if(this.moveCount%4==0){
this.time++;
this.time_flag=false;
this.timeEL.innerText='時間：'+this.time;
}
this.moveCount++;
}
//向下移動
Game.prototype.move=function(dir){
var curModel= this.currentModel;
this.calcuTime();
var endFlag = this.end();
if(endFlag) {
this.stop();
this.hasEnd=true;
return ;
}
this.update();
this.render();
}
//更新
Game.prototype.update=function(){
this.currentModel.move('ld');
}給開始、結束按鈕加入事件
var mainDiv = document.getElementById('mainDiv');
var score= document.getElementById('score');
var time= document.getElementById('time');
game.init(mainDiv,score,time);
function start(){
game.start()
}
function stop(){
game.stop()
}Game.prototype.start=function(){
if(this.timmer) return ;
if(this.hasEnd){//如果是結束則需要重新開始，暫停的話就繼續遊戲
this.restart();
}
this.hasEnd=false;
this.timmer = setInterval(this.move.bind(this),250);//開始定時任務
}
//重新開始
Game.prototype.restart=function(){
this.renderArr=[];//待渲染物件儲存陣列
this.aliveModel=[];//用來存到底的model組合
this.score=0;//分數
this.time=0;//時間
this.moveCount=1;//計時控制器
this.clearCanvas();
this.draw();
}
//停止任務
Game.prototype.stop=function(){
if(!this.timmer) return ;
clearInterval(this.timmer);//清除定時任務
this.timmer=null;
}
//結束
Game.prototype.end=function(){
var aliveModel = this.aliveModel;
for(var i=0;i<aliveModel.length;i++){
item = aliveModel[i];
if(item&&item.y==0){
alert('結束了')
return true;
}
}
return false
}