`
128kj
  • 浏览: 607918 次
  • 来自: ...
社区版块
存档分类
最新评论

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

游戏html5javascripthtml编程 
阅读更多
接上一遍《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
下载源码：
  • 大小: 7.1 KB
  • 2.zip (9 KB)
  • 下载次数: 10
  • 大小: 3.4 KB
0
顶
0
踩
分享到：
| HTML5 Canvas学习笔记(7)俄罗斯方块游戏之 ...
评论
发表评论

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

相关推荐

    HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）

    这篇“HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）”深入探讨了如何利用Canvas技术构建一个经典的游戏——俄罗斯方块。 在HTML5 Canvas上构建俄罗斯方块游戏，首先需要理解Canvas的基本结构和绘图API。...

    HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）

    这篇“HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）”着重介绍了如何利用Canvas构建经典游戏——俄罗斯方块的基础部分，即色块的绘制与移动。 首先，我们要理解HTML5 Canvas的基本结构。它是一个二维绘图...

    C#俄罗斯方块源码

    《C#实现俄罗斯方块：源码解析与学习指南》 C#，作为Microsoft开发的一种面向对象的编程语言，以其简洁、高效和丰富的类库深受程序员喜爱。在游戏开发领域，C#同样有着广泛的应用，其中，俄罗斯方块是许多初学者...

    TetriCrisis_V_Firefox_110Percent_AI：100％免费的开源跨平台HTML5JavaScript Tetris Remake！

    《TetriCrisis_V_Firefox_110Percent_AI：HTML5与JavaScript构建的开源跨平台俄罗斯方块重制版》 在当今的数字娱乐领域，经典游戏的复刻与改编一直受到广大玩家的喜爱。TetriCrisis_V_Firefox_110Percent_AI就是...

    javascript的一些实例

    "俄罗斯方块"是更复杂的游戏开发实例，它需要处理游戏逻辑、用户输入、图形渲染等多个方面。这个实例会涉及到数组操作，循环，条件语句，以及可能的Canvas API，用于在网页上绘制游戏画面。此外，游戏状态管理，如...

Magicbox
Global site tag (gtag.js) - Google Analytics