滑动拼图游戏.docVIP

滑动拼图游戏 HTML 5的一个滑动拼图游戏 2012-05-14 13:29 html5cn HTML5 canvas的宽和高使用像素为单位。如果这两个属于没有被指定，他们的默认的宽度为：300px，高度为：150px。在图板画图需要使用canvas的上下文环境，通过脚本调用getContext()方法获取上下文环境。 AD： HTML5有许多功能特性可以把多媒体整合到网页中。使用canvas元素可以在这个空白的画板上填充线条，载入图片文件，甚至动画效果。 在这篇文章中，我将做一个滑动拼图的游戏用来展示HTML5 canvas的图片处理能力。在网页中使用canvas标签用来创建画板。 canvas width=480px height=480px/canvas canvas的宽和高使用像素为单位。如果这两个属于没有被指定，他们的默认的宽度为：300px，高度为：150px。在图板画图需要使用canvas的上下文环境，通过脚本调用getContext()方法获取上下文环境。W3C定义它为二维，更确切的说是2d。所以初始化上下文环境如果如下方法: document.getElementById(vanvas).getContext(2d); 下一步要做的是在画板上显示图片，API只提供drawImage()一种方法。但是有三种调用方式。最常用的是传入三个参数：image对象，以及图片相对于画板的x,y坐标。 drawImage(image, x, y); 还可以加入两个参数用于设置图片的宽和高 drawImage(image, x, y, width, height); 最复杂的drawImage函数有9个参数，按顺序分别为：图片对象，图片x坐标，图片y坐标，图片宽，图片高，目标x坐标，目标y坐标，目标宽和目标高。后四个参数主要是为了截取原图部分用来显示，比如局部放大、剪切等。以上就是图像处理的方法，让我们做一个练习。 div id=slider form labelEasy/label input type=range id=scale value=4 min=3 max=5 step=1 labelHard/label /form br /div div id=main class=main canvas id=puzzle width=480px height=480px/canvas /div 上面的DIV包括了另一个HTML5标签：range input，这个标签可以让用户拖放滑块选择一个数值。回头我们再说在拼图中如何与range input交互。到目前为止ie和firefox并不支持这个标签。 现在就像我上面说过，想要在canvas上绘图，我们需要context。 var context = document.getElementById(puzzle).getContext(2d); 对了我们还需要一个图片，使用例子里自带的，或者找一个和canvas相同大小的图片都行。 var img = new Image(); img.src = /Images/dimetrodon.jpg; img.addEventListener(load, drawTiles, false); 加入这个事件是确保图片完成加载后，再把图片放入canvas中。下面我们通过range input设置拼图的数量，数据范围从3到5(几行几列)。 var boardSize = document.getElementById(puzzle).width; var tileCount = document.getElementById(scale).value; 有了上面两个数值就可以计算一个拼图的大小了 var tileSize = boardSize / tileCount; OK我们开始创建画板 var boardParts = new Object; setBoard(); setBoard()的作用是初始化看板，要模拟显示这个画板，我们使用一个二维数组。不过用JavaScript创建这样数组的过程不是很优雅，我们先定义一个平面数组，每个数组再定义一个数组。这个拼图游戏，每一个元素都是一个对象，它带有x和y坐标记录所在的网格位置。因此每个对象有两个坐标，第一个坐标是数组坐标，表示它在画板的位置，另外的坐标是对象的x,y属性，它记录着拼图图片的位置。当这两个坐标相同了就说明位置正确。 为了达到目的，我们在初始化的时候把它们的位置互换。这样拼图就不在正确的位置了。 function setBoard() { boardParts = ne