在网上看到一个俄罗斯方块游戏:
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
分享到：
相关推荐
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
内容概要：本文探讨了人工势场法在自动驾驶汽车换道与主动避撞中的应用，结合MPC模型预测控制，利用CarSim和Simulink进行联合仿真。人工势场法作为一种路径规划方法，通过模拟物理世界的势能场来引导汽车平滑完成换道动作。MPC则负责根据当前车辆状态和环境信息预测并执行最优的避撞轨迹和控制指令。仿真结果显示，该方法不仅能够有效减少跟踪误差，还能提高避撞过程的安全性和稳定性。 适合人群：对自动驾驶技术感兴趣的科研人员、工程师和技术爱好者。 使用场景及目标：适用于研究和开发自动驾驶系统的机构和个人，旨在提升自动驾驶汽车在复杂交通环境中的换道和避撞能力。 其他说明：文中提供的详细仿真数据和图表有助于深入理解和改进相关算法。
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
内容概要：本文详细介绍了信捷PLC送料机程序的设计和实现，涵盖了从程序概述、设计思路、代码实现到触摸屏操作以及调试优化的全过程。PLC（可编程逻辑控制器）与触摸屏的一体化控制，不仅实现了对送料机的启动、停止、速度调节等功能，还提供了直观友好的人机交互界面，便于操作人员查看机器状态、设置参数和进行故障诊断。程序采用模块化设计，各功能模块独立运作，便于维护和升级。此外，文中还展示了部分代码片段，解释了关键控制逻辑，并强调了详细的注释有助于理解和调试。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对PLC编程和触摸屏操作有一定了解的人群。 使用场景及目标：适用于需要提高生产效率和操作便捷性的工业环境，特别是那些希望利用PLC和触摸屏组合实现精准控制的企业。目标是帮助技术人员掌握PLC送料机程序的设计和实现，提升设备性能和稳定性。 其他说明：文章不仅关注于具体的技术实现细节，还强调了良好的编程习惯和工程实践，如模块化设计和详细注释，这对于后续的维护和扩展非常重要。
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
内容概要：本文详细介绍了香蕉成熟度分类目标检测数据集的构建及其应用方法。数据集采用YOLO格式，包含18074张图像，分为训练集、验证集和测试集。文中不仅展示了数据集的目录结构和标签文件格式，还提供了Python代码用于加载和可视化标签，以及使用Ultralytics的YOLOv8进行模型训练的方法。此外，针对实际操作中可能出现的问题如类别ID调整、样本不均衡处理等给出了具体解决方案，并分享了一些提高标注精度的小技巧。 适合人群：对目标检测感兴趣的研究人员和技术爱好者，尤其是希望利用深度学习技术进行水果成熟度识别的从业者。 使用场景及目标：适用于需要构建和训练香蕉成熟度分类模型的研究项目或商业应用。主要目标是帮助用户掌握从数据准备到模型部署的完整流程，同时提供解决常见问题的有效途径。 其他说明：本文提供的代码片段可以直接运行，但需确保环境已安装相关依赖库。对于初学者而言，在尝试复现实验前建议先熟悉YOLO算法的基本概念和工作原理。
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
2023中国高端白酒市场简析-新生代市场监测机构
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
内容概要：本文详细介绍了光伏控制器与三相并网仿真的研究，重点探讨了光伏+MPPT控制和两级式并网逆变器（boost+三相桥式逆变）的仿真模型。文中涵盖了MPPT控制、boost升压电路、三相桥式逆变器、坐标变换、锁相环、dq功率控制、解耦控制、电流内环电压外环控制及SPWM调制等先进控制策略。仿真结果显示，逆变输出与380V电网同频同相，直流母线电压稳定在800V，d轴电压稳定311V，q轴电压稳定为0V，实现了高效的有功功率输出。 适合人群：从事光伏能源研究的技术人员、电力电子工程师、高校师生及相关领域的研究人员。 使用场景及目标：适用于光伏并网系统的优化设计与性能评估，旨在提高光伏发电系统的效率和稳定性，推动清洁能源的应用和发展。 其他说明：本文不仅提供了理论分析和技术细节，还附有仿真结果和参考文献，有助于读者深入了解光伏控制器与三相并网仿真的核心技术。
内容概要：本文介绍了基于OCV（开路电压）静态校正法的SOC（荷电状态）估计算法，重点探讨了该算法在单片机上的实现方法。OCV静态校正法利用开路电压与SOC的关系，结合安时积分法，通过Simulink Stateflow搭建模型，消除了安时积分的累积误差，并引入安时修正系数K防止SOC值跳变。最终生成的C代码已在实际项目中成功应用，提高了SOC估算的准确性和稳定性。 适合人群：从事嵌入式系统开发、电池管理系统设计的研究人员和技术人员。 使用场景及目标：适用于需要精确监控电池状态的应用场合，如便携式电子设备、电动汽车等领域。目标是提升SOC估算精度，确保电池管理系统的可靠性。 阅读建议：读者应具备一定的单片机编程基础和电池管理基础知识，以便更好地理解和应用文中提到的技术细节。
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
移动机器人全局路径规划仿 真研究.pdf
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
内容概要：本文详细介绍了COMSOL这款多物理场仿真软件在一维电化学模型和热模型的应用。首先简述了COMSOL的基本特点及其在科学和工程领域的广泛应用。接着重点探讨了一维电化学模型，解释了电化学过程（如电池、电解池）中电流分布和电极反应速率的仿真方法。随后讨论了一维热模型，强调了热量传递过程以及温度分布和热流信息的重要性。文中还特别提到了P2D模型计算的优势，即能够在减少计算量的同时保持高精度，从而获得准确的热源分布和电压数据。最后讲述了通过仿真得到的数据如何进行拟合并应用于实际研究中，确保数据来源可靠。 适合人群：从事电化学、热力学相关研究的科研人员和技术工程师。 使用场景及目标：适用于需要精确模拟电化学和热过程的研究项目，旨在提升实验设计合理性及系统性能优化。 其他说明：文中提及的内容不仅限于理论介绍，还包括具体的操作步骤和案例分析，有助于读者深入理解和掌握COMSOL的实际应用技巧。
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
内容概要：本文详细介绍了四种主要的永磁同步电机（PMSM）控制技术——模型预测控制（MPC）、线性自抗扰控制（LADRC）、模糊控制以及无传感器控制。每种方法都有其独特的优势和应用场景。模型预测控制利用数学模型对未来进行预测并优化控制输入；LADRC则通过实时估计和补偿扰动来提升系统的鲁棒性；模糊控制模仿人类思维处理不确定性；而无传感器控制减少了硬件成本并提高了系统可靠性。文章还举例说明了这几种方法在实际操作中的具体应用。 适合人群：从事电机控制系统研究的技术人员、自动化领域的工程师及相关专业的学生。 使用场景及目标：帮助读者深入了解不同类型的PMSM控制技术及其特点，以便选择最适合特定应用场景的方法，同时促进相关领域的技术创新和发展。 其他说明：文中提到的技术不仅适用于现有的工业设备升级换代，也为未来的智能制造提供了重要的技术支持。