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

128kj

浏览: 604083 次
来自: ...

最近访客更多访客>>

hcmfys

caizi12

sdtvyyb_007

hanqunfeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
HTML5 动画游戏

游戏 html5 javascript html 编程

接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）》
http://128kj.iteye.com/blog/2088202
先看这个游戏中的第二个重要类Shape,它表示一种随机的俄罗斯方块，由若干个色块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.");
          }
      }
     }

下面是测试效果图：

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

测试代码：

<!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.onload=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>

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

2.zip (9 KB)
下载次数: 10

查看图片附件

0
顶

0
踩

分享到：

HTML5 Canvas学习笔记(9)俄罗斯方块游戏 ... | HTML5 Canvas学习笔记(7)俄罗斯方块游戏之 ...

2014-07-04 13:08
浏览 1720
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论