- 浏览: 609566 次
- 来自: ...
-
文章分类
最新评论
-
lgh1992314:
相同的元素呢
一种离散化方法 -
HelloSummerR:
圆心的位置是随机的,于是圆的部分会落到canvas外,那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio:
好久没见到sokuban了,这有个java版的,带源码,可以参 ...
求推箱子的最小步数(java) -
肖泽文:
太好了,谢谢你。。有中文注释!
HTML5 推箱子游戏过关演示动画 -
swm8023:
删除操作,将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)(JAVA)
接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)》:
http://128kj.iteye.com/blog/2088255
有了前两个类作基础,这个游戏很快就可以完成了。
效果图:
点击可以试玩:http://www.108js.com/article/canvas/7/5/e3.html
欢迎访问博主网站:http://www.108js.com
下面来看看这个游戏的第三个类Board,代码如下:
测试代码就不贴了,请下载。再看一下游戏主循环与按键处理:
var requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
window.cancelRequestAnimFrame = ( function() {
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout
} )();
// 游戏主循环
var lastTime;
var gameTime=0;//游戏总时间
var timer;
var board;
var gameOver = false;
//图像加载完毕后执行,启动游戏
var image = new Image();
image.src = "img/blocks.png";
image.onload=init;
function main() {
var now = Date.now();
var dt = (now - lastTime) / 1000.0;
update(dt);//更新
render();//绘制
lastTime = now;
if(!gameOver)
timer=requestAnimFrame(main);
};
function init() {
lastTime = Date.now();
board=new Board(image);
main();
}
// 更新游戏对象
function update(dt) {
gameTime += dt;
board.update(dt);
}
// 绘制所有东西
function render() {
board.draw();
}
//按键处理
document.onkeydown = function(event){
var code = event.keyCode || event.which;
if(code==27){//ESC键暂停游戏
cancelRequestAnimFrame(timer);
}
if(code==13){//回画键继续
timer=requestAnimFrame(main);
}
//上下左右光标键移动俄罗斯方块
if(code==37){
if (board.validMove(-1,0)) board.shape.currentX--;
}
if(code==38){
board.shape.rotate();
}
if(code==39){
if (board.validMove(1,0)){
board.shape.currentX++;
}
}
if(code==40){
if (board.validMove(0,1)) board.shape.currentY++;
}
}
http://128kj.iteye.com/blog/2088255
有了前两个类作基础,这个游戏很快就可以完成了。
效果图:

点击可以试玩:http://www.108js.com/article/canvas/7/5/e3.html
欢迎访问博主网站:http://www.108js.com
下面来看看这个游戏的第三个类Board,代码如下:
// Board Constructor function Board(image){ var grid; this.cols = 13;//列 this.rows = 20;//行数 this.blockSize =32;// this.canvas = document.getElementById("board"); this.shape = new Shape(image);//当前方块 this.nextShape = new Shape(image);//下一个方块 this.ctx = this.canvas.getContext('2d');//容器 this.list = [];//二维网格数组 this.dt=0;//流逝的时间 this.init(); } Board.prototype = { init: function(){ this.initGrid(); this.drawGrid();//画网格 this.shape.new().draw(this.ctx);//绘制当前方块 this.nextShape.new();//更新下一个方块 //window.nextShape.render(this.nextShape);//绘制 }, draw:function(){//绘制方块到面板上 this.refresh(); this.shape.draw(this.ctx); }, initGrid: function(){//初始化网格 for (var y=0; y < this.rows; y++){ this.list[y] = []; for (var x=0; x < this.cols; x++){ this.list[y][x] = 0; } } }, drawGrid: function(){//画网格 this.ctx.strokeStyle = 'rgba(40,40,40,.8)'; this.ctx.lineWidth = 1; for (var i=0; i < this.rows; i++){ this.ctx.moveTo(0, i * this.blockSize); this.ctx.lineTo(this.canvas.width, i * this.blockSize); this.ctx.stroke(); } for (var i=0; i < this.cols; i++){ this.ctx.moveTo(i * this.blockSize, 0); this.ctx.lineTo(i * this.blockSize, this.canvas.height); this.ctx.stroke(); } // 拷贝游戏面板的背景 grid = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height); }, validMove: function(incX, incY, shape){//方块能否移动到(offsetX,offsetY) var shape = shape || this.shape; var offsetX = shape.currentX + incX; var offsetY = shape.currentY + incY; for (var y=0; y < shape.layout.length; y++){ for (var x=0; x < shape.layout[0].length; x++){ if (shape.layout[y][x]){ if ( typeof this.list[offsetY + y] === 'undefined' || typeof this.list[offsetY + y][offsetX + x] === 'undefined' || this.list[offsetY + y][offsetX + x]//有方块占领 || offsetX + x < 0//出边界 || offsetX + x >= this.cols//出边界 || offsetY + y >= this.rows ){//出边界 return false; } } } } return true; }, addShapeToBoard: function(){//把一个俄罗斯方块添加到网格 loop1: for (var y=0; y < this.shape.layout.length; y++){ loop2: for (var x=0; x < this.shape.layout[0].length; x++){ if (this.shape.layout[y][x]){ var boardX = this.shape.currentX + x; var boardY = this.shape.currentY + y; if (this.list[boardY][boardX]){//有方块占领 window.gameOver = true; break loop1;//跳出循环 } else this.list[boardY][boardX] = this.shape.layout[y][x]; } } } }, clearLines: function(){//消除满行 var lines = 0; for (var y=this.rows-1; y >= 0; y--){//检查网格的每一行,是否满 var filled = true; for (var x=0; x < this.cols; x++){ if (!this.list[y][x]){ filled = false; break; } } if (filled && y){//第y行占满了,消除此行,其它行依次下移。 for (var yy=y; yy > 0; yy--){ for (var x=0; x < this.cols; x++){ this.list[yy][x] = this.list[yy - 1][x]; } } lines++; y++; } } // if (lines) window.score.updateScore(lines); // Update current score }, drawBlocks: function(){//把网格中的所有方块画出 for (var y=0; y < this.rows; y++){ for (var x=0; x < this.cols; x++){ if (this.list[y][x]) this.shape.block.draw(this.ctx, x, y, this.list[y][x]); } } }, refresh: function(){//刷新 this.ctx.putImageData(grid, 0, 0); this.drawBlocks(); }, update: function(dt){//更新方块的位置 this.dt=this.dt+dt; if (this.validMove(0,1)){ if(this.dt>=1){//1秒才更新纵坐标 this.dt=0; this.shape.currentY++; } } else {//不能移动了 this.addShapeToBoard(); this.clearLines(); if (window.gameOver){ alert("游戏结束"); return false; } var tempShape = this.shape.new(); this.shape = this.nextShape; this.shape.defaultXY(); this.nextShape = tempShape; } } }
测试代码就不贴了,请下载。再看一下游戏主循环与按键处理:
var requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
window.cancelRequestAnimFrame = ( function() {
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout
} )();
// 游戏主循环
var lastTime;
var gameTime=0;//游戏总时间
var timer;
var board;
var gameOver = false;
//图像加载完毕后执行,启动游戏
var image = new Image();
image.src = "img/blocks.png";
image.onload=init;
function main() {
var now = Date.now();
var dt = (now - lastTime) / 1000.0;
update(dt);//更新
render();//绘制
lastTime = now;
if(!gameOver)
timer=requestAnimFrame(main);
};
function init() {
lastTime = Date.now();
board=new Board(image);
main();
}
// 更新游戏对象
function update(dt) {
gameTime += dt;
board.update(dt);
}
// 绘制所有东西
function render() {
board.draw();
}
//按键处理
document.onkeydown = function(event){
var code = event.keyCode || event.which;
if(code==27){//ESC键暂停游戏
cancelRequestAnimFrame(timer);
}
if(code==13){//回画键继续
timer=requestAnimFrame(main);
}
//上下左右光标键移动俄罗斯方块
if(code==37){
if (board.validMove(-1,0)) board.shape.currentX--;
}
if(code==38){
board.shape.rotate();
}
if(code==39){
if (board.validMove(1,0)){
board.shape.currentX++;
}
}
if(code==40){
if (board.validMove(0,1)) board.shape.currentY++;
}
}
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10136效果图: 效果链接:http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2537效果图: 效果链接: http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12994效果图: 效果链接: http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7479效果图: 效果链接: http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1645效果图: 点击观看效果:http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3321网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)
2014-07-04 13:08 1745接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)
2014-07-04 10:53 2429在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏(数字版)
2014-06-28 17:38 2608今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1141效果图: 点击查看效果: http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 2018效果图: 点击看效果: http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1714先要准备应付各种浏览器的声音文件,什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 2027看到哪,学到哪,记到哪。见谅,这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 3020一直在学习HTML5 Canvas相关内容,游戏,动画 ... -
javaScript 广度优先搜索法"自动推箱子"(二)
2014-06-12 09:57 1377接上文: javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"(一)
2014-06-12 09:45 1894用JS写了一个“广度优先搜索法”自动推箱子,理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2272欢迎访问博主的网站:http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1513点击这里可以查看动画效果: http://www.108js. ... -
javascript for语句最佳实践
2014-05-22 08:22 646当执行冗长的for语句时,要保持语句块的尽量简洁,例如: 糟 ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2459<!DOCTYPE HTML> <html& ...
相关推荐
人脸识别项目实战
内容概要:本文详细描述了一个完整的Web应用程序的开发过程。该项目主要采用了Hono作为服务器框架,Prisma作为ORM工具,JWT用于认证鉴权,以及一系列现代化的最佳实践确保系统的健壮性和安全性。项目初期构建了基础架构,并设置了必要的依赖和工具。在后端方面涵盖了公共API接口的设计、CRUD增删改查逻辑、用户认证和授权等功能。此外还特别关注到了API的安全保护,如输入输出的校验,跨站请求伪造CSRF的防范,XSS防御等措施;为确保代码的质量引入了代码检测(比如ESLint搭配Prettier),并建立了完善的测试框架以保障后续开发阶段的功能正确。对于可能出现的问题预先定义了一组规范化的异常响应,并提供OpenAPI文档以方便开发者理解和调用。数据存储层面上利用了关系型与非关系型数据库各自的特性,实现了数据的有效组织,最后提供了实用的脚本,可用于种子数据插入以及执行必要的初始化工作。 适合人群:面向具有一定JavaScript/TypeScript开发经验,尤其是Node.js后台服务搭建经验的中级程序员和技术团队。 使用场景及目标:这份材料非常适合那些需要快速建立安全高效的RES
【资源介绍】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,也可以作为小白实战演练和初期项目立项演示的重要参考借鉴资料。 3、本资源作为“学习资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研和多多调试实践。 掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip掌静脉识别算法源码(门禁).zip
手势识别项目实战
(参考GUI)MATLAB BP的交通标志系统.zip
人脸识别项目实战
内容概要:本文详细介绍了 C++ 函数的基础概念及其实战技巧。内容涵盖了函数的基本结构(定义、声明、调用)、多种参数传递方式(值传递、引用传递、指针传递),各类函数类型(无参无返、有参无返、无参有返、有参有返),以及高级特性(函数重载、函数模板、递归函数)。此外,通过实际案例展示了函数的应用,如统计数组元素频次和实现冒泡排序算法。最后,总结了C++函数的重要性及未来的拓展方向。 适合人群:有一定编程基础的程序员,特别是想要深入了解C++编程特性的开发人员。 使用场景及目标:① 学习C++中函数的定义与调用,掌握参数传递方式;② 掌握不同类型的C++函数及其应用场景;③ 深入理解函数重载、函数模板和递归函数的高级特性;④ 提升实际编程能力,通过实例强化所学知识。 其他说明:文章以循序渐进的方式讲解C++函数的相关知识点,并提供了实际编码练习帮助理解。阅读过程中应当边思考边实践,动手实验有助于更好地吸收知识点。
Comsol光学仿真模型:包括纳米球 柱 Mie散射多级分解 ,Comsol光学仿真模型; 纳米球; 柱; Mie散射; 多级分解,Comsol光学仿真模型:纳米结构Mie散射多级分解
永磁同步电机全速域控制高频方波注入法、滑模观测器法SMO、加权切矢量控制Simulink仿真模型 低速域采用高频方波注入法HF,高速域采用滑膜观测器法SMO,期间采用加权形式切 送前方法 1、零低速域,来用无数字滤波器高频方波注入法, 2.中高速域采用改进的SMO滑模观测器,来用的是sigmoid函数,PLL锁相环 3、转速过渡区域采用加权切法 该仿真各个部分清晰分明,仿真波形效果良好内附详细控制方法资料lunwen 带有参考文献和说明文档,仿真模型 ,核心关键词: 1. 永磁同步电机; 2. 全速域控制; 3. 高频方波注入法; 4. 滑模观测器法SMO; 5. 加权切换矢量控制; 6. Simulink仿真模型; 7. 零低速域控制; 8. 中高速域控制; 9. 转速过渡区域控制; 10. 仿真波形效果; 11. 详细控制方法资料; 12. 参考文献和说明文档。,永磁同步电机多域控制策略的仿真研究
基于蜣螂优化算法的无人机三维路径规划【23年新算法应用】可直接运行 Matlab语言 主要内容:读取地形数据,利用蜣螂算法DBO优化三维路径,目标函数为总路径最短,同时不能撞到障碍物,效果如图所示,包括迭代曲线图、三维路径图、二维平面图等等 ,基于蜣螂优化算法;无人机;三维路径规划;总路径最短;障碍物避免;Matlab语言;迭代曲线图;三维路径图;二维平面图,蜣螂算法优化无人机三维路径规划:实时避障、路径最短新应用
清华大学2024年研究生复试上机考试题.zip
南京理工大学研究生入学考试2011年复试上机试题
手势识别项目实战
这里是3501的内容,用于复习资料
异步电动机变压变频调速系统,包含六千多字的文档、框架图、Simulink仿真模型,电力拖动、电机控制仿真设计 仿真模型+报告 开关闭环对比仿真都有,资料如图所见如所得 ,异步电动机;变压变频调速系统;六千字文档;框架图;Simulink仿真模型;电力拖动;电机控制仿真设计;开闭环对比仿真;资料如图。,异步电机控制仿真系统:六千字详解与图解
人脸识别项目实战
手势识别项目实战
人脸识别项目实战
c语言学习
c语言学习