在网上看到一个俄罗斯方块游戏:
http://www.108js.com/article/article11/b0044.html
感觉还不错，学习了它的源码，写点笔记。俗话说：熟读唐诗三百首，不会吟诗也会吟。我相信熟读源码三百个，不会编程也会编。
这个俄罗斯方块游戏的精华部分应该是三个类，先看这个第一个Block类：
(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;
})();
类中用到的图片：
下面是测试代码：
<!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;
})();
var el= document.getElementById("board");
var ctx = el.getContext('2d');
var image = new Image();
image.src = "img/blocks.png";
image.onload=init;//图像加载完毕后执行
var block=null;
function init(){
block=new Block(image);
//canvas的大小为宽13*32,高为20*32
block.draw(ctx,3,3);
}
</script>
效果图：
点击看效果：
http://www.108js.com/article/canvas/7/1/e1.html
欢迎访问博主的网站：
http://www.108js.com
下载本学习笔记的源码：
- 大小: 5.7 KB
- 大小: 9.3 KB
分享到：
相关推荐
NULL 博文链接：https://128kj.iteye.com/blog/2088356
NULL 博文链接：https://128kj.iteye.com/blog/2088255
HTML5 canvas俄罗斯方块小游戏，面向对象方式写的，彩色俄罗斯方块游戏。
HTML5 canvas俄罗斯方块小游戏
HTML5 canvas高性能打方块小游戏
用js写的网页版的 俄罗斯方块 小游戏。使用canvas画布技术，可实现传统俄罗斯昂快基本的功能，变形，加速等。
基于h5 canvas的俄罗斯方块小游戏，500行代码（原创无注释，不懂可联系qq742025211）。可以预览下一个图形，消行可得分，有历史最高分记录（清除浏览器缓存历史最高分会清0）。操作方式：↑ 变形 ，↓ 加速 ，← →...
html5 canvas面向对象方式写的，彩色俄罗斯方块游戏。
Javascript开发的俄罗斯方块，用的是canvas元素。速度随积分变快，积分随速度递增，可暂停、再玩一次等功能！赶快下载体验吧！
html5 canvas 3D立体方块环形动画特效，立方体各个面的颜色都不同，可鼠标拖动控制全方位旋转。
html5 canvas方块射击小游戏源码 html5 canvas方块射击小游戏源码
基于html5的俄罗斯方块游戏，目前不支持ie浏览器，可在支持html5的浏览器中运行。
NULL 博文链接：https://128kj.iteye.com/blog/2085698
h5的canvas标签写的打方块小游戏，写了很详细的注释，希望能够对你有所帮助
基于html5和canvas实现的俄罗斯方块小游戏，可供借鉴学习。
HTML5 canvas打方块小游戏源码分享，从玩法和形式上看，其实也可以叫做射击游戏，鼠标...本源码可作为学习HTML5编写同类射击打方块游戏的参考范例吧，运行效果截图请参见截图所示，期待大家从中学习到一些h5开发技巧。
采用用html5 canvas开发的3D效果俄罗斯方块。