128kj
- 浏览: 583793 次
- 来自: ...
-
文章分类
最新评论
-
lgh1992314：
相同的元素呢
一种离散化方法 -
HelloSummerR：
圆心的位置是随机的，于是圆的部分会落到canvas外，那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio：
好久没见到sokuban了，这有个java版的，带源码，可以参 ...
求推箱子的最小步数（java) -
肖泽文：
太好了，谢谢你。。有中文注释！
HTML5 推箱子游戏过关演示动画 -
swm8023：
删除操作，将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)（JAVA）
接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）》
http://128kj.iteye.com/blog/2088202
先看这个游戏中的第二个重要类Shape,它表示一种随机的俄罗斯方块，由若干个色块Block组成。
代码：
下面是测试效果图：
点击可看效果：
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
下载源码：
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
下载源码：
0
顶
顶
0
踩
踩
分享到：
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10024效果图： 效果链接：http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2367效果图： 效果链接： http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12896效果图： 效果链接： http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7385效果图： 效果链接： http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1580效果图： 点击观看效果：http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3200网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）
2014-07-05 07:13 1371接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）
2014-07-04 10:53 2334在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏（数字版）
2014-06-28 17:38 2489今天网上发现了一段代码，只有界面，很不错，学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1076效果图： 点击查看效果： http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1931效果图： 点击看效果： http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1660先要准备应付各种浏览器的声音文件，什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1902看到哪，学到哪，记到哪。见谅，这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2918一直在学习HTML5 Canvas相关内容，游戏，动画 ... -
javaScript 广度优先搜索法"自动推箱子"（二）
2014-06-12 09:57 1292接上文： javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"（一）
2014-06-12 09:45 1781用JS写了一个“广度优先搜索法”自动推箱子，理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2216欢迎访问博主的网站：http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1399点击这里可以查看动画效果： http://www.108js. ... -
javascript for语句最佳实践
2014-05-22 08:22 543当执行冗长的for语句时，要保持语句块的尽量简洁，例如： 糟 ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2410<!DOCTYPE HTML> <html& ...
相关推荐
NULL 博文链接：https://128kj.iteye.com/blog/2088356
NULL 博文链接：https://128kj.iteye.com/blog/2088202
HTML5 canvas俄罗斯方块小游戏，面向对象方式写的，彩色俄罗斯方块游戏。
HTML5 canvas俄罗斯方块小游戏
用js写的网页版的 俄罗斯方块 小游戏。使用canvas画布技术，可实现传统俄罗斯昂快基本的功能，变形，加速等。
HTML5 canvas高性能打方块小游戏
基于h5 canvas的俄罗斯方块小游戏，500行代码（原创无注释，不懂可联系qq742025211）。可以预览下一个图形，消行可得分，有历史最高分记录（清除浏览器缓存历史最高分会清0）。操作方式：↑ 变形 ，↓ 加速 ，← →...
Javascript开发的俄罗斯方块，用的是canvas元素。速度随积分变快，积分随速度递增，可暂停、再玩一次等功能！赶快下载体验吧！
html5 canvas面向对象方式写的，彩色俄罗斯方块游戏。
基于html5的俄罗斯方块游戏，目前不支持ie浏览器，可在支持html5的浏览器中运行。
采用用html5 canvas开发的3D效果俄罗斯方块。
基于html5和canvas实现的俄罗斯方块小游戏，可供借鉴学习。
NULL 博文链接：https://128kj.iteye.com/blog/2085698
html5开发
采用HTML5的Canvas写的俄罗斯方块示例，有兴趣的可以继续扩展。
为学习javascript, html5而写。仅供大家参考。
采用JavaScript语言及html5（canvas）写的一个俄罗斯方块小游戏，仅供大家学习，高手就忽略吧！