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>
<!--迷宫图形,用十六进制再转换成二进制表示,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
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元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用 ...
最新文章
- 内存地址 哪个程序_记一次排查线上程序内存的忽高忽低,又是大集合惹祸了...
- Introduction to Machine Learning
- React.js 小书 Lesson15 - 实战分析:评论功能(二)
- 街头抓拍之一:酷似福克纳的老头
- kubernetes 实战 使用 nfs 作为动态 storageClass 存储
- 细数数据中台的3个业务价值和5个技术价值
- Databricks文档03----Azure Databricks 创建
- HDU 5895 Mathematician QSC
- 配置机器学习训练环境太麻烦?开源工具Parris说一键就搞定
- CSS3 新怎的伪类选择器
- android 请求服务器抛io异常,HttpURLConnection调用getResponseCode()时抛出IOException异常...
- 19款精品H5小游戏源码(2048 3d魔方 别踩白块 见缝插针) 200款普通h5小游戏源码 可直接上线
- matlab gui 简介,Matlab中Powergui的介绍.pdf
- access查找出生日期年份_access怎样利用出生日期计算年龄呀!
- 模拟qq邮箱mysql数据库_后台管理系统3.0(SrpingBoot+MySQL)界面仿QQ邮箱源代码
- 19校招华为笔试 Code3
- 轻博客之点点推他模式分析
- 实现一个返回顶部的按钮功能(基于better-scroll实现)
- UltraISO软碟通制作U盘时显示:请格式化U盘后再试。
- python 基于卡方值分箱算法
热门文章
- 轻松玩转hive中各种join之间的关系以及使用
- linux读取树莓派SD卡,树莓派系统(Linux)SD卡存储设备的命令行使用
- 九宫格 数独二进制解法
- java 游戏 弓箭手 法师 战士_酷酷爱魔兽战士弓箭手法师阵容搭配及职业特点介绍...
- 【字符串】leet459.重复的子字符串(C/C++/Java/Python/Js)
- performSelector的原理以及用法
- 【黄啊码】php函数大全,新手必备神器
- 谭浩强C++习题答案
- 自已写的“动易PowerEasy2006暴库工具”
- java bnf_Java语言标准BNF