<!DOCTYPE html>
<html lang="zh-CN">
<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>推箱子小游戏</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-image: url(./pic.jpg);
background-size: 100%;
color: whitesmoke;
text-align: center;
}
h1 {
font:normal bold 100px 楷体;
-webkit-font-smoothing: antialiased;
padding:50px;
}
table,
.menu,
.choice,
.win {
margin: 0 auto;
}
div {
width: 180px;
}
td div {
width: 75px;
height: 75px;
margin: 5px;
border-radius: 5px;
font-size: 60px;
line-height: 75px;
display: none;
}
.menu,
.win {
position: relative;
background-color: #6781e0;
width: 360px;
height: 80px;
margin-bottom: 40px;
line-height: 74px;
font-size: 50px;
font-family: "WDKT";
box-shadow:
1px 1px 0px #5d77dd,
2px 2px 0px #5f79de,
3px 3px 0px #617bdf,
4px 4px 0px #637de0;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
border-radius: 40px;
}
.side {
position: relative;
background-color: #6781e0;
width: 240px;
height: 80px;
margin-bottom: 40px;
line-height: 74px;
font-size: 50px;
font-family: "WDKT";
box-shadow:
1px 1px 0px #5d77dd,
2px 2px 0px #5f79de,
3px 3px 0px #617bdf,
4px 4px 0px #637de0;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
border-radius: 40px;
}
.choice {
background-color: #6781e0;
width: 80px;
height: 80px;
margin: 10px;
line-height: 74px;
font-size: 60px;
font-family: "包图小白体";
box-shadow:
1px 1px 0px #5d77dd,
2px 2px 0px #5f79de,
3px 3px 0px #617bdf,
4px 4px 0px #637de0;
border-radius: 5px;
}
.menu:hover {
transform: translateX(1px) translateY(3px);
}
.choice:hover {
transform: translateX(1px) translateY(3px);
}
.win:hover {
transform: translateX(1px) translateY(3px);
}
.side:hover {
transform: translateX(1px) translateY(3px);
}
#g {
margin-left: 400px;
display: none;
}
.win,
.side {
display: none;
}
#side1 {
position: absolute;
right: 150px;
top: 200px;
}
#side2 {
position: absolute;
right: 150px;
top: 600px;
}
</style>
</head>
<body>
<h1 id="txz">推箱子小游戏</h1>
<table>
<tr>
<td>
<div id="a1"></div>
</td>
<td>
<div id="a2"></div>
</td>
<td>
<div id="a3"></div>
</td>
<td>
<div id="a4"></div>
</td>
<td>
<div id="a5"></div>
</td>
<td>
<div id="a6"></div>
</td>
</tr>
<tr>
<td>
<div id="b1"></div>
</td>
<td>
<div id="b2"></div>
</td>
<td>
<div id="b3"></div>
</td>
<td>
<div id="b4"></div>
</td>
<td>
<div id="b5"></div>
</td>
<td>
<div id="b6"></div>
</td>
</tr>
<tr>
<td>
<div id="c1"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="c3"></div>
</td>
<td>
<div id="c4"></div>
</td>
<td>
<div id="c5"></div>
</td>
<td>
<div id="c6"></div>
</td>
</tr>
<tr>
<td>
<div id="d1"></div>
</td>
<td>
<div id="d2"></div>
</td>
<td>
<div id="d3"></div>
</td>
<td>
<div id="d4"></div>
</td>
<td>
<div id="d5"></div>
</td>
<td>
<div id="d6"></div>
</td>
</tr>
<tr>
<td>
<div id="e1"></div>
</td>
<td>
<div id="e2"></div>
</td>
<td>
<div id="e3"></div>
</td>
<td>
<div id="e4"></div>
</td>
<td>
<div id="e5"></div>
</td>
<td>
<div id="e6"></div>
</td>
</tr>
<tr>
<td>
<div id="f1"></div>
</td>
<td>
<div id="f2"></div>
</td>
<td>
<div id="f3"></div>
</td>
<td>
<div id="f4"></div>
</td>
<td>
<div id="f5"></div>
</td>
<td>
<div id="f6"></div>
</td>
</tr>
</table>
<div class="menu" onclick="newgame()">开始新游戏</div>
<div class="menu" onclick="continuegame()">继续游戏</div>
<div class="menu" onclick="select()">选关</div>
<div class="menu" onclick="closewindow()">退出游戏</div>
<table id="g">
<tr>
<td>
<div class="choice" onclick=start(0)>1</div>
</td>
<td>
<div class="choice" onclick=start(1)>2</div>
</td>
<td>
<div class="choice" onclick=start(2)>3</div>
</td>
</tr>
</table>
<div class="win" id="notlast" onclick=next(progress)>下一关</div>
<div class="win" onclick=returnselect()>选择关卡</div>
<div class="win" onclick=back()>返回</div>
<div class="side" id="side1" onclick=continuegame()>重试</div>
<div class="side" id="side2" onclick=leave()>返回</div>
</body>
<script>
var progress = 0;
var isstart = 0;
var px, py;
var map = [[[1, 1, 1, 1, 1, 1], [1, 1, 0, 0, 1, 1], [1, 1, 0, 0, 1, 1], [1, 3, 2, 2, 3, 1], [1, 1, 0, 4, 1, 1], [1, 1, 1, 1, 1, 1]],
[[1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 1, 1], [1, 0, 0, 2, 4, 1], [1, 1, 2, 0, 3, 1], [1, 1, 0, 0, 3, 1], [1, 1, 1, 1, 1, 1]],
[[1, 1, 1, 1, 1, 1], [1, 1, 4, 3, 3, 1], [1, 0, 2, 2, 1, 1], [1, 0, 0, 0, 0, 1], [1, 1, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1]]];
var copy = [[0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]];
var names = [["a1", "a2", "a3", "a4", "a5", "a6"], ["b1", "b2", "b3", "b4", "b5", "b6"],
