html写的迷宫游戏，网页开发游戏，js实现游戏

下载底部的文件代码就可以直接打开开始游戏，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>

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",
];

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

html写的迷宫游戏，网页开发游戏，js实现游戏相关推荐

【游戏开发面经1】游戏客户端开发岗（阿里 | 游戏 | 凉面面经）
转载自[林新发] 本文只是用来分享,如有不妥,请联系删除. 文章目录一.前言二.流程 1.简历 2.一面,技术面 2.1.技术题 2.2.常规题 2.3.面试结果 3.二面,技术面 3.1.技术 ...
计算机莫名其妙的游戏网页弹出,自动弹出游戏网页怎么办自动弹出游戏网页解决方法【详解】...
自动弹出游戏网页怎么办? 网页是一个文件,他存放在世界某个角落的某一部计算机中,而这部计算机必须是与互联网相连的. 好的网页带给用户信息,但要是老是弹出无聊的广告网页那就有点烦了.那么,如何还电脑一个 ...
python坦克大战游戏_Python开发的坦克大战游戏
python开发的坦克大战游戏importpygamefrom pygame.sprite importSpriteimportsysimporttimeimportrandom SCREEN_WID ...
python贪吃蛇小游戏_python开发贪吃蛇小游戏
3.概要设计 3.1 程序功能模块由设计应解决的问题可知,本次的设计是使用用方向键来实现一个简易的贪吃蛇小游戏的程序,具体的功能模块如图3-1所示. 图3-1 程序功能模块 Fig.3-1 prog ...
计算机不能玩游戏网页怎么办,电脑不能玩游戏怎么办
圣歌更新后无法登录游戏怎么办圣歌很多玩家更新游戏后,出现提示驾驶员数据读取错误,无法登录.圣歌更新后无法登录游戏怎么办? apex英雄进不去游戏怎么办 apex英雄卡读条界面怎么解决?还不清楚的玩家 ...
贪吃蛇html网页小游戏,网页贪吃蛇HTML5小游戏制作
贪吃蛇是以前我们经常在手机里玩的一个小游戏,现在要是把它搬到网页上也会让人更回味.这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏.在游戏中你可以使用键盘的上下左右来控制蛇的运动方向.现在要列出的是 ...
C++原生游戏引擎开发棒子打老鼠游戏！
VC++棒子打老鼠游戏源代码,俗称打地鼠,程序可以编译,但运行时候棒子的显示有些问题,也就是程序在处理BMP图像时候有些不完善,不过整体可以玩,相信大家都知道这款游戏 ,现在发布源代码供研究. 项目截 ...
微信小游戏MagnetGame开发（十）游戏音效
第一步: 在Game脚本中加入得分音效资源.背景音效资源.游戏结束音效资源三个AudioClip资源,并且和准备的三个音频文件分别绑定: // 得分音效资源scoreAudio: {default: ...
html掷骰子小游戏,网页实现掷骰子小游戏
首先明确需求: 在网页正中间展示骰子,点数为一点,点击骰子,骰子旋转然后停留在随机点位上.再次点击骰子,骰子可以继续旋转并停留在随机点位上. 这里我们使用css3动画.3d旋转配合js实现效果一,H ...
html5 打气球小游戏,javascript开发打气球小游戏
web前端群,189394454,有视频.源码.学习方法等大量干货分享效果知识点:css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用 ...

html写的迷宫游戏，网页开发游戏，js实现游戏

所有文件下载地址：https://download.csdn.net/download/weixin_42258802/10749303

html写的迷宫游戏，网页开发游戏，js实现游戏相关推荐

最新文章

热门文章