本文主要是介绍javascript练习28:迷宫,增加了开挂功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
QQ录屏20221127153622
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-size: 10px;
}
div{
position: relative;
width: 400px;
height: 400px;
margin: 0 auto;
margin-top:60px;
}
table{
border-collapse:collapse;
}
td{
/* 20个小方格 */
width: 20px;
height: 20px;
text-align: center;
}
.left{
border-left:solid 2px black;
}
.right{
border-right:solid 2px black;
}
.top{
border-top:solid 2px black;
}
.bottom{
border-bottom:solid 2px black;
}
label{
position: absolute;
display: inline-block;
width: 14px;
height: 14px;
background-color: black;
border-radius: 7px;
}
button{
position: absolute;
left: 400px;
top: 420px;
width: 20px;
height: 20px;
outline: none;
color: black;
}
</style>
</head>
<body>
<!-- WASD控制圆点移动 -->
<button>炸</button>
<div>
<label style="left: 3px;top: 363px;"></label>
<table>
<tr><td class="top left"></td><td class="top"></td><td class="top"></td><td class="left top"></td><td class="top"></td><td class="left top"></td><td class="top"></td><td class="top"></td><td class="top"></td><td class="top"></td><td class="left top"></td><td class="left top"></td><td class="top"></td><td class="left top"></td><td class="top"></td><td class="left top"></td><td class="top"></td><td class="left top"></td><td class="top"></td><td class="left top right"></td></tr>
<tr><td class="left"></td><td class="left top"></td><td class="top"></td><td></td><td class="left"></td><td class="top"></td><td class="top"></td><td></td><td class="left"></td><td class="left"></td><td></td><td class="left"></td><td class="left"></td><td></td><td class="left"></td><td class="left"></td><td class="left"></td><td></td><td class="left"></td><td class="left right"></td></tr>
<tr><td class="left"></td><td class="left"></td><td class="left top"></td><td class="top"></td><td class="top"></td><td class="top"></td><td class="top"></td><td class="left top"></td><td class="top"></td><td class="top"></td><td class="left top"></td><td></td><td class="left top"></td><td class="top"></td><td></td><td class="left"></td><td class="top"></td><td class="left"></td><td class="left"></td><td class="right"></td></tr>
<tr><td class="left"></td><td></td><td class="left"></td><td class="top left"></td><td class="top"></td><td class="top"></td><td></td><td class="top"></td><td class="left"></td><td class="left"></td><td class="left"></td><td class="left top"></td><td class="left"></td><td class="left top"></td><td class="left"></td><td class="left"></td><td class="left top"></td><td></td><td class="top left"></td><td class="right"></td></tr>
<tr><td class="left"></td><td class="top"></td><td></td><td class="left"></td><td class="left"></td><td class="left top"></td><td class="top"></td><td class="left"></td><td></td><td class="left"></td><td class="left"></td><td class="left"></td><td class="left"></td><td class="left"></td><td></td><td class="left top"></td><td></td><td class="left top"></td><td></td><td class="left right"></td></tr>
<tr><td class="left top"></td><td class="top"></td><td class="top"></td><td class="left"></td><td class="left"></td><td class="top"></td><td></td><td class="top"></td><td class="left top"></td><td class="top"></td><td class="left"></td><td></td><td class="left"></td><td class="top"></td><td class="left top"></td><td></td><td class="left top"></td><td class="left top"></td><td class="top"></td><td class="left right"></td></tr>
<tr><td class="left"></td><td class="left top"></td><td class="top"></td><td class="left"></td><td class="left top"></td><td class="top"></td><td class="left top"></td><td></td><td></td><td class="left"></td><td class="top"></td><td class="left top"></td><td class="top"></td><td></td><td class="left"></td><td class="top"></td><td class="left"></td><td class="left"></td><td class="left"></td><td class="left right"></td></tr>
<tr><td class="left"></td><td></td><td class="left"></td><td></td><td class="left top"></td><td></td><td class="left"></td><td class="left top">1</td><td class="top">1</td><td class="top">1</td><td class="left"></td><td class="top"></td><td class="left"></td><td class="top"></td><td class="left top"></td><td class="left"></td><td></td><td class="left"></td><td class="left"></td><td class="top right"></td></tr>
<tr><td class="left top"></td><td></td><td class="top"></td><td class="left top"></td><td></td><td class="left top"></td><td></td><td class="left">1</td><td class="top">1</td><td class="left">1</td><td class="top">1</td><td>1</td><td class="left top"></td><td></td><td class="left"></td><td></td><td class="top"></td><td></td><td class="left top"></td><td class="right"></td></tr>
<tr><td class="left"></td><td class="top"></td><td class="top"></td><td class="left"></td><td class="left top"></td><td></td><td class="left top">1</td><td class="top">1</td><td>1</td><td class="left top">1</td><td class="top">1</td><td>1</td><td class="left"></td><td class="top"></td><td class="top"></td><td class="top"></td><td class="left top"></td><td class="top"></td><td></td><td class="left right"></td></tr>
<tr><td class="left top"></td><td class="top"></td><td class="left"></td><td></td><td class="left"></td><td class="top"></td><td class="left">1</td><td class="top">1</td><td class="top">1</td><td class="left">1</td><td class="top">1</td><td class="top">1</td><td class="left top"></td><td class="top"></td><td class="top"></td><td class="left"></td><td class="left top"></td><td class="top"></td><td class="top"></td><td class="right"></td></tr>
<tr><td class="left"></td><td class="left"></td><td class="top"></td><td class="left top"></td><td class="top"></td><td class="left"></td><td class="top"></td><td class="left top">1</td><td>1</td><td class="left top">1</td><td class="top">1</td><td>1</td><td class="left"></td><td class="left top"></td><td></td><td class="left"></td><td class="left"></td><td class="left"></td><td class="top"></td><td class="left right"></td></tr>
<tr><td class="left"></td><td class="left top"></td><td></td><td class="left"></td><td class="left top"></td><td class="top"></td><td class="left"></td><td class="left">1</td><td class="left top"></td><td>1</td><td class="top">1</td><td class="left top"></td><td></td><td class="left"></td><td class="top"></td><td class="left"></td><td class="top"></td><td class="top"></td><td class="left"></td><td class="left right"></td></tr>
<tr><td class="left"></td><td class="top"></td><td class="top"></td><td></td><td class="left"></td><td class="left"></td><td class="top"></td><td class="left">1</td><td class="left"></td><td class="top"></td><td class="left">1</td><td class="left"></td><td class="top"></td><td class="top"></td><td class="left"></td><td class="top"></td><td class="left"></td><td class="left"></td><td></td><td class="left">1</td></tr>
<tr><td class="left"></td><td class="left top"></td><td class="top"></td><td></td><td class="top"></td><td class="top"></td><td></td><td class="left">1</td><td class="top">1</td><td class="left top">1</td><td>1</td><td class="left top"></td><td class="top"></td><td class="top"></td><td class="left top"></td><td></td><td class="left"></td><td class="left"></td><td class="left top">1</td><td class="right">1</td></tr>
<tr><td class="left"></td><td class="top"></td><td class="top"></td><td class="left top"></td><td class="top"></td><td class="left top"></td><td class="top">1</td><td class="top">1</td><td class="left">1</td><td class="left">1</td><td class="top">1</td><td class="left"></td><td class="left"></td><td class="left"></td><td class="left"></td><td class="left top"></td><td></td><td class="left top">1</td><td>1</td><td class="left right"></td></tr>
<tr><td class="left top"></td><td class="top"></td><td></td><td class="left"></td><td class="left"></td><td></td><td class="left">1</td><td class="left">1</td><td class="left">1</td><td class="top">1</td><td class="left">1</td><td></td><td class="left"></td><td class="left"></td><td></td><td class="left"></td><td class="top"></td><td class="left">1</td><td class="left top"></td><td class="right"></td></tr>
<tr><td class="left"></td><td class="top"></td><td class="top"></td><td class="top"></td><td class="left top"></td><td class="left top">1</td><td>1</td><td class="left">1</td><td class="left top">1</td><td>1</td><td class="left">1</td><td class="top">1</td><td class="top">1</td><td class="top">1</td><td class="top"></td><td class="left top">1</td><td class="top">1</td><td>1</td><td class="left"></td><td class="top right"></td></tr>
<tr><td class="top">0</td><td class="top">1</td><td class="left"></td><td class="left">1</td><td>1</td><td class="left">1</td><td class="left top">1</td><td>1</td><td class="left">1</td><td class="top">1</td><td class="left top"></td><td class="top"></td><td class="top"></td><td class="left">1</td><td class="left"></td><td class="left">1</td><td class="left top"></td><td class="top"></td><td class="left top"></td><td class="right"></td></tr>
<tr><td class="top left bottom"></td><td class="bottom">1</td><td class="bottom top">1</td><td class="bottom">1</td><td class="left bottom">1</td><td class="bottom">1</td><td class="bottom left">1</td><td class="bottom top">1</td><td class="bottom top">1</td><td class="bottom">1</td><td class="bottom"></td><td class="left top bottom"></td><td class="bottom"></td><td class="left bottom">1</td><td class="bottom top">1</td><td class="bottom">1</td><td class="left bottom"></td><td class="bottom top"></td><td class="bottom"></td><td class="left bottom right"></td></tr>
</table>
</div>
</body>
<script src="./jquery/jQuery.js"></script>
<script>
var aim=$("label")
var i=18,j=0,z
var tr=$("tr")
//向上移动
function go_top(){
z=1
if(whether_in_maze(aim[0].style.left,(parseInt(aim[0].style.top)-20)+"px")&&whether_crash(i,j,z)){
aim[0].style.top=(parseInt(aim[0].style.top)-20)+"px"
i--
tr[i].getElementsByTagName("td")[j].innerText="0"
}
}
//向下移动
function go_bottom(){
z=2
if(whether_in_maze(aim[0].style.left,(parseInt(aim[0].style.top)+20)+"px")&&whether_crash(i,j,z)){
aim[0].style.top=(parseInt(aim[0].style.top)+20)+"px"
i++
tr[i].getElementsByTagName("td")[j].innerText="0"
}
}
//向左移动
function go_left(){
z=3
if(whether_in_maze((parseInt(aim[0].style.left)-20)+"px",aim[0].style.top)&&whether_crash(i,j,z)){
aim[0].style.left=(parseInt(aim[0].style.left)-20)+"px"
j--
tr[i].getElementsByTagName("td")[j].innerText="0"
}
}
//向右移动
function go_right(){
z=4
if(whether_in_maze((parseInt(aim[0].style.left)+20)+"px",aim[0].style.top)&&whether_crash(i,j,z)){
aim[0].style.left=(parseInt(aim[0].style.left)+20)+"px"
j++
tr[i].getElementsByTagName("td")[j].innerText="0"
}
}
//键盘控制移动方向
document.οnkeypress=function(e){
if(e.key=="a")
go_left()
else if(e.key=="s")
go_bottom()
else if(e.key=="d")
go_right()
else if(e.key=="w")
go_top()
}
//限制移动范围:不允许在迷宫之外的范围移动3-397
function whether_in_maze(a,b){
if(parseInt(b)<3||parseInt(b)>397||
parseInt(a)<3||parseInt(a)>397)
return 0
else
return 1
}
//限制移动范围:不允许穿墙而过
function whether_crash(x,y,s){
var td
if(s==1){if(!tr[x].getElementsByTagName("td")[y].className.includes("top")) return 1
else return 0
}
else if(s==2){if(!tr[x+1].getElementsByTagName("td")[y].className.includes("top")) return 1
else return 0
}
else if(s==3){if(!tr[x].getElementsByTagName("td")[y].className.includes("left")) return 1
else return 0
}
else if(s==4){if(!tr[x].getElementsByTagName("td")[y+1].className.includes("left")) return 1
else return 0
}
}
//自动通过迷宫
var btn=$("button")
var g=1
var timer
btn[0].οnclick=function(){
timer=setInterval(auto,70)
}
function auto(){
//向上
if(whether_in_maze(aim[0].style.left,(parseInt(aim[0].style.top)-20)+"px")&&tr[i-1].getElementsByTagName("td")[j].innerText=="1"&&whether_crash(i,j,1)){
go_top()
}
//向下
else if(whether_in_maze(aim[0].style.left,(parseInt(aim[0].style.top)+20)+"px")&&tr[i+1].getElementsByTagName("td")[j].innerText=="1"&&whether_crash(i,j,2)){
go_bottom()
}
//向左
else if(whether_in_maze((parseInt(aim[0].style.left)-20)+"px",aim[0].style.top)&&tr[i].getElementsByTagName("td")[j-1].innerText=="1"&&whether_crash(i,j,3)){
go_left()
}
//向右
else if(whether_in_maze((parseInt(aim[0].style.left)+20)+"px",aim[0].style.top)&&tr[i].getElementsByTagName("td")[j+1].innerText=="1"&&whether_crash(i,j,4)){
go_right()
}
if(i==13&&j==19)
clearInterval(timer)
document.οnkeypress=function(e){
clearInterval(timer)
}
}
</script>
</html>
这篇关于javascript练习28:迷宫,增加了开挂功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!