JavaScript 写的网页迷宫游戏(二)

不久之前我发过一篇帖子,介绍如何用JavaScript在网页上绘制随机迷宮。当时迷宮是用 DOM 元素 div 堆出来的,通过控制一个个绝对定位的 div 的上、下、左、右四个边框形成了一个个的格子。最近学习了一下 HTML5,试着用 canvas 元素改进了一下,使得迷宮在支持 canvas 标签的浏览器(如Firefox、Chrome)下用 canvas 绘制,不支持 canvas 标签的浏览器(如IE6/7/8)下仍然使用原来的DOM绘制。

首先我们需要检测浏览器是否支持 canvas 标签,检测的方法很简单:

var canvas = document.createElement("canvas");
var is_canvas_valid = !! canvas.getContext;

先尝试创建一个 canvas 元素,再获取它的 getContext 属性,如果浏览器不支持 canvas 标签,创建的元素的 getContext 属性为 undefined,我们知道,JavaScript 中,在任意值前面加两个感叹号可以将其转换为对应的布尔值。这样,我们就能知道浏览器是否支持 canvas 标签了,并且在后面的绘制过程中调用不同的方法。

然后,在 mg.js 中,我新添加了 _showByDOM_showByCanvas 两个方法,其中 _showByDOM 中即是原来使用 div 绘图的方法,_showByCanvas 中则是新添加的使用 canvas 标签画迷宮的代码。关键部分如下:

// 创建canvas标签
this.canvas = document.createElement("canvas");

// 设置canvas的宽度和高度
this.canvas.setAttribute("width", w);
this.canvas.setAttribute("height", h);

// 将canvas节点添加到DOM树
this.ob.appendChild(this.canvas);

// 取得绘图上下文,这儿使用的是2D绘图
var ctx = this.canvas.getContext("2d");
// 设置填充色
ctx.fillStyle = "#f5f5f5";
// 设置画布背景色(画一个大的实心矩形)
ctx.fillRect(0, 0, w, h);

接下来就是循环,绘制每个格子的四条边,如下:

// 设置画笔颜色,注意和上面的设置填充色不同
ctx.strokeStyle = "#333333";
// 设置画笔粗细
ctx.lineWidth = 0.5;

// 画线方法
var _d = function (x1, y1, x2, y2) {
	// 开始路径
	ctx.beginPath();
	// 画笔移动到起始点
	ctx.moveTo(x1, y1);
	// 画一条直线到点(x2, y2)
	ctx.lineTo(x2, y2);
	// 调用了这个方法后,线条才会真正出现在画布上
	ctx.stroke();
	// 关闭路径
	ctx.closePath();
};

// 根据当前格子的值,确定其上、下、左、右四条边的状态
if (!(v & 1))
	_d(ix, iy, ix2, iy);
if (!(v & 2))
	_d(ix2, iy, ix2, iy2);
if (!(v & 4))
	_d(ix, iy2, ix2, iy2);
if (!(v & 8))
	_d(ix, iy, ix, iy2);

其中如何根据当前格子的值算出其四条边的状态请参见上一篇帖子

有一点让我不太满意的是线条粗细似乎最细只能是 2px,当把线条的 lineWidth 值设得更小(比如 0.5)时,线条不会继续变细,只会变淡。不知道是不是还有其他设置,或者要画更细的线条时只能通过直接操纵像素来完成?(在 HTML5 Canvas 中画线条需要注意,如果起点、终点都是整数数值,画出来的线条宽度至少为 2px,要画出 1px 的线条,需要指定起点、终点为一个以 0.5 结尾的小数。相关说明可以看这儿。)

下图是使用 canvas 绘制的效果:

最后,再贴一下这个迷宮游戏的地址:https://oldj.net/static/maze/maze.html。:-)

分类:编程标签:HTML5网页游戏迷宫JavaScript

相关文章:

评论:

暂无评论

发表评论: