001
<
html
>
002
<
head
>
003
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
004
005
006
007
<
title
>青蛙公主</
title
>
008
<
style
>
009
#pool {}
010
.lotus_leaf {width: 30px; height: 30px; margin: 2px; float:left; background-color:#dddddd;font-size:24px;line-height:30px;text-align:center;}
011
.on { background-color:#99cc66;cursor:pointer;}
012
.off { background-color:#cccc99;cursor:default;}
013
.clear {clear:both;}
014
</
style
>
015
</
head
>
016
<
body
>
017
<
div
>
018
<
h3
>青蛙公主游戏玩法</
h3
>
019
<
p
>绿色为荷叶,带箭头的为青蛙。操作方法:鼠标点击操作,单击荷叶跳,背对着荷叶是不能跳的,只能走直线跳,并且中间不能隔着荷叶,要全把荷叶跳了才可以过关。</
p
>
020
<
p
>祝您好运!</
p
>
021
</
div
>
022
<
div
id
=
"pool"
>
023
<
div
class
=
"lotus_leaf"
id
=
"leaf_1_1"
></
div
>
024
<
div
class
=
"lotus_leaf"
id
=
"leaf_1_2"
></
div
>
025
<
div
class
=
"lotus_leaf"
id
=
"leaf_1_3"
></
div
>
026
<
div
class
=
"lotus_leaf"
id
=
"leaf_1_4"
></
div
>
027
<
div
class
=
"lotus_leaf"
id
=
"leaf_1_5"
></
div
>
028
<
div
class
=
"lotus_leaf"
id
=
"leaf_1_6"
></
div
>
029
030
<
div
class
=
"lotus_leaf"
id
=
"leaf_2_1"
></
div
>
031
<
div
class
=
"lotus_leaf"
id
=
"leaf_2_2"
></
div
>
032
<
div
class
=
"lotus_leaf"
id
=
"leaf_2_3"
></
div
>
033
<
div
class
=
"lotus_leaf"
id
=
"leaf_2_4"
></
div
>
034
<
div
class
=
"lotus_leaf"
id
=
"leaf_2_5"
></
div
>
035
<
div
class
=
"lotus_leaf"
id
=
"leaf_2_6"
></
div
>
036
037
<
div
class
=
"lotus_leaf"
id
=
"leaf_3_1"
></
div
>
038
<
div
class
=
"lotus_leaf"
id
=
"leaf_3_2"
></
div
>
039
<
div
class
=
"lotus_leaf"
id
=
"leaf_3_3"
></
div
>
040
<
div
class
=
"lotus_leaf"
id
=
"leaf_3_4"
></
div
>
041
<
div
class
=
"lotus_leaf"
id
=
"leaf_3_5"
></
div
>
042
<
div
class
=
"lotus_leaf"
id
=
"leaf_3_6"
></
div
>
043
044
<
div
class
=
"lotus_leaf"
id
=
"leaf_4_1"
></
div
>
045
<
div
class
=
"lotus_leaf"
id
=
"leaf_4_2"
></
div
>
046
<
div
class
=
"lotus_leaf"
id
=
"leaf_4_3"
></
div
>
047
<
div
class
=
"lotus_leaf"
id
=
"leaf_4_4"
></
div
>
048
<
div
class
=
"lotus_leaf"
id
=
"leaf_4_5"
></
div
>
049
<
div
class
=
"lotus_leaf"
id
=
"leaf_4_6"
></
div
>
050
</
div
>
051
<
div
class
=
"clear"
></
div
>
052
<
div
id
=
"levels"
>
053
<
p
>
054
<
a
href
=
"javascript:void(0);"
onclick
=
"javascript:loadMap([[[3,5],[3,4],[3,3],[2,3],[1,3],[1,4]],[3,5]]);"
>第1关</
a
>
055
<
a
href
=
"javascript:void(0);"
onclick
=
"javascript:loadMap([[[1,1],[2,1],[3,1],[4,1],[1,2],[2,2],[3,2],[4,2],[1,3],[2,3],[3,3],[1,4],[2,4],[3,4],[4,4],[1,5],[2,5],[3,5],[4,5]],[1,1]]);"
>第2关</
a
>
056
<
a
href
=
"javascript:void(0);"
onclick
=
"javascript:loadMap([[[1,1],[2,1],[3,1],[4,1],[4,2],[4,3],[4,4],[4,5]],[1,1]]);"
>第3关</
a
>
057
<
a
href
=
"javascript:void(0);"
onclick
=
"javascript:loadMap([[[1,1],[1,2],[1,4],[1,5],[1,6],[2,1],[2,2],[2,3],[2,4],[2,6],[3,1],[3,3],[3,4],[3,6],[4,1],[4,3],[4,4],[4,5],[4,6]],[4,1]]);"
>第4关</
a
>
058
<
a
href
=
"javascript:void(0);"
onclick
=
"javascript:mapEditorMode();return false;"
>地图编辑器</
a
>
059
</
p
>
060
</
div
>
061
062
<
div
class
=
"clear"
></
div
>
063
<
div
>
064
<
textarea
rows
=
"5"
cols
=
"30"
id
=
"mapEditorResult"
></
textarea
>
065
<
input
type
=
"button"
value
=
"试玩"
onclick
=
"return mapEditorPreview();"
/>
066
</
div
>
067
</
body
>
068
</
html
>
069
070
071
072
073
<
script
type
=
"text/javascript"
>
074
var ROW = 12, COL = 16, SIZE = 30;
075
var g_map = [[[3,2],[3,3],[3,4],[3,5]],[3,2]];
076
//var g_map = [[[3,5],[3,4],[3,3],[2,3],[1,3],[1,4]],[3,5]];
077
var g_cur = [-1,-1];
078
var g_cnt = [0, 0];// [total, remaining]
079
080
function g(x){return document.getElementById(x);}
081
function loadMap(map) {
082
var html = '';
083
for (var i=1; i<=ROW; i++) {
084
for (var j=1; j<=COL; j++) {
085
html += '<
div
class
=
"lotus_leaf"
id
=
"leaf_'+i+'_'+j+'"
></
div
>';
086
/*var me = g('leaf_'+i+'_'+j);
087
me.className = 'lotus_leaf';
088
me.removeAttribute('x');
089
me.removeAttribute('y');
090
me.onclick = null;
091
me.innerHTML = '';*/
092
}
093
}
094
if (!map) {
095
alert('本关开发中!');
096
return false;
097
}
098
var pool = g('pool');
099
pool.style.width = ( (SIZE+4)*COL )+ 'px';
100
pool.innerHTML = html;
101
for (var i in map[0]) {
102
setLeaf(map[0][i]);
103
}
104
g_cnt = [map[0].length, map[0].length];
105
setFlog(map[1]);
106
}
107
function setLeaf(x) {
108
var me = g('leaf_'+x[0]+'_'+x[1]);
109
me.className = 'lotus_leaf on';
110
me.setAttribute('x', x[0]);
111
me.setAttribute('y', x[1]);
112
me.onclick=function(){
113
var o = this;
114
var x = o.getAttribute('x'), y = o.getAttribute('y');
115
var dist = Math.abs(x - g_cur[0]) + Math.abs(y - g_cur[1]);
116
if (dist <
2
&& dist > 0) {
117
jumpTo([x,y]);
118
}
119
}
120
}
121
function unsetLeaf(x) {
122
var me = g('leaf_'+x[0]+'_'+x[1]);
123
me.className = 'lotus_leaf off';
124
me.innerHTML = '';
125
me.onclick=null;
126
}
127
function setFlog(x) {
128
g('leaf_'+x[0]+'_'+x[1]).innerHTML = '→';//←↑↓';
129
g_cur = x;
130
}
131
function jumpTo(x) {
132
unsetLeaf(g_cur);
133
setLeaf(x);
134
setFlog(x);
135
if (--g_cnt[1] == 1) {
136
alert('过关了!');
137
}
138
}
139
140
////////////////////////////////////////////
141
function mapEditorMode() {
142
for (var i=1; i<=ROW; i++) {
143
for (var j=1; j<=COL; j++) {
144
var me = g('leaf_'+i+'_'+j);
145
me.className = 'lotus_leaf';
146
me.setAttribute('x', i);
147
me.setAttribute('y', j);
148
me.onclick = function() {
149
var i = this.getAttribute('x'),
150
j = this.getAttribute('y');
151
mapEditorMark([i,j]);
152
};
153
me.innerHTML = '';
154
}
155
}
156
}
157
function mapEditorMark(x) {
158
var me = g('leaf_'+x[0]+'_'+x[1]);
159
me.className = (me.className == 'lotus_leaf')?'lotus_leaf on':'lotus_leaf';
160
//
161
var mapData = [[], [0,0]];
162
for (var i=1; i<=ROW; i++) {
163
for (var j=1; j<=COL; j++) {
164
var me = g('leaf_'+i+'_'+j);
165
if (me.className == 'lotus_leaf on') {
166
mapData[0].push([i,j]);
167
}
168
}
169
}
170
171
g('mapEditorResult').value = JSON.stringify(mapData);
172
}
173
function mapEditorPreview() {
174
var data = g('mapEditorResult').value;
175
if (!data){
176
alert('先编辑地图!');
177
return false;
178
};
179
var mapData = JSON.parse(data);
180
if (!mapData || !mapData[0] || !mapData[1]) {
181
alert('数据非法!');
182
return false;
183
}
184
if (!mapData[1][0] || !mapData[1][1]) {
185
alert('请手动修改修改青蛙初始位置!(最后两个数字坐标)');
186
return false;
187
}
188
189
var x = mapData[1], me = g('leaf_'+x[0]+'_'+x[1]);
190
if (!me || me.className != 'lotus_leaf on') {
191
alert('青蛙初始位置必须是荷叶!');
192
return false;
193
}
194
loadMap(mapData);
195
return false;
196
}
197
loadMap(g_map);
198
199
</
script
>