html5拼图游戏开题报告,HTML5⼈物拼图游戏
原标题：HTML5⼈物拼图游戏
7.1 ⼈物拼图游戏介绍
拼图游戏将⼀幅图⽚分割成若⼲拼块并将它们随机打乱顺序。当将所有拼块都放回原位置时，就完成了拼图(游戏结束)。
在“游戏”中，单击滑块选择游戏难易，“容易”为3⾏3列拼图游戏，中间为⼀个4⾏4列拼图游戏，“难”为5⾏5列拼图游戏。拼块以随机顺序排列，玩家⽤⿏标单击空⽩块四周的来交换它们位置，直到所有拼块都回到原位置。拼图游戏运⾏结果如图7-1。
7.2 程序设计的思路
同性恋是天生的吗
HTML5可以把图⽚整合到⽹页中。使⽤canvas元素可以在这个空⽩的画布上填充线条，载⼊图⽚⽂件，甚⾄动画效果。这⾥制作拼图游戏⽤来展⽰HTML5 canvas的图⽚处理能⼒。
游戏程序⾸先显⽰以正确顺序排列的图⽚缩略图，根据玩家设置的分割数，将图⽚分割成相应tileCount⾏列数的拼块，并按顺序编号。动态⽣成⼀个⼤⼩tileCount*tileCount的数组boardParts，存放⽤0，1，2到tileCount*tileCount-1的数，每个数字代表⼀个拼块(例如4*4的游戏拼块编号如图7-2所⽰)。
游戏开始时，随机打乱这个数组boardParts，假如boardParts[0]是5则在左上⾓显⽰编号是5的拼块。根据玩家⽤⿏标点击的拼块和空⽩块所在位置，来交换该boardParts数组对应元素，最后判断元素排列顺序来判断是否已经完成游戏。
7.3 程序设计的步骤
1. 游戏页⾯
拼图游戏
.picture {
border:1px solid black;
英文座右铭
}
拼图游戏
容易
难
defa.jpg
>
操守
在⽹页中使⽤canvas标记⽤来创建画板。
canvas的宽和⾼使⽤像素为单位。如果这两个属于没有被指定，它们的默认的宽度为：300px，⾼度为：150px。
⽹页中
包括了另⼀个HTML5标记：range input，这个标记可以让⽤户拖放滑块选择⼀个数值。这⾥设置滑块最⼩值为3，最⼤值为5。滑块值为3表明拼图游戏是3⾏3列的，滑块值为4表明拼图游戏是4⾏4列的，滑块值为5表明拼图游戏是5⾏5列的。
defa.jpg显⽰原图defa.jpg的缩⼩图供玩家参照移动拼块。
2. sliding.js ⽂件
在页⾯上画图需要使⽤ canvas的上下⽂环境，通过调⽤getContext()⽅法获取上下⽂环境。
var context =ElementById('puzzle').getContext('2d');
我们还需要⼀个和canvas相同⼤⼩的图⽚'defa.jpg'。
var img = new Image();
img.src = 'defa.jpg';
img.addEventListener('load', drawTiles, fal);
//load事件侦听，即图⽚加载完成事件
加⼊这个'load'事件是确保图⽚完成加载后，再把图⽚放⼊canvas中。drawTiles()函数绘制打乱的图块。
聊斋志异莲香var boardSize =ElementById('puzzle').width;
//获取画板(画布)的宽度
var tileCount =ElementById('scale').value;
//获取滑块的值
boardSize是canvas的宽度，通过rangeinput设置拼图的数量tileCount，数据范围从3到5(⼏⾏⼏列)。
var tileSize = boardSize / tileCount;
//计算出拼块的⼤⼩宽度
最后定义3变量，其中2个Object对象变量，emptyLoc保存空⽩拼图的位置(emptyLoc.x，emptyLoc.y)，clickLoc记录⽤户单击的位置(clickLoc.x，clickLoc.y)。⽽1个bool变量solved是指拼图是否完成，所有的拼图都找到正确的位置后，设置它为true。
var context =ElementById('puzzle').getContext('2d');
var img = new Image();
img.src = 'dimetrodon.jpg';
img.addEventListener('load', drawTiles, fal);
//load事件侦听，即图⽚加载完成事件
var boardSize = ElementById('puzzle').width;
//获取画板(画布)的宽度
var tileCount =ElementById('scale').value;
//获取滑块的值
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 = fal;
//拼图是否完成，fal为未完成
下⾯实现拼块的随机排列。
我们使⽤⼀个⼀维数组存储每个拼块的编号。每⼀个元素代表⼀个拼块，初始时元素的数组下标与拼块的编号相同，说明位置正确。所以需要打乱数组的元素顺序，实现拼块的随机排列。⽽数组的元素顺序打乱使⽤带有排序函数的Array.sort()⽅法实现。
var boardParts = new Object();
initBoard();
//初始化拼块，并随机排列
function initBoard() {
boardParts = new Array(tileCount * tileCount);
for (vari = 0; i < tileCount * tileCount; i++) {
boardParts[i] = i;
}
shift(); //拼块的随机排列
}
function sortNumber(a,b) {//随机排序函数
returnMath.random() > 0.5 ? -1 : 1;
}
function shift() { //拼块的随机排列
boardParts.sort(sortNumber);
emptyLoc.x = 0;
emptyLoc.y = 0;
solved =fal;
}
以上就实现拼块的随机放置。但是真正显⽰拼块在屏幕上是drawTiles()函数。drawTiles()函数显⽰各
秘密作文600字
个拼块。这个函数判断是否是空⽩拼图的位置(emptyLoc.x，emptyLoc.y)，不是则调⽤drawImage()绘制相应图块。
drawImage()最常⽤的是传⼊三个参数：image对象，以及图⽚相对于画布的x,y坐标。drawImage(image, x, y);
还可以加⼊两个参数⽤于设置图⽚的宽和⾼：
drawImage(image, x, y, width, height);
最复杂的drawImage函数有9个参数，按顺序分别为：图⽚对象，图⽚x坐标，图⽚y坐标，图⽚宽，图⽚⾼，⽬标x坐标，⽬标y坐标，⽬标宽和⽬标⾼。后四个参数主要是为了截取原图部分⽤来显⽰。这⾥把boardParts记录的拼块显⽰在(i*tileSize,j*tileSize)处。笔记本电脑怎么设置锁屏密码
//绘制所有拼块
function drawTiles() {
context.clearRect(0, 0, boardSize, boardSize);
for (vari = 0; i < tileCount; i++) {
for(var j = 0; j < tileCount; j++) {
var n = boardParts[i * tileCount + j];
//计算出编号为n的拼块在原图的位置坐标(⾏列号)
var x = parInt(n / tileCount);
//丢弃⼩数部分, 保留整数部分
var y = n % tileCount;
console.log(x + ":" + Math.floor(n / tileCount) +":" + y);
if (i!= j!= solved==true) {
//不是空⽩拼图的位置且游戏未结束
//或者if( !(i==emptyLoc.x&&j== emptyLoc.y&&solved==fal))可能更容易明⽩
//将编号为n的拼块显⽰在(i * tileSize, j * tileSize)处
context.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize,
i * tileSize, j * tileSize, tileSize, tileSize);
}
}
}
}
以下是事件定义。
⾸先为滑块定义触发事件，当它改变了，我们要重新计算拼块的数量和⼤⼩。滑块被移动时触发onchange事件，事件中计算拼块宽度⼤⼩，重新初始化画布，显⽰各个拼块。
tileCount =this.value;
tileSize =boardSize / tileCount;//计算拼块宽度⼤⼩
initBoard();//重新初始化拼块，并随机排列
drawTiles();//显⽰各个拼块
};
还要追踪⿏标经过的拼块以及哪个拼块被单击。画板中移动⿏标的onmoumove事件中，计算出⿏标所在⽹格坐标
clickLoc.x，clickLoc.y。
clickLoc.x= Math.floor((e.pageX - this.offtLeft) / tileSize);
clickLoc.y= Math.floor((e.pageY - this.offtTop) / tileSize);
};
画布中单击⿏标的onmoumove事件中，计算出⿏标所在⽹格坐标clickLoc.x，clickLoc.y与空块位置间隔，如果间距为1则移动被单击的拼块。
if(distance(clickLoc.x, clickLoc.y, emptyLoc.x, emptyLoc.y) == 1) {
恰似一江春水slideTile(emptyLoc, clickLoc);//交换被单击的拼块与空块位置
drawTiles();//显⽰各个拼块
}
if (solved){//如果成功
tTimeout(function() {alert("你成功了!");}, 500);
}
};
function distance(x1, y1, x2, y2) {
returnMath.abs(x1 - x2) + Math.abs(y1 - y2);
}
注意有⼀些浏览器会在重画画布之前弹出对话框，为了防⽌它的发⽣，⼀定要⽤延迟。
tTimeout(function() {alert("你成功了!");}, 500);
