Javascript: 实现拼图游戏

最新推荐文章于 2024-03-10 23:32:57 发布

VIP文章小威威__

最新推荐文章于 2024-03-10 23:32:57 发布

阅读量1.6w

点赞数 6

分类专栏： HTML-CSS JavaScript 文章标签： javascript github 拼图随机数组

本文链接：https://blog.csdn.net/linwh8/article/details/52906319

版权

注：本人网页项目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分)

效果如下：
puzzle

实现算法：
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;
}

最低0.47元/天解锁文章

小威威__

关注

6
点赞
踩
49

收藏

觉得还不错? 一键收藏
5
评论
Javascript: 实现拼图游戏

注：本人网页项目github：linwh8需求规格： 1.UI(10分)： UI与效果图完全一致；或者，自由发挥，设计出更加漂亮、合理的UI(可以使用其他图片)； 2.正常移动(20分)：点击空白旁边的图块，图块移动空白处。点击其他图块，不会移动； 3.图块图片正常(20分)：无论如何移动，每个图块上的图片都保持不变； 4.拼图结束(10分): 当拼回原图时，提示用户游戏获
复制链接

扫一扫