php-pathfinding/index.html at master · liukelin/php-pathfinding · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html class="theme-next muse use-motion">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href="http://www.liukelin.top/images/kelin_48_48.ico" rel="shortcut icon" type="images/vnd.microsoft.icon" />
<title>liukelin - A-start 最短寻路demo</title>
<style type="text/css">
/*table.hovertable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}
table.hovertable th {
    background-color:#c3dde0;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}*/
/*table.hovertable tr {
    background-color:#d4e3e5;
}*/
table.hovertable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}

table.hovertable td:hover{
    /*background-color: red ;*/
    border:1px solid red;
}
.footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 50px;
}


</style>

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>

<body style="padding:5px 15px">
<h3>基于a-start的最短距离计算，&nbsp;&nbsp;
    <a href="https://github.com/liukelin/php-pathfinding" target="_blank">GitHub/liukelin</a></h3>

<div style="padding:5px 0">
    表格大小:
    x:<input type="text" id="map_width" value="12" > - y:<input type="text" id="map_height" value="12" >
    <input type="button" name="" value="创建" id="create_maps" onClick="create_maps();" >
    &nbsp;--&nbsp;
    <input type="button" name="" title="设置障碍物" value="设置障碍物" onClick="set_action(1);" class="clicks" style="color:black;">
    <input type="button" name="" title="设置起点" value="设置起点" onClick="set_action(2);" class="clicks" style="">
    <input type="button" name="" title="设置终点" value="设置终点" onClick="set_action(3);" class="clicks" style="color:blue;">
    <label><input id="is_agree" type="checkbox" value="1" checked="checked" />允许斜向通过</label>
    <input type="button" name="" id="gen_path" value="生成路径" style="border:2px solid green;">

    <!-- <input type="button" name="" id="" value="测试" onClick="test()"> -->

</div>

<div>
<!-- Table goes in the document BODY -->
<table class="hovertable" id="maps">

</table>

</div>

<input type="hidden" name="" id="action" value="1"><!-- 当前操作 1设置障碍 2设置起点 3设置终点 -->
<input type="hidden" name="" id="location_hindrance" ><!-- 障碍物 -->
<input type="hidden" name="" id="location_begin"><!-- 起点 -->
<input type="hidden" name="" id="location_end" ><!-- 终点 -->


<!-- <footer class="footer">
<div style="width:100%;text-align: center;margin: 20px auto">
<a href="https://github.com/liukelin/php-pathfinding" target="_blank">GitHub/liukelin</a>
</div>
</footer> -->
<script type="text/javascript">

    function test(){
        alert($("#is_agree").is(":checked")?1:0);
    }

    // 生成地图
    function create_maps(){
        var map_width = $('#map_width').val();
        var map_height = $('#map_height').val();
        if (isNaN(map_width) || isNaN(map_height) || parseInt(map_width)<=0 || parseInt(map_height)<=0) {
            alert('地图大小值请输入大于0数字');
            return false;
        }

        // alert(map_width,map_height);
        // $('#maps').html('');
        $('#action').val('1');
        $('#location_hindrance').val('');
        $('#location_begin').val('');
        $('#location_end').val('');
        var maps = '';
        for (var x=0; x<map_width; x++){
            maps += '<tr>';
            for (var y=0; y<map_height; y++){
                maps += '<td class="location_td" onClick="location_td_click(this)" x="'+x+'" y="'+y+'" id="location_'+x+'-'+y+'" ><span>('+x+','+y+')</span></td>';
            }
            maps += '</tr>';
        }
        $('#maps').html(maps);
    }


    // 记录设置动作
    function set_action(action){
        // alert(action);
        $('#action').val(action);
    }

    // 坐标设置 （单击设置障碍物、起点、终点）
    function location_td_click(t){

       x = $(t).attr('x');
       y = $(t).attr('y');
       // alert($(t).attr('x'));

       $(t).attr('is_path',''); // 清除路径标识
       action = parseInt($('#action').val());
       if (action==1) { // 设置障碍物
            $('#location_hindrance').val($('#location_hindrance').val() +'|'+x+'-'+y);
            $(t).attr('style',"background-color: black;");

       }else if(action==2){ // 设置起点
            // 将旧设置清空
            $('#location_'+ $('#location_begin').val()).attr('style','');

            $('#location_begin').val(x+'-'+y);
            $(t).attr('style', "background-color: yellow;");

       }else if(action==3){ // 设置终点
            // 将旧设置清空
            $('#location_'+ $('#location_end').val()).attr('style','');

            $('#location_end').val(x+'-'+y);
            $(t).attr('style','background-color: blue;');

       }

    }

    /**
    // 记录障碍物设置
    function location_hindrance(){
        $('#location_hindrance');
    }

    // 记录终点起点设置
    function location_begin(location){
        $('#location_begin').val(location);
    }

    // 记录终点起点设置
    function location_end(location){
        $('#location_end').val(location);
    }
    **/

    $(function(){
        create_maps();

    　　$("#create_maps").click(function(){
           create_maps();
        });

        $('#gen_path').click(function(){
            $.ajax({
                type: 'POST',
                data:{
                    map_width:$('#map_width').val(),
                    map_height:$('#map_height').val(),
                    location_hindrance:$('#location_hindrance').val(),
                    location_begin:$('#location_begin').val(),
                    location_end:$('#location_end').val(),
                    is_agree: $("#is_agree").is(":checked")?1:0
                },
                url: 'service/api.php',
                dataType: 'json',
                success: function(data){
                    if (data.c>=0) {
                        if (data.path && data.path.length>0) {
                            // 初始化旧路径
                            $("td[is_path=1]").attr('style','');

                            $.each(data.path,function(key,value){
                                //标记路径
                                $('#location_'+value.x+'-'+value.y).attr('style','background-color: green;');
                                $('#location_'+value.x+'-'+value.y).attr('is_path','1');
                            });
                        }else{
                            alert('获取路径失败');
                        }
                    }else{
                        alert(data.msg);
                    }
                }
            });
        });

        var htt=location.protocol;
        $.ajax({
            type: 'post',
            data:{
                site:window.location.href
            },
            url: htt+'//bi.liukelin.top/bi/web_bi/',
            dataType: 'json'
        });

    });


</script>

</body>
</html>