<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">canvas{display: block;margin: 50px auto;box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767;}body {margin: 0;padding: 0;font-family:"Microsoft YaHei", "微软雅黑", "consolas";background-attachment: fixed;}a {text-decoration:none;color:#000;}.container {width: 1000px;margin: 0 auto;}.news-list {margin: 50px 0;background-color: #FFF;border-radius: 15px;border: 1px solid #DDD;padding: 30px 20px;min-height: 300px;}.news-list:hover {box-shadow: 0 0 5px 3px #CCC;}.about .about-des {border-left: 5px solid #abc;margin-top: 15px;}.about .about-des p {padding-left: 10px;line-height: 28px;text-indent: 2em;}.news-list-left {float: left;width: 729px;margin-bottom: 50px;}.news-list-right {float: right;width: 229px;}.news-title i {display: inline-block;width: 47px;height: 43px;margin-right: 10px;vertical-align: middle;}.news-title a {color: green;}.news-title a:hover {text-decoration: underline;}.copyright {clear: both;text-align: center;color: gray;border-top: 2px solid #CCC;margin-top: 50px;padding: 20px 0;}button {cursor: pointer;width: 150px;height: 44px;margin-top: 25px;padding: 0;background: #ef4300;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;border: 1px solid #ff730e;-moz-box-shadow:0 15px 30px 0 rgba(255,255,255,.25) inset,0 2px 7px 0 rgba(0,0,0,.2);-webkit-box-shadow:0 15px 30px 0 rgba(255,255,255,.25) inset,0 2px 7px 0 rgba(0,0,0,.2);box-shadow:0 15px 30px 0 rgba(255,255,255,.25) inset,0 2px 7px 0 rgba(0,0,0,.2);font-family: 'PT Sans', Helvetica, Arial, sans-serif;font-size: 14px;font-weight: 700;color: #fff;text-shadow: 0 1px 2px rgba(0,0,0,.1);-o-transition: all .2s;-moz-transition: all .2s;-webkit-transition: all .2s;-ms-transition: all .2s;}button:hover {-moz-box-shadow:0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);-webkit-box-shadow:0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);box-shadow:0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);}button:active {-moz-box-shadow:0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);-webkit-box-shadow:0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);box-shadow:0 5px 8px 0 rgba(0,0,0,.1) inset,0 1px 4px 0 rgba(0,0,0,.1);border: 0px solid #ef4300;}</style>
</head>
<body><div class="navbar-content-2"><a >66</a></div>
</nav><div class="container"><h1>迷宫小游戏</h1><h4></h4><div class="news-list"><div class="news-list-left"><canvas id="mycanvas" width="600px" height="600px"></canvas></div><div class="news-list-right"><div class="about"><h4>关于我们</h4><div class="about-des"><span id="mytime"></span><button onclick="start()" >开始游戏</button><button onclick="stop()">暂停</button><button onclick="range()">排行榜</button><button onclick="renovates()">重新开始</button></div></div></div><footer class="copyright"></footer></div>
</div><script type="text/javascript">var aa=14;var chess = ElementById("mycanvas");var context = Context('2d');// var context2 = Context('2d');// context.strokeStyle = 'yellow';var tree = [];//存放是否联通var isling=[];//判断是否相连for(var i=0;i<aa;i++){tree[i]=[];for(var j=0;j<aa;j++){tree[i][j]=-1;//初始值为0}} for(var i=0;i<aa*aa;i++){isling[i]=[];for(var j=0;j<aa*aa;j++){isling[i][j]=-1;//初始值为0}}function drawChessBoard(){//绘画for(var i=0;i<aa+1;i++){context.strokeStyle='gray';//可选区域veTo(15+i*30,15);//垂直方向画15根线，相距30px;context.lineTo(15+i*30,15+30*aa);context.stroke();veTo(15,15+i*30);//水平方向画15根线，相距30px;棋盘为14*14；context.lineTo(15+30*aa,15+i*30);context.stroke();}}drawChessBoard();//绘制棋盘// var mymap=new Array(36);// for(var i=0;i<36;i++)// {mymap[i]=-1;}function getnei(a)//获得邻居号 random{var x=parseInt(a/aa);//要精确成整数var y=a%aa;var mynei=new Array();//储存邻居if(x-1>=0){mynei.push((x-1)*aa+y);}//上节点if(x+1<14){mynei.push((x+1)*aa+y);}//下节点if(y+1<14){mynei.push(x*aa+y+1);}//有节点if(y-1>=0){mynei.push(x*aa+y-1);}//下节点var ran=parseInt(Math.random() * mynei.length );return mynei[ran];}function search(a)//找到根节点{if(tree[parseInt(a/aa)][a%aa]>0)//说明是子节点{return search(tree[parseInt(a/aa)][a%aa]);//不能压缩路径路径压缩}elsereturn a;}function value(a)//找到树的大小{if(tree[parseInt(a/aa)][a%aa]>0)//说明是子节点{return tree[parseInt(a/aa)][a%aa]=value(tree[parseInt(a/aa)][a%aa]);//不能路径压缩}elsereturn -tree[parseInt(a/aa)][a%aa];}function union(a,b)//合并{var a1=search(a);//a根var b1=search(b);//b根if(a1==b1){}else{if(tree[parseInt(a1/aa)][a1%aa]<tree[parseInt(b1/aa)][b1%aa])//这个是负数()，为了简单减少计算，不在调用value函数{tree[parseInt(a1/aa)][a1%aa]+=tree[parseInt(b1/aa)][b1%aa];//个数相加 注意是负数相加tree[parseInt(b1/aa)][b1%aa]=a1; //b树成为a树的子树，b的根b1直接指向a；}else{tree[parseInt(b1/aa)][b1%aa]+=tree[parseInt(a1/aa)][a1%aa];tree[parseInt(a1/aa)][a1%aa]=b1;//a所在树成为b所在树的子树}}}function drawline(a,b)//划线，要判断是上下还是左右{var x1=parseInt(a/aa);var y1=a%aa;var x2=parseInt(b/aa);var y2=b%aa;var x3=(x1+x2)/2;var y3=(y1+y2)/2;if(x1-x2==1||x1-x2==-1)//左右方向的点 需要上下划线{//alert(x1);// context.beginPath();context.strokeStyle = 'white';// veTo(30+x3*30,y3*30+15);//// context.lineTo(30+x3*30,y3*30+45);context.clearRect(29+x3*30, y3*30+16,2,28);// context.stroke();}else{// context.beginPath();context.strokeStyle = 'white';// veTo(x3*30+15,30+y3*30);//// context.lineTo(45+x3*30,30+y3*30);context.clearRect(x3*30+16, 29+y3*30,28,2);// context.stroke();}}while(search(0)!=search(aa*aa-1))//主要思路{var num = parseInt(Math.random() * aa*aa );//产生一个小于196的随机数var neihbour=getnei(num);if(search(num)==search(neihbour)){continue;}else//不在一个上{isling[num][neihbour]=1;isling[neihbour][num]=1;drawline(num,neihbour);//划线union(num,neihbour);}}var a=aa*30-10,b=aa*30-10;var x = 20, y =20;function load() {var canvas = ElementById("mycanvas");Context = Context("2d");Context.fillStyle = "blue";Context.fillRect(x, y, 20, 20);context.fillStyle = "red";context.fillRect(a, b, 20, 20);Context.fillStyle = "blue";canvas.addEventListener('keydown', doKeyDown, true);canvas.focus();window.addEventListener('keydown', doKeyDown, true);}load();function doKeyDown(e) {//alert(x+" "+y);// console.log(x+" "+y);测试var keyID = e.keyCode ? e.keyCode : e.which;//获取按键的Unicode代码值if(i==1){if (keyID === 38 || keyID === 87) { // W键以及上键的移动方向if(y-30<0){}else if(isling[(x-20)/30*aa+(y-20)/30][((x-20)/30)*aa+(y-20)/30-1]!=1) {}else {clearCanvas();y = y - 30;Context.fillRect(x, y, 20, 20);e.preventDefault();gameover();show();}}if (keyID === 39 || keyID === 68) { // D键以及you键的移动方向if(x+30>15+30*aa){}else if(isling[(x-20)/30*aa+(y-20)/30][((x-20)/30)*aa+(y-20)/30+aa]!=1) {}else{clearCanvas();x=x+30;Context.fillRect(x, y, 20, 20);e.preventDefault();gameover();show();}}if (keyID === 40 || keyID === 83) { // S键以及下键的移动方向if(y+30>15+30*aa){}else if(isling[(x-20)/30*aa+(y-20)/30][((x-20)/30)*aa+(y-20)/30+1]!=1) {}else{clearCanvas();y = y + 30;Context.fillRect(x, y, 20, 20);e.preventDefault();gameover();show();}}if (keyID === 37 || keyID === 65) { // A键以及zuo向if(x-30<0){}else if(isling[(x-20)/30*aa+(y-20)/30][((x-20)/30)*aa+(y-20)/30-aa]!=1) {}else{clearCanvas();x = x - 30;Context.fillRect(x, y, 20, 20);e.preventDefault();gameover();show();}}}}function clearCanvas() {//清除之间的痕迹Context.clearRect(x-2, y-2, 25, 25)}var end=false;function gameover(){if(x>=a&&y>=b){end=true;}}function show(){if(end==true){// stop();aa=aa+2;if(aa==20){ rangeinsert(); stop();}else{end=false;Context.clearRect(0, 0, 600, 600);for(var i=0;i<aa;i++){tree[i]=[];for(var j=0;j<aa;j++){tree[i][j]=-1;//初始值为0}} for(var i=0;i<aa*aa;i++){isling[i]=[];for(var j=0;j<aa*aa;j++){isling[i][j]=-1;//初始值为0}}drawChessBoard();//绘制棋盘while(search(0)!=search(aa*aa-1))//主要思路{var num = parseInt(Math.random() * aa*aa );//产生一个小于196的随机数var neihbour=getnei(num);if(search(num)==search(neihbour)){continue;}else//不在一个上{isling[num][neihbour]=1;isling[neihbour][num]=1;drawline(num,neihbour);//划线union(num,neihbour);}}a=aa*30-10,b=aa*30-10;x = 20, y =20;load();// start();}// alert("游戏成功！共用时："+str);}}var h=m=s=ms= 0; //定义时，分，秒，毫秒并初始化为0；var time=0;var i=0;function timer(){ //定义计时函数ms=ms+50; //毫秒if(ms>=1000){ms=0;s=s+1; //秒}if(s>=60){s=0;m=m+1; //分钟}if(m>=60){m=0;h=h+1; //小时}str =toDub(h)+"时"+toDub(m)+"分"+toDub(s)+"秒"+toDubms(ms)+"毫秒";mytime = ElementById('mytime');mytime.innerHTML = str;// ElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";}function reset(){ //重置i=1;time=setInterval(timer,50);}function start(){ //开始i=1;time=setInterval(timer,50);}function stop(){ //暂停i=0;clearInterval(time);}function toDub(n){ //补0操作if(n<10){return "0"+n;}else {return ""+n;}}function toDubms(n){ //给毫秒补0操作if(n<10){return "00"+n;}else {return "0"+n;}}function renovates(){load();}var req;//创建对象function range(){var url = "";//ajax//创建一个XMLHttpRequest对象reqif(window.XMLHttpRequest) {//IE7, Firefox, Opera支持req = new XMLHttpRequest();}else if(window.ActiveXObject) {//IE5,IE6支持req = new ActiveXObject("Microsoft.XMLHTTP");}req.open("GET", url, true);//onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态adystatechange = callback;//send函数发送请求req.send(null);}function rangeinsert(){var url = "insertrange?id=" +(m*60+ s);//创建一个XMLHttpRequest对象reqif(window.XMLHttpRequest) {//IE7, Firefox, Opera支持req = new XMLHttpRequest();}else if(window.ActiveXObject) {//IE5,IE6支持req = new ActiveXObject("Microsoft.XMLHTTP");}req.open("GET", url, true);//onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态adystatechange = callback;//send函数发送请求req.send(null);}function callback() {adyState == 4 && req.status == 200) {var check = sponseText;alert(check);}}
</script></body>
</html>
本文发布于:2024-02-08 19:50:55，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170739317268494.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
