javascript练习28：迷宫，增加了开挂功能

QQ录屏20221127153622

<!DOCTYPE html>

<head>

<title>Document</title>

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>

<div>

<table>

</table>

</div>

</body>

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>