- 浏览: 583794 次
- 来自: ...
文章分类
最新评论
-
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 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学习笔记(8)俄罗斯方块游戏之二(方块)
2014-07-04 13:08 1662接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
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/2088202
HTML5 canvas俄罗斯方块小游戏,面向对象方式写的,彩色俄罗斯方块游戏。
HTML5 canvas俄罗斯方块小游戏
NULL 博文链接:https://128kj.iteye.com/blog/2088255
用js写的网页版的 俄罗斯方块 小游戏。使用canvas画布技术,可实现传统俄罗斯昂快基本的功能,变形,加速等。
HTML5 canvas高性能打方块小游戏
基于h5 canvas的俄罗斯方块小游戏,500行代码(原创无注释,不懂可联系qq742025211)。可以预览下一个图形,消行可得分,有历史最高分记录(清除浏览器缓存历史最高分会清0)。操作方式:↑ 变形 ,↓ 加速 ,← →...
Javascript开发的俄罗斯方块,用的是canvas元素。速度随积分变快,积分随速度递增,可暂停、再玩一次等功能!赶快下载体验吧!
html5 canvas面向对象方式写的,彩色俄罗斯方块游戏。
基于html5的俄罗斯方块游戏,目前不支持ie浏览器,可在支持html5的浏览器中运行。
NULL 博文链接:https://128kj.iteye.com/blog/2085698
基于html5和canvas实现的俄罗斯方块小游戏,可供借鉴学习。
html5开发
采用用html5 canvas开发的3D效果俄罗斯方块。
《HTML5 Canvas游戏开发实战》主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读者不仅知其然,而且知其所以然。...
html5 canvas方块射击小游戏源码 html5 canvas方块射击小游戏源码
HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战