HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二（方块）

最新推荐文章于 2024-09-16 13:39:40 发布

iteye_8466

最新推荐文章于 2024-09-16 13:39:40 发布

阅读量193

点赞数

分类专栏： HTML5 动画游戏 javascript 文章标签：游戏 html5 javascript html 编程 ViewUI

HTML5 动画游戏同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

javascript

28 篇文章 0 订阅

订阅专栏

接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）》
[url]http://128kj.iteye.com/blog/2088202[/url]
先看这个游戏中的第二个重要类Shape,它表示一种随机的俄罗斯方块，由若干个色块Block组成。
[img]http://dl2.iteye.com/upload/attachment/0098/7615/5699fa25-6b01-32e6-88a3-32e1d9bd1a9e.gif[/img]
代码：


 // Shape Constructor 方块由色块组成
 function Shape(image){
   this.block = new Block(image);
   this.layout;//表示某种俄罗斯方块的结构，二维数组
   this.blockType;//块的类型
   this.currentX = 0;
   this.currentY = 0;
   this.layouts = [//俄罗斯方块的所有类型
      [
       [ 0, 1, 0 ],
       [ 1, 1, 1 ]
      ],[
       [ 0, 0, 1 ],
       [ 1, 1, 1 ]
      ],[
       [ 1, 0, 0 ],
       [ 1, 1, 1 ]
      ],[
       [ 1, 1, 0 ],
       [ 0, 1, 1 ]
      ],[
       [ 0, 1, 1 ],
       [ 1, 1, 0 ]
      ],[
       [ 1, 1, 1, 1 ]
      ],[
       [ 1, 1 ],
       [ 1, 1 ]
      ]
    ];
   }

  Shape.prototype = {
     random: function(){
        //取一种随机类型
       var layout = this.layouts[ Math.floor(Math.random() * this.layouts.length) ];
       this.blockType = this.block.random();//随机的块类型
       for (var y=0; y < layout.length; y++){
         for (var x=0; x < layout[0].length; x++){
           if (layout[y][x]) layout[y][x] = this.blockType;
	  }
       }
       this.layout = layout; 
     },

     defaultXY: function(){//缺省的方块位置
        this.currentX = Math.floor((13 - this.layout[0].length)/2);
        this.currentY = 0;
     },
     new: function(){//产生一个新的俄罗斯方块
        this.random();
        this.defaultXY();
        return this;
     },
     fixCurrentXY: function(){//修正方块的位置
        if (this.currentX < 0) this.currentX = 0;
        if (this.currentY < 0) this.currentY = 0;
        if (this.currentX + this.layout[0].length > 13) 
                 this.currentX = 13 - this.layout[0].length;
        if (this.currentY + this.layout.length    > 20)
                 this.currentY = 20 - this.layout.length;
     },
     rotate: function(){//旋转此方块
         var newLayout = [];//新的方块
         for (var y=0; y < this.layout[0].length; y++){
            newLayout[y] = [];
            for (var x=0; x < this.layout.length; x++){
               newLayout[y][x] = this.layout[this.layout.length - 1 - x][y];
             }
          }
          this.layout = newLayout;
          this.fixCurrentXY();
      },
      draw: function(context){//绘制此方块         
         try {
           for (var y=0; y < this.layout.length; y++){
            for (var x=0; x < this.layout[y].length; x++){
              if (this.layout[y][x]) 
  this.block.draw(context, x + this.currentX, y + this.currentY, this.blockType);
	     }
	    }
	   } catch(e){
             console.log("Error: can't draw the shape.");
          }
      }
     }

下面是测试效果图：
[img]http://dl2.iteye.com/upload/attachment/0098/7610/70097ef3-c140-3004-b9d1-5c7e64323f78.gif[/img]

点击可看效果：
[url]http://www.108js.com/article/canvas/7/2/e2.html[/url]

测试代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="gbk">

<title>俄罗斯方块:方块测试</title>
<style>
canvas {
display: block;
position: absolute;
background: rgba(20,20,20,0.8);
border: 2px solid yellow;
border-radius: 10px;
}
</style>

</head>
<body>
<div class="container">
<canvas id="board" width="416" height="640">Your browser doesn't support Canvas</canvas>
</div>
</body>
<script>
(function(){
// Single Tetris Block
function Block(image){
this.image =image;//图像
this.size =32;//每个块的大小32*32
this.total = 7;//有七种颜色的块
}

Block.prototype = {
random: function(){//产生一个随机数1-7
return Math.floor( Math.random() * this.total ) + 1;
},
draw: function(context, x, y, blockType){//在上下文中绘制这个块,x与y是网格坐标
var blockType = blockType || this.random();//块的类型
var s = this.size;
context.drawImage(this.image, (blockType-1)*s, 0, s, s, s*x, s*y, s, s);
}
}
window.Block=Block;

// Shape Constructor 方块由色块组成
function Shape(image){
this.block = new Block(image);
this.layout;//表示某种俄罗斯方块，二维数组
this.blockType;//块的类型
this.currentX = 0;
this.currentY = 0;
this.layouts = [//俄罗斯方块的所有类型
[
[ 0, 1, 0 ],
[ 1, 1, 1 ]
],[
[ 0, 0, 1 ],
[ 1, 1, 1 ]
],[
[ 1, 0, 0 ],
[ 1, 1, 1 ]
],[
[ 1, 1, 0 ],
[ 0, 1, 1 ]
],[
[ 0, 1, 1 ],
[ 1, 1, 0 ]
],[
[ 1, 1, 1, 1 ]
],[
[ 1, 1 ],
[ 1, 1 ]
]
];
}

Shape.prototype = {
random: function(){
//取一种随机类型
var layout = this.layouts[ Math.floor(Math.random() * this.layouts.length) ];
this.blockType = this.block.random();//随机的块类型
for (var y=0; y < layout.length; y++){
for (var x=0; x < layout[0].length; x++){
if (layout[y][x]) layout[y][x] = this.blockType;
}
}
this.layout = layout;
},

defaultXY: function(){
this.currentX = Math.floor((13 - this.layout[0].length)/2);
this.currentY = 0;
},
new: function(){//产生一个新的俄罗斯方块
this.random();
this.defaultXY();
return this;
},
fixCurrentXY: function(){
if (this.currentX < 0) this.currentX = 0;
if (this.currentY < 0) this.currentY = 0;
if (this.currentX + this.layout[0].length>13) this.currentX=13 - this.layout[0].length;
if (this.currentY + this.layout.length> 20) this.currentY=20 - this.layout.length;
},
rotate: function(){//旋转此方块
var newLayout = [];//新的方块
for (var y=0; y < this.layout[0].length; y++){
newLayout[y] = [];
for (var x=0; x < this.layout.length; x++){
newLayout[y][x] = this.layout[this.layout.length - 1 - x][y];
}
}
this.layout = newLayout;
this.fixCurrentXY();
},
draw: function(context){
try {
for (var y=0; y < this.layout.length; y++){
for (var x=0; x < this.layout[y].length; x++){
if (this.layout[y][x])
this.block.draw(context, x + this.currentX, y + this.currentY, this.blockType);
}
}
} catch(e){
console.log("Error: can't draw the shape.");
}
}
}
window.Shape=Shape;

})();

var el= document.getElementById("board");
var ctx = el.getContext('2d');

var image = new Image();
image.src = "img/blocks.png";
image.οnlοad=init;//图像加载完毕后执行
var shape=null;
function init(){
shape=new Shape(image);
//canvas的大小为宽13*32,高为20*32
shape.random();
shape.draw(ctx);
shape.new();
//shape.rotate();
//shape.defaultXY();
shape.draw(ctx);
}
</script>

欢迎访问博主的网站：[url]http://www.108js.com[/url]
下载源码：