注:本人网页项目github:linwh8
需求规格:
1.UI(10分): UI与效果图完全一致;或者,自由发挥,设计出更加漂亮、合理的UI(可以使用其他图片);
2.正常移动(20分): 点击空白旁边的图块,图块移动空白处。点击其他图块,不会移动;
3.图块图片正常(20分):无论如何移动 ,每个图块上的图片都保持不变;
4.拼图结束(10分): 当拼回原图时,提示用户游戏获胜;
5.重新开始(10分):点击重新开始,打乱、重新洗牌;
6.增加趣味性(10分):发挥想象力,增加内容或者功能,让游戏更加好玩。
软件质量要求:
Soc:(5分) 正确运用适当的语言分别定义网页的内容、外观和行为,没有侵入式代码
HTML代码符合课程要求(5分)
CSS代码符合课程要求(5分)
JavaScipt代码符合课程要求(5分)
效果如下:
实现算法:
1. JavaScript动态生成拼图:通过生成16个div,且除最后一个div不使用背景图片以外,其他div都设置拼图图片为背景。然后通过调整background-position来实现效果图中的拼图效果;
2. 打乱拼图:定义一个大小为15的数组,且其中的值依次为1-15,然后通过定义一个比较函数,利用sort(cmp)实现随机打乱,也就生成了一个随机数组,然后根据这个数组改变类名,定义拼图分块的位置;
function cmp() {
return 0.5-Math.random();
}
但是,生成的拼图不一定能恢复到原来的样子,必须进行验证,如果没有通过验证,则需要重新生成随机数组,对于这个验证,可以详见这篇博文: 15迷问题的证明(15 puzzle)
3 .非常重要:id用来代表图片的特定位置,如第一行第一个,第二行第三个等,然后通过类来定义left与top属性,即可以通过改变类名来实现元素的移动。
4. 元素的移动:需要判断点击的方格是否与空方格相邻,可以通过offsetTop与offsetLeft属性进行比较判断,然后通过交换被点击方格与空白方格的类名来实现;
5. 检查是否结束游戏:生成拼图时,id与position是一一对应的,因此只需要判断所有元素是否都一一对应,如果都一一对应,游戏结束,否则,继续。
代码如下:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fifteen_puzzle</title>
<link rel="stylesheet" type="text/css" href="CSS/puzzle.css">
<script type="text/javascript" src="JS/puzzle.js"></script>
</head>
<body>
<h1> 拼图游戏 </h1>
<div id="result"></div>
<div id="picture"></div>
<div id="restart">重新开始</div>
<div id="change_image">更换图片</div>
</body>
</html>
CSS:
/* 大布局定位 */
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}