下载底部的文件代码就可以直接打开开始游戏，W、A、S、D键对应的移动向为上、左、下、右。
<!doctype html><html><head>
<title>迷宫</title>
</head><body>
<!--引入音效及图片-->
<audio id="myaudio"> <source src="..\迷宫\8916.wav" type="audio/mpeg"/></audio>
<audio id="winaudio"> <source src="..\迷宫\胜利音效.wav" type="audio/mpeg"/></audio>
<audio id="overaudio"> <source src="..\迷宫\挑战失败音效.wav" type="audio/mpeg"/></audio>
<div id="box" style="width:1200px;height:1013px;letter-spacing:-1.5px;font:10px/11px 宋体;background:#DDDDDD;color:#000000;border:#999 20px ridge;">
</div>
<span id="boxa" style="font:60px/60px 微软雅黑;color:#DDDDDD;position:absolute; left:996px; background:#888888;top:28px;width:9px; height:1013px"></span>
<span id="start" style="cursor:pointer;position:absolute; left:350px;top:300px;"><img src= "..\迷宫\开始游戏.png" height="150" οnclick="start()" width="300" /></span>
<span id="start1" style="cursor:pointer;position:absolute; left:130px;top:380px;"><img src= "..\迷宫\诸葛亮.png" height="200" width="210" /></span>
<span id="start2" style="cursor:pointer;position:absolute; left:700px;top:380px;"><img src= "..\迷宫\地图.png" height="200" width="200" /></span>
<span id="over" style="cursor:pointer;position:absolute; left:310px;top:320px;"></span>
<span id="win" style="cursor:pointer;position:absolute; left:210px;top:320px;"></span>
<span id="time" style="font:20px/20px 微软雅黑;color:#FFFAFA;position:absolute; left:1020px; background:#888888;top:60px;width:190px; height:23px">游戏时长：3分00秒</span>
<span id="num" style="font:10px/10px 微软雅黑;color:witch;position:absolute; left:1020px;top:1000px;width:190px;">移动步数：0</span>
<script>
<!--迷宫图形，用十六进制再转换成二进制表示，0代表可行进路径，1代表围墙-->
var map=["fffffffffffffffffffffff",
"80000200000000000000001",
"bffffaffffffffefffffffd",
"a0000280000000000000001",
"affffeffffffffffffffffd",
"a8000080000000000000015",
"abfffffffffffffffffffd5",
"aa000000000000000000055",
"aafffffffffffffffffff55",
"aa800000000000000000155",
"aabfffffffffffffffffd55",
"a8a00000000000000000555",
"abafffffffffffffffff555",
"aea80000000000000001555",
"a82bfffffffffffffffd555",
"abaa0000000000000005555",
"aaaaffbffffffffffff5555",
"aaaa8080000000000015555",
"aaaabebfffffffffffd5555",
"aaaaa000000000000055555",
"aaaaaffffffffffffd55555",
"aaaaa800000000000155555",
"aaaaabfffffffffffd55555",
"aaaaaa00000000080555555",
"aaaaaaffffffffbff555555",
"aaaaaa80000000201555555",
"aaaaaabfffffffffd555755",
"aaaaaaa0000000005555155",
"aaaaaaafffffffff5555555",
"aaaaaaa8000000015515555",
"aaaa8aabfffffffd5555555",
"aaaabeaa000000055555555",
"aaaaa0aafffffff55155555",
"aaaaaeaa800000145755551",
"aaaaaaaabfffffd55555557",
"aaaaabaaa0000055d555555",
"aaaaaaaaafffff555555555",
"aaa8a82aa80001551555555",
"aaa8aaaaabfdfd555555555",
"aaaeabeaaa0005555554555",
"aaa2aa2aaafff5555555d55",
"aabaaaaaaa8015555555555",
"aaaaaaaaaabfd5555555555",
"aaaaaaaaaaa855555555555",
"aaaaaaaaaaab55555555555",
"aaa8aaaaaa8955555555555",
"aaafaaa8aaa955555555555",
"aa802aaaaaaf55555555555",
"aaeeeaaaaaa055555555555",
"aabb8aaaaabfd5555555555",
"aa22baaaaa8015555555555",
"aaaaa2aaaaeff5555555555",
"aaaaaeaaaa0005555555555",
"aaaaa8aaabfffd555555555",
"aaaaaaaaa80001555555555",
"aaaaaaaaaffffd555555555",
"aaaaaaaaa00000555555555",
"aa88aaaabffffbd55555555",
"aaaeaaaa800021155555555",
"aabaaaaabfffb7f55555555",
"aaa2aaaa000010055555555",
"aaaaaa8bbfffdffd5555555",
"aaaaaaa8200000015555555",
"aaaaaaabfeffffffd555555",
"aaaaaaa0080000001555555",
"aaaaaabfdffffffff555555",
"abaaaa80400000000155555",
"aaa8aaffffffffeffd55555",
"a8abaa00000000200555555",
"aaa82bffffffffbf7755555",
"aaaea800080000001015555",
"a0aaafffdfffffff7fd5555",
"aaaaa000800000000054555",
"bfaabffdffffffffff55555",
"aaaa8008800000000015555",
"a0aafffbfffffffffff5555",
"aaaa0010000000000005755",
"aaabfffffffffffffffd1d5",
"aaa80000000000000001555",
"aaefffbfffffffffffffc55",
"aa880000001000000000555",
"aa3fbffffff7ffffffff775",
"aa008000000000004000145",
"aafeffffffffffffeffff5d",
"aa100000000000004400055",
"abffffffffffffffef7ffd1",
"a8000000000000000200015",
"afffffffffffffffffffff5",
"a0000000000010000000005",
"bffffffffffff6ffffffffd",
"80000000000000000000009",
"fffffffffffffffffffffdf",
];
<!--定义全局变量，n表示我的位置，back表示当下我的位置，用于n的回退，i表示时间秒，run表示自动刷新函数，j表示移动步数-->
var n,back,i,run,j;
<!--自动刷新函数一开始为关闭状态-->
clearInterval(run);
<!--控制移动音效-->
function swap_music() {
var oAudio = document.getElementById('myaudio');
oAudio.pause();
oAudio.play();
}
<!--时间倒计时-->
function time(){
--i;
var minute=parseInt(i/60);
var miao=i%60;
document.getElementById("time").innerHTML="剩余时间： "+minute+"分"+miao+"秒";
if(i===0){
clearInterval(run);
over();
}
}
<!--游戏结束-->
function over(){
document.οnkeydοwn=null;
document.getElementById("over").innerHTML='<img src="..\\迷宫\\失败.png" height="400" width="400"/><button οnclick="start()">重玩</button>';
document.getElementById("box").innerHTML="";
document.getElementById('overaudio').play();
clearInterval(run);
}
<!--游戏胜利-->
function win(){
document.οnkeydοwn=null;
document.getElementById("win").innerHTML='<img src="..\\迷宫\\胜利.png" height="400" width="600"/>';
document.getElementById("box").innerHTML="";
document.getElementById('winaudio').play();
clearInterval(run);
}
<!--记步数-->
function num(){
document.getElementById("num").innerHTML="移动步数:"+j;
++j;
}
<!--开始界面-->
function start(){
document.getElementById("start").innerHTML="";
document.getElementById("start1").innerHTML="";
document.getElementById("start2").innerHTML="";
document.getElementById("over").innerHTML="";
n=8913,back=null,i=180,run,j=0;
run=setInterval("time()",1000);
update();
}
<!--移动画布更新-->
function update(){
<!--将二进制进行排列-->
for(var i=0,a2=""; i<map.length; i++)
a2+=hex_to_bin(map[i])+"<br/>";
//alert(a2.charAt(n));
<!--标记终点的位置-->
var end="22";
a2=a2.substr(0,4507)+end+a2.substr(4509);
<!--胜利的位置-->
if(n==4313){
win();
}else{
<!--玩家移动到的位置-->
if(a2.charAt(n)==0&&a2.charAt(n)!=""){
swap_music();
var red="<span style="+"color:red"+">口</span>";
a2=a2.substr(0,n)+red+a2.substr(n+1);
document.getElementById("box").innerHTML=a2.replace(/1/g,"田").replace(/0/g,"\u3000").replace(/22/g,"<span style="+"color:red"+">终点</span>");
num();
<!--记录玩家当前位置-->
back=n;
}else{
<!--回滚到玩家当前位置-->
n=back;
}
}
}
<!--玩家移动-->
document.οnkeydοwn=function(e){
switch(e.keyCode){
case 87: n-=97;update();break;
case 83: n+=97;update();break;
case 65: n-=1;update();break;
case 68: n+=1;update();break;
}
};
<!--十六进制转换成二进制-->
function hex_to_bin(str) {
let hex_array = [{key:0,val:"0000"},{key:1,val:"0001"},{key:2,val:"0010"},{key:3,val:"0011"},{key:4,val:"0100"},{key:5,val:"0101"},{key:6,val:"0110"},{key:7,val:"0111"},
{key:8,val:"1000"},{key:9,val:"1001"},{key:'a',val:"1010"},{key:'b',val:"1011"},{key:'c',val:"1100"},{key:'d',val:"1101"},{key:'e',val:"1110"},{key:'f',val:"1111"}]
let value=""
for(let i=0;i<str.length;i++){
for(let j=0;j<hex_array.length;j++){
if(str.charAt(i)== hex_array[j].key){
value = value.concat(hex_array[j].val)
break
}
}
}
return value
}
</script></body></html>
所有文件下载地址：https://download.csdn.net/download/weixin_42258802/10749303
1051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
