HTML5拼图游戏（网页版）

HTML5拼图游戏（网页版）

 这是我大四上学期学游戏编程期末的时候做的一个小游戏，主要用到的技术是HTML5、CSS、JavaScript、jQuery，还用到了一小部分的CSS3属性！
 下面我就简单地说一下主要程序。

游戏主要程序，首先获取画布信息，以及初始化图片

var context = document.getElementById('puzzle').getContext('2d');
var img = new Image();
img.src = '1.png';
img.addEventListener('load', drawTiles, false); //load事件侦听，即图片加载完成事件
var boardSize = document.getElementById('puzzle').width; //获取画布宽度

获取select选择器的值需要建立索引

var obj = document.getElementById("level"); //定位id
var index = obj.selectedIndex; // 选中索引
var tileCount = obj.options[index].value; // 选中值  

定义三个变量，其中两个Object对象变量，emptyLoc保存空白拼图的位置，clickLoc记录用户单击的位置。而一个bool变量solved是指拼图是否完成，所有的拼块找到正确位置后，设置他为true。

var tileSize = boardSize / tileCount; //计算拼块的大小宽度
var clickLoc = new Object;
clickLoc.x = 0;
clickLoc.y = 0;
var emptyLoc = new Object;
emptyLoc.x = 0;
emptyLoc.y = 0;
var solved = false;

使用一维数组存储每个拼块的编号。每一个元素代表一个拼块，初始时元素的数组下标与拼块的编号相同，说明位置正确。所以需要打乱数组的元素顺序，实现拼块的随机排列。而数组的元素顺序打乱使用带有排序函数的Array.sort()方法来实现
实现拼块随机排列

function setBoard()

真正显示拼块在屏幕上的是drawTiles()函数。此函数用于显示各个拼块，还判断是否是空白拼图的位置，不是则调用drawImage()绘制相应图块。最复杂的drawImage函数有九个参数，按顺序为：图片对象、图片x坐标、图片y坐标、图片宽、图片高、目标x坐标、目标y坐标、目标宽和高。后四个参数主要是为了截取原图部分用来显示。

function drawTiles() 

选择器定义触发事件，当它改变，需要重新计算拼块的数量和大小，被选择时触发onchange事件，事件中计算拼块宽度大小，重新初始化画布，显示各个拼块。

document.getElementById('level').onchange = function() 

还要追踪鼠标经过的拼块以及哪个拼块被单击，画板中移动鼠标的onmousemove事件中，计算出鼠标所在网格坐标。

document.getElementById('puzzle').onmousemove = function(e) 

画布中单击onmousemove事件中，计算出鼠标所在网格坐标与空块位置间隔，如果间距为1则移动被单击的拼块

document.getElementById('puzzle').onclick = function() 

slideTile(emptyLoc, clickLoc)是移动被单击的拼块到空块位置。移动拼图的做法是：交换对应的boardParts元素，然后把单击位置设置成空块位置。

function slideTile(emptyLoc, clickLoc) 

一旦拼图移动了，我们还要检查一下拼图是否全部在正确的位置。如果有一个拼块不正确函数就会返回false，否则返回true。

function checkSolved()

页面设计以及css样式就不多做描述了，最后的结果图如下：

游戏加载动画

游戏开始按钮

游戏主界面

结束游戏
另外游戏还有音效，主要用jQuery做的

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'audio/pi.mp3');
    audioElement.setAttribute('autoplay', 'autoplay'); //打开自动播放
    //audioElement.load()

    $.get();

    audioElement.addEventListener("load", function() {
        audioElement.play();
    }, true);

    $('#puzzle').click(function() {
        audioElement.play();
    });

});

到这里就结束了，完整的项目代码可以在主页下载或者评论区留言，看到会分享的！