Game analysis
Speaking of Huarongdao game, it is really a classic game. I remember that when I was young, there were plastic jigsaw puzzles that allowed people to play for a whole day. Sometimes I couldn’t figure it out for a long time. I just wanted to pull out each piece and regroup it. Go up, now I have a computer, and I am a rookie programmer who has been working for many years. It's time to learn how to implement this thing.
Let’s implement the Digital Huarong Road today. Digital Huarong Road is generally square, with 9 grids, 16 grids, and 25 grids. In short, the number of horizontal and vertical lines is the same.
Graphically:
- Draw a map
- Draw numbers
- Locate digital location
- Start and end button
- Timing display
- Result display
Logically speaking:
- Initialize the digital position to inform the player of success
- Click the start and end button to trigger the event. At the beginning, the number positions are sorted out of order to start timing, and at the end, the timing is stopped and the completion status is given.
- Move the number, determine whether the number meets the moving conditions and move
- Verify that the game is completed
Code
First create a .html file to import jquery, set the style, set the container
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>华容道</title>
7 <script src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
8 </head>
9 <style>
10 .box {
11 width: 300px;
12 height: 300px;
13 border: 1px solid #ccc;
14 margin: 0 auto;
15 position: relative;
16 }
17
18 .box .sz {
19 width: 90px;
20 height: 90px;
21 background: #ecc;
22 border: 2px #cec solid;
23 position: absolute;
24 font-size: 40px;
25 line-height: 90px;
26 text-align: center;
27 }
28
29 .box .sz.kong {
30 border: 2px transparent solid;
31 background: transparent
32 }
33
34 .btnbox {
35 text-align: center;
36 padding-top: 20px;
37 }
38
39 .btnbox .time {
40 color: teal
41 }
42
43 .btnbox .jieguo {
44 color: red
45 }
46 #btn {
47 text-align: center;
48 margin: 0 auto;
49 }
50 </style>
51 <body>
52 <div class="box">
53 </div><!--游戏容器-->
54 <div class="btnbox">
55 <div class="time">0</div><!--计时展示区-->
56 <div class="jieguo"></div><!--结果展示区-->
57 <button id="btn"></button><!--开始结束按钮-->
58 </div>
59 </body>
60 </html>
Start the official code part
1 $(function (k) {
2 let state = false;//初始化游戏状态true为在游戏，false为已结束或未开始
3 let second = 0;//初始化游戏用时
4 let itemWidth = 100;//初始化元素宽度
5 let gongge = 9;//初始化宫格数量，默认九宫格
6 let offset = 3;//元素偏移，用于界面展示
7 var map = [];//地图数据变量
8 function initMap(total) {
//初始化地图
9 gongge = total;
10 let rowCount = Math.pow(total, 1 / 2);
11 let colCount = rowCount;
12 let itemHeight = itemWidth;
13 for (var i = 0; i < rowCount; i++) {
14 map[i] = [];
15 for (var j = 0; j < colCount; j++) {
16 var eq = i * rowCount + j;//计算出当前UI元素的索引值
17 if (eq < total - 1) {
18 $('.box').append('<div class="sz">' + (eq + 1) + '</div>');
19 }
20 else {
21 $('.box').append('<div class="sz kong">' + '</div>');
22 }
23 map[i][j] = [i * itemWidth, j * itemWidth, eq + 1, eq + 1];//初始化地图记录每个数字的坐标当前数值，正确数值 map[i][j]=[0,0,3,1],表示x=0,y=0,当前显示为3,正确数值为1
24 //元素UI定位展示
25 $('.box .sz').eq(eq).css("top", map[i][j][0] + offset);
26 $('.box .sz').eq(eq).css("left", map[i][j][1] + offset);
27
28 }
29 }
30 }
31 function move(total) {
32 let rowCount = Math.pow(total, 1 / 2);
33 let colCount = rowCount;
34 let currnum = 0;
35 let winnum = 0;
36 let index = 0;
37 if (state) {
38 $(".box .sz").click(function (e) {
39 currnum = parseInt($(this).text() == '' ? gongge : $(this).text());
40 if (currnum == gongge) return;
41 Spance = findNum(total, gongge);//找到空位的地图信息
42 curr = findNum(total, currnum);//找到当前数字的地图信息
43 //判断当前数字是否可以移动到空位如果满足条件点击移动
44 if (Spance[0] == curr[0] && Math.abs(Spance[1] - curr[1]) == itemWidth || Spance[1] == curr[1] && Math.abs(Spance[0] - curr[0]) == itemWidth) {
45 let tmp = Spance[2];
46 Spance[2] = curr[2];
47 curr[2] = tmp;
48 DrowUI(total);
49 CheckWin(total);
50 }
51 })
52 }
53 }
54 //查找某数字的地图信息
55 function findNum(total, currnum) {
56 let rowCount = Math.pow(total, 1 / 2);
57 let colCount = rowCount;
58 for (let x = 0; x < rowCount; x++) {
59 for (let y = 0; y < colCount; y++) {
60 if (map[x][y][2] == currnum) {
61 return map[x][y];
62 }
63 }
64 }
65 }
66 //初始化界面
67 function initUI() {
68 let rowCount = Math.pow(gongge, 1 / 2);
69 $("#btn").text("开始");
70 $(".box").width(rowCount * itemWidth);
71 $(".box").height(rowCount * itemWidth);
72 }
73 //判断是否完成游戏
74 function CheckWin(total) {
75 let rowCount = Math.pow(total, 1 / 2);
76 let colCount = rowCount;
77 let itemWidth = 100;
78 let itemHeight = itemWidth;
79 let wincount = 0;
80 for (var i = 0; i < rowCount; i++) {
81 for (var j = 0; j < colCount; j++) {
82 if (map[i][j][2] == map[i][j][3]) {
83 wincount++;
84 }
85 }
86 }
87 if (wincount == total) {
//完成游戏条件，每个地图里的当前数字等于正确数字
88 Stop(true);
89 }
90 }
91 //每次移动后的界面绘制
92 function DrowUI(total) {
93 let rowCount = Math.pow(total, 1 / 2);
94 let colCount = rowCount;
95 let itemHeight = itemWidth;
96 for (var i = 0; i < rowCount; i++) {
97 for (var j = 0; j < colCount; j++) {
98 var eq = map[i][j][2] - 1;
99 $('.box .sz').eq(eq).css("top", map[i][j][0] + offset);
100 $('.box .sz').eq(eq).css("left", map[i][j][1] + offset);
101
102 }
103 }
104 }
105 var t = null;
106 //乱序数字顺序开始游戏时触发
107 function DoRandom(total) {
108 let i = 0;
109 while (i < total) {
110 let rowCount = Math.pow(total, 1 / 2);
111 let colCount = rowCount;
112 let x = Math.floor(Math.random() * rowCount);
113 let y = Math.floor(Math.random() * colCount);
114 let x1 = Math.floor(Math.random() * rowCount);
115 let y1 = Math.floor(Math.random() * colCount);
116 let tmp = 0;
117 tmp = map[x][y][2];
118 map[x][y][2] = map[x1][y1][2];
119 map[x1][y1][2] = tmp;
120 i++;
121 }
122 }
123 //开始游戏的一些设置
124 function Start(total) {
125 DoRandom(total);
126 DrowUI(total);
127 state = true;
128 move(total);
129 $("#btn").text("结束");
130 t = setInterval(function () {
131 if (state) {
132 second++;
133 }
134 $(".btnbox .time").text(second + 'S');
135 }, 1000);
136 CheckWin(total);
137 }
138 //游戏结束时的一些设置
139 function Stop(win) {
140 if (win) {
141 $(".btnbox .jieguo").text("恭喜过关！用时：" + second + "S");
142 }
143 else {
144 $(".btnbox .jieguo").text("很遗憾，没有完成！用时：" + second + "S");
145 }
146 $("#btn").text("开始");
147 $(".box .sz").off('click');
148 state = false;
149 clearInterval(t);
150 second = 0;
151 $(".btnbox .time").text(second);
152 t = null;
153 }
154 $("#btn").click(function () {
155 if (state) {
156 Stop();
157 }
158 else {
159 Start(gongge);
160 }
161 })
162 initMap(16);//这里的数字用于切换宫格数量，可以为9,16,25,36,49,64 可以修改程序让界面上点击或输入难易重构界面
163 initUI();
164 })