js实现简单拼图游戏

本文实例为大家分享了js实现简单拼图游戏的具体代码，供大家参考，具体内容如下
HTML仅有一个id为game的div，并且没有编写css样式，只需要在img文件夹中放置一个图片文件就行，此处我放置的是LOL皇子的图片，图片名为'lol.png'

1. <div id="game">
2. </div>

复制代码

以下为实现后的效果图

多的不说，直接上js代码

1. /**
2. * 游戏配置
3. */
4. var gameConfig = {
5.   width: 500,
6.   height: 500,
7.   rows: 3, //行数
8.   cols: 3, //列数
9.   isOver: false, //游戏是否结束
10.   imgurl: "img/lol.png", //图片路径，注意：相对的是页面路径
11.   dom: document.getElementById("game") //游戏的dom对象
12. };
13. //每一个小块的宽高
14. gameConfig.pieceWidth = gameConfig.width / gameConfig.cols;
15. gameConfig.pieceHeight = gameConfig.height / gameConfig.rows;
16. //小块的数量
17. gameConfig.pieceNumber = gameConfig.rows * gameConfig.cols;
19. var blocks = []; //包含小方块信息的数组
21. function isEqual(n1, n2) {
22.   return parseInt(n1) === parseInt(n2);
23. }
25. /**
26. * 小方块的构造函数
27. * @param {*} left
28. * @param {*} top
29. * @param {*} isVisible 是否可见
30. */
31. function Block(left, top, isVisible) {
32.   this.left = left; //当前的横坐标
33.   this.top = top; //当前的纵坐标
34.   this.correctLeft = this.left; //正确的横坐标
35.   this.correctTop = this.top; //正确的纵坐标
36.   this.isVisible = isVisible; //是否可见
37.   this.dom = document.createElement("div");
38.   this.dom.style.width = gameConfig.pieceWidth + "px";
39.   this.dom.style.height = gameConfig.pieceHeight + "px";
40.   this.dom.style.background = `url("${gameConfig.imgurl}") -${this.correctLeft}px -${this.correctTop}px`;
41.   this.dom.style.position = "absolute";
42.   this.dom.style.border = "1px solid #fff";
43.   this.dom.style.boxSizing = "border-box";
44.   this.dom.style.cursor = "pointer";
45.   // this.dom.style.transition = ".5s"; //css属性变化的时候，在0.5秒中内完成
46.   if (!isVisible) {
47.     this.dom.style.display = "none";
48.   }
49.   gameConfig.dom.appendChild(this.dom);
51.   this.show = function () {
52.     //根据当前的left、top，重新设置div的位置
53.     this.dom.style.left = this.left + "px";
54.     this.dom.style.top = this.top + "px";
55.   }
56.   //判断当前方块是否在正确的位置上
57.   this.isCorrect = function () {
58.     return isEqual(this.left, this.correctLeft) && isEqual(this.top, this.correctTop);
59.   }
61.   this.show();
62. }
64. /**
65. * 初始化游戏
66. */
67. function init() {
68.   //1. 初始化游戏的容器
69.   initGameDom();
70.   //2. 初始化小方块
71.   //2.1 准备好一个数组，数组的每一项是一个对象，记录了每一个小方块的信息
72.   initBlocksArray();
73.   //2.2 数组洗牌
74.   shuffle();
75.   //3. 注册点击事件
76.   regEvent();
78.   /**
79.   * 处理点击事件
80.   */
81.   function regEvent() {
82.     //找到看不见的方块
83.     var inVisibleBlock = blocks.find(function (b) {
84.       return !b.isVisible;
85.     });
86.     blocks.forEach(function (b) {
87.       b.dom.onclick = function () {
88.         if (gameConfig.isOver) {
89.           return;
90.         }
91.         //判断是可以交换
92.         if (b.top === inVisibleBlock.top &&
93.           isEqual(Math.abs(b.left - inVisibleBlock.left), gameConfig.pieceWidth)
94.           ||
95.           b.left === inVisibleBlock.left &&
96.           isEqual(Math.abs(b.top - inVisibleBlock.top), gameConfig.pieceHeight)) {
97.           //交换当前方块和看不见的方块的坐标位置
98.           exchange(b, inVisibleBlock);
99.           //游戏结束判定
100.           isWin();
101.         }
103.         //交换当前方块和看不见的方块的坐标位置
104.         // exchange(b, inVisibleBlock);
105.         // //游戏结束判定
106.         // isWin();
107.       }
108.     })
109.   }
111.   /**
112.   * 游戏结束判定
113.   */
114.   function isWin() {
115.     var wrongs = blocks.filter(function (item) {
116.       return !item.isCorrect();
117.     });
118.     if (wrongs.length === 0) {
119.       gameConfig.isOver = true;
120.       //游戏结束，去掉所有边框
121.       blocks.forEach(function (b) {
122.         b.dom.style.border = "none";
123.         b.dom.style.display = "block";
124.       });
125.     }
126.   }
128.   /**
129.   * 随机数，能取到最大值
130.   * @param {*} min
131.   * @param {*} max
132.   */
133.   function getRandom(min, max) {
134.     return Math.floor(Math.random() * (max + 1 - min) + min);
135.   }
137.   /**
138.   * 交换两个方块的left和top
139.   * @param {*} b1
140.   * @param {*} b2
141.   */
142.   function exchange(b1, b2) {
143.     var temp = b1.left;
144.     b1.left = b2.left;
145.     b2.left = temp;
147.     temp = b1.top;
148.     b1.top = b2.top;
149.     b2.top = temp;
151.     b1.show();
152.     b2.show();
153.   }
155.   /**
156.   * 给blocks数组洗牌
157.   */
158.   function shuffle() {
159.     for (var i = 0; i < blocks.length - 1; i++) {
160.       //随机产生一个下标
161.       var index = getRandom(0, blocks.length - 2);
162.       //将数组的当前项与随机项交换left和top值
163.       exchange(blocks[i], blocks[index]);
164.     }
165.   }
167.   /**
168.   * 初始化一个小方块的数组
169.   */
170.   function initBlocksArray() {
171.     for (var i = 0; i < gameConfig.rows; i++) {
172.       for (var j = 0; j < gameConfig.cols; j++) {
173.         //i 行号，j 列号
174.         var isVisible = true;
175.         if (i === gameConfig.rows - 1 && j === gameConfig.cols - 1) {
176.           isVisible = false;
177.         }
178.         var b = new Block(j * gameConfig.pieceWidth, i * gameConfig.pieceHeight, isVisible);
179.         blocks.push(b);
180.       }
181.     }
182.   }
184.   /**
185.   * 初始化游戏容器
186.   */
187.   function initGameDom() {
188.     gameConfig.dom.style.width = gameConfig.width + "px";
189.     gameConfig.dom.style.height = gameConfig.height + "px";
190.     gameConfig.dom.style.border = "2px solid #ccc";
191.     gameConfig.dom.style.position = "relative";
192.   }
193. }
195. init();

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。