<!DOCTYPE html>
<html lang="en" xmlns:47px xmlns:47px xmlns:47px>
<head>
<meta charset="UTF-8">
<title>第三关</title>
</head>
<body>
<style type="text/css">
body {
background-color: #3b8ab8;
}
#box {
margin-left: 200px;
margin-top: 50px;
}
#box5 {
position: absolute;
margin-left: 950px;
margin-top: -503px;
width: 100px;
height: 500px;
}
.p1 {
background-color: #00a65a;
border-radius: 15px;
text-align: center;
height: 40px;
margin-top: -0.01px;
}
</style>
<!--网格线-->
<canvas id="box" width="750" height="500" style="background-color: mediumvioletred;"></canvas>
<div id="person" style="background-color: #ff1010;left: 410px;top: 357px;width: 47px;height: 47px;position: absolute">
<img src="11.png" : width="47" height="47">
</div>
<div id="box1" style="background-color: #ffde00;left: 360px;top: 210px;width: 47px;height: 47px;position: absolute">
<img src="12.png" : width="47" height="47">
</div>
<div id="box3" style="background-color: #ffde00;left: 360px;top: 260px;width: 47px;height: 47px;position: absolute">
<img src="12.png" : width="47" height="47">
</div>
<div id="box4" style="background-color: #ffde00;left: 409px;top: 310px;width: 47px;height: 47px;position: absolute">
<img src="12.png" : width="47" height="47">
</div>
<div id="box2" style="background-color:red;left: 458px;top: 210px;width: 47px;height: 47px;position: absolute">
<img src="12.png" : width="47" height="47">
</div>
<div id="box5" style="background-color:#9c3328;">
<p class="p1">第三局</p>
<button class="p1" style="width: 95px;float:left;" οnclick="goback()">上一局</button>
<br>
<button class="p1" style="width: 95px;float:left;" οnclick="go()">下一局</button>
<button class="p1" style="width: 95px;float:left;" οnclick="back()">返回</button>
<button class="p1" style="width: 95px;float:left;" οnclick="replace()">重置</button>
</div>
<script type="text/javascript">
var map = [
[0, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 0, 2, 0, 2, 1, 1],
[0, 1, 2, 0, 0, 0, 2, 1],
[1, 1, 0, 3.1, 0, 3.2, 0, 1],
[1, 1, 0, 3.3, 0, 1, 0, 1],
[1, 1, 1, 0, 3.4, 0, 0, 1],
[0, 0, 1, 0, 4, 1, 1, 1],
[0, 0, 1, 1, 1, 1, 0, 0]
];
var historymap = [
[0, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 0, 2, 0, 2, 1, 1],
[0, 1, 2, 0, 0, 0, 2, 1],
[1, 1, 0, 3.1, 0, 3.2, 0, 1],
[1, 1, 0, 3.3, 0, 1, 0, 1],
[1, 1, 1, 0, 3.4, 0, 0, 1],
[0, 0, 1, 0, 4, 1, 1, 1],
[0, 0, 1, 1, 1, 1, 0, 0]
];
var ss = 0;
var place = [];
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
if (map[i][j] == 2) {
place[ss] = [i, j];
ss++;
}
}
}
//1为墙，0为路，2为目的地，3为箱子，4为人
var c = document.getElementById("box");
var cxt = c.getContext("2d");
cxt.lineWidth = 3;
var number = 4;
var num = 0;
// var img= new Image();
// img.src="a.jpg";
//画方格线
for (var i = 0; i < 12; i++) {
cxt.moveTo(0, 50 * i);
cxt.lineTo(1260, 50 * i);
}
for (var i = 0; i < 19; i++) {
cxt.moveTo(50 * i, 0);
cxt.lineTo(50 * i, 900);
}
//控制墙
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
if (map[i][j] == 1) {
cxt.fillStyle = ("#F8EAFF");//墙
cxt.fillRect(j * 50, i * 50, 50, 50);
}
if (map[i][j] == 2) {
cxt.fillStyle = ("yellow");//目的地
cxt.fillRect(j * 50, i * 50, 50, 50);
}
}
}
cxt.stroke();
var x = 6;
var y = 4;
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
for (var k = 0; k < 8; k++) {
for (var m = 0; m < 8; m++) {
historymap[k][m] = map[k][m];
}
}
var person = document.getElementById("person");
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
var box4 = document.getElementById("box4");
var top = person.offsetTop;
var left = person.offsetLeft;
var move = 50;//每个框的大小
if (e) {
switch (e.keyCode) {
case 37://←控制左按键,37键盘左键的assii码
if (map[x][y - 1] == 3.1) {
if (map[x][y - 2] == 1) {
break;
}
if (map[x][y - 2] == 3.2) {
break;
}
if (map[x][y - 2] == 3.3) {
break;
}
if (map[x][y - 2] == 3.4) {
break;
} else {
if (map[x][y - 2] == 2) {
box1.style.left = box1.offsetLeft - move + "px";
map[x][y - 2] = map[x][y - 1];
map[x][y - 1] = map[x][y];
map[x][y] = 0;
person.style.left = left - move + "px";
y--;
} else {
box1.style.left = box1.offsetLeft - move + "px";
var a = map[x][y - 2];
map[x][y - 2] = map[x][y - 1];
map[x][y - 1] = map[x][y];
map[x][y] = a;
person.style.left = left - move + "px";
y--;
}
}
} else if (map[x][y - 1] == 3.2) {
if (map[x][y - 2] == 1) {
break;
}
if (map[x][y - 2] == 3.1) {
break;
}
if (map[x][y - 2] == 3.3) {
break;
}
if (map[x][y - 2] == 3.4) {
break;
} else {
if (map[x][y - 2] == 2) {
box2.style.left = box2.offsetLeft - move + "px";
map[x][y - 2] = map[x][y - 1];
map[x][y - 1] = map[x][y];
map[x][y] = 0;
person.style.left = left - move + "px";
y--;
} else {
box2.style.left = box2.offsetLeft - move + "px";
var a = map[x][y - 2];
map[x][y - 2] = map[x][y - 1];
map[x][y - 1] = map[x][y];
map[x][y] = a;
person.style.left = left - move + "px";
y--;
}
}
} else if (map[x][y - 1] == 3.3) {
if (map[x][y - 2] == 1) {
break;
}
if (map[x][y - 2] == 3.2) {
break;
}
if (map[x][y - 2] == 3.1) {
break;
}
if (map[x][y - 2] == 3.4) {
break;
} else {
if (map[x][y - 2] == 2) {
box3.style.left = box3.offsetLeft - move + "px";
map[x][y - 2] = map[x][y - 1];
map[x][y - 1] = map[x][y];
map[x][y] = 0;
person.style.left = left - move + "px";
y--;
} else {
box3.style.left = box3.offsetLeft - move + "px";
var a = map[x][y - 2];
map[x][y - 2] = map[x][y - 1];
map[x][y - 1] = map[x][y];
map[x][y] = a;
person.style.left = left - move + "px";
y--;
}
}
} else if (map[x][y - 1] == 3.4) {
if (map[x][y - 2] == 1) {
break;
}
if (map[x][y - 2] == 3.2) {
break;
}
if (map[x][y - 2] == 3.3) {
break;
}
if (map[x][y - 2] == 3.1) {
break;
} else {
if (map[x][y - 2] == 2) {
box4.style.left = box4.offsetLeft - move + "px";
map[x][y - 2] = map[x][y - 1];
map[x][y - 1] = map[x][y];
map[x][y] = 0;
person.style.left = left - move + "px";
y--;
} else {
box4.style.left = box4.offsetLeft - move + "px";
var a = map[x][y - 2];
map[x][y - 2] = map[x][y - 1];
map[x][y - 1] = map[x][y];
map[x][y] = a;
person.style.left = left - move + "px";
y--;
}
}
} else if (map[x][y - 1] == 1) {
break;
} else if (map[x][y - 1] == 0 || 2) {
var a = map[x][y - 1];
map[x][y - 1] = map[x][y];
map[x][y] = a;
person.style.left = left - move + "px";
y--;
}
break;
case 38://↑控制向上按键
//3.1
if (map[x - 1][y] == 3.1) {
if (map[x - 2][y] == 1) {
break;
}
if (map[x - 2][y] == 3.2) {
break;
}
if (map[x - 2][y] == 3.3) {
break;
}
if (map[x - 2][y] == 3.4) {
break;
} else {
if (map[x - 2][y] == 2) {
box1.style.top = box1.offsetTop - move + "px";
map[x - 2][y] = map[x - 1][y];
map[x - 1][y] = map[x][y];
map[x][y] = 0;
person.style.top = top - move + "px";
x--;
} else {
box1.style.top = box1.offsetTop - move + "px";
var a = map[x - 2][y];
map[x - 2][y] = map[x - 1][y];
map[x - 1][y] = map[x][y];
map[x][y] = a;
person.style.top = top - move + "px";
x--;
}
}
} else if (map[x - 1][y] == 3.2) {
if (map[x - 2][y] == 1) {
break;
}
if (map[x - 2][y] == 3.1) {
break;
}
if (map[x - 2][y] == 3.3) {
break;
}
if (map[x - 2][y] == 3.4) {
break;
} else {
if (map[x - 2][y] == 2) {
box2.style.top = box2.offsetTop - move + "px";
map[x - 2][y] = map[x - 1][y];
map[x - 1][y] = map[x][y];
map[x][y] = 0;
person.style.top = top - move + "px";
x--;
} else {
box2.style.top = box2.offsetTop - move + "px";
var a = map[x - 2][y];
map[x - 2][y] = map[x - 1][y];
map[x - 1][y] = map[x][y];
map[x][y] = a;
person.style.top = top - move + "px";
x--;
}
}
} else if (map[x - 1][y] == 3.3) {
if (map[x - 2][y] == 1) {
break;
}
if (map[x - 2][y] == 3.1) {
break;
}
if (map[x - 2][y] == 3.2) {
break;
}
if (map[x - 2][y] == 3.4) {
break;
} else {
if (map[x - 2][y] == 2) {
box3.style.top = box3.offsetTop - move + "px";
map[x - 2][y] = map[x - 1][y];
map[x - 1][y] = map[x][y];
map[x][y] = 0;
person.style.top = top - move + "px";
x--;
} else {
box3.style.top = box3.offsetTop - move + "px";
var a = map[x - 2][y];
map[x - 2][y] = map[x - 1][y];
map[x - 1][y] = map[x][y];
map[x][y] = a;
person.style.top = top - move + "px";
x--;
}
}
} else if (map[x - 1][y] == 3.4) {
if (map[x - 2][y] == 1) {
break;
}
if (map[x - 2][y] == 3.1) {
break;
}
if (map[x - 2][y] == 3.2) {
break;
}
if (map[x - 2][y] == 3.3) {
break;
} else {
if (map[x - 2][y] == 2) {
box4.style.top = box4.offsetTop - move + "px";
map[x - 2][y] = map[x - 1][y];
map[x - 1][y] = map[x][y];
map[x][y] = 0;
person.style.top = top - move + "px";
x--;
} else {
box4.style.top = box4.offsetTop - move + "px";
var a = map[x - 2][y];
map[x - 2][y] = map[x - 1][y];
map[x - 1][y] = map[x][y];
map[x][y] = a;
person.style.top = top - move + "px";
x--;
}
}
} else if (map[x - 1][y] == 1) {
break;
} else if (map[x - 1][y] == 0 || 2) {
var a = map[x - 1][y];
map[x - 1][y] = map[x][y];
map[x][y] = a;
person.style.top = top - move + "px";
x--;
}
break;
//3.1
case 39://→控制向右按键
if (map[x][y + 1] == 3.1) {
if (map[x][y + 2] == 1) {
break;
}
if (map[x][y + 2] == 3.2) {
break;
}
if (map[x][y + 2] == 3.3) {
break;
}
if (map[x][y + 2] == 3.4) {
break;
} else {
if (map[x][y + 2] == 2) {
box1.style.left = box1.offsetLeft + move + "px";
map[x][y + 2] = map[x][y + 1];
map[x][y + 1] = map[x][y];
map[x][y] = 0;
person.style.left = left + move + "px";
y++;
} else {
box1.style.left = box1.offsetLeft + move + "px";
var a = map[x][y + 2];
map[x][y + 2] = map[x][y + 1];
map[x][y + 1] = map[x][y];
map[x][y] = a;
person.style.left = left + move + "px";
y++;
}
}
} else if (map[x][y + 1] == 3.2) {
if (map[x][y + 2] == 1) {
break;
}
if (map[x][y + 2] == 3.1) {
break;
}
if (map[x][y + 2] == 3.3) {
break;
}
if (map[x][y + 2] == 3.4) {
break;
} else {
if (map[x][y + 2] == 2) {
box2.style.left = box2.offsetLeft + move + "px";
map[x][y + 2] = map[x][y + 1];
map[x][y + 1] = map[x][y];
map[x][y] = 0;
person.style.left = left + move + "px";
y++;
} else {
box2.style.left = box2.offsetLeft + move + "px";
var a = map[x][y + 2];
map[x][y + 2] = map[x][y + 1];
map[x][y + 1] = map[x][y];
map[x][y] = a;
person.style.left = left + move + "px";
y++;
}
}
} else if (map[x][y + 1] == 3.3) {
if (map[x][y + 2] == 1) {
break;
}
if (map[x][y + 2] == 3.2) {
break;
}
if (map[x][y + 2] == 3.1) {
break;
}
if (map[x][y + 2] == 3.4) {
break;
} else {
if (map[x][y + 2] == 2) {
box3.style.left = box3.offsetLeft + move + "px";
map[x][y + 2] = map[x][y + 1];
map[x][y + 1] = map[x][y];
map[x][y] = 0;
person.style.left = left + move + "px";
y++;
} else {
box3.style.left = box3.offsetLeft + move + "px";
var a = map[x][y + 2];
map[x][y + 2] = map[x][y + 1];
map[x][y + 1] = map[x][y];
map[x][y] = a;
person.style.left = left + move + "px";
y++;
}
}
} else if (map[x][y + 1] == 3.4) {
if (map[x][y + 2] == 1) {
break;
}
if (map[x][y + 2] == 3.2) {
break;
}
if (map[x][y + 2] == 3.3) {
break;
}
if (map[x][y + 2] == 3.1) {
break;
} else {
if (map[x][y + 2] == 2) {
box4.style.left = box4.offsetLeft + move + "px";
map[x][y + 2] = map[x][y + 1];
map[x][y + 1] = map[x][y];
map[x][y] = 0;
person.style.left = left + move + "px";
y++;
} else {
box4.style.left = box4.offsetLeft + move + "px";
var a = map[x][y + 2];
map[x][y + 2] = map[x][y + 1];
map[x][y + 1] = map[x][y];
map[x][y] = a;
person.style.left = left + move + "px";
y++;
}
}
} else if (map[x][y + 1] == 1) {
break
} else if (map[x][y + 1] == 0 || 2) {
var a = map[x][y + 1];
map[x][y + 1] = map[x][y];
map[x][y] = a;
person.style.left = left + move + "px";
y++;
}
break;
//3.1
case 40://↓控制向下按键
if (map[x + 1][y] == 3.1) {
if (map[x + 2][y] == 1) {
break;
}
if (map[x + 2][y] == 3.2) {
break;
}
if (map[x + 2][y] == 3.3) {
break;
}
if (map[x + 2][y] == 3.4) {
break;
} else {
if (map[x + 2][y] == 2) {
box1.style.top = box1.offsetTop + move + "px";
map[x + 2][y] = map[x + 1][y];
map[x + 1][y] = map[x][y];
map[x][y] = 0;
person.style.top = top + move + "px";
x++;
} else {
box1.style.top = box1.offsetTop + move + "px";
var a = map[x + 2][y];
map[x + 2][y] = map[x + 1][y];
map[x + 1][y] = map[x][y];
map[x][y] = a;
person.style.top = top + move + "px";
x++;
}
}
} else if (map[x + 1][y] == 3.2) {
if (map[x + 2][y] == 1) {
break;
}
if (map[x + 2][y] == 3.1) {
break;
}
if (map[x + 2][y] == 3.3) {
break;
}
if (map[x + 2][y] == 3.4) {
break;
} else {
if (map[x + 2][y] == 2) {
box2.style.top = box2.offsetTop + move + "px";
map[x + 2][y] = map[x + 1][y];
map[x + 1][y] = map[x][y];
map[x][y] = 0;
person.style.top = top + move + "px";
x++;
} else {
box2.style.top = box2.offsetTop + move + "px";
var a = map[x + 2][y];
map[x + 2][y] = map[x + 1][y];
map[x + 1][y] = map[x][y];
map[x][y] = a;
person.style.top = top + move + "px";
x++;
}
}
} else if (map[x + 1][y] == 3.3) {
if (map[x + 2][y] == 1) {
break;
}
if (map[x + 2][y] == 3.2) {
break;
}
if (map[x + 2][y] == 3.1) {
break;
}
if (map[x + 2][y] == 3.4) {
break;
}
else {
if (map[x + 2][y] == 2) {
box3.style.top = box3.offsetTop + move + "px";
map[x + 2][y] = map[x + 1][y];
map[x + 1][y] = map[x][y];
map[x][y] = 0;
person.style.top = top + move + "px";
x++;
} else {
box3.style.top = box3.offsetTop + move + "px";
var a = map[x + 2][y];
map[x + 2][y] = map[x + 1][y];
map[x + 1][y] = map[x][y];
map[x][y] = a;
person.style.top = top + move + "px";
x++;
}
}
} else if (map[x + 1][y] == 3.4) {
if (map[x + 2][y] == 1) {
break;
}
if (map[x + 2][y] == 3.2) {
break;
}
if (map[x + 2][y] == 3.3) {
break;
}
if (map[x + 2][y] == 3.1) {
break;
} else {
if (map[x + 2][y] == 2) {
box4.style.top = box4.offsetTop + move + "px";
map[x + 2][y] = map[x + 1][y];
map[x + 1][y] = map[x][y];
map[x][y] = 0;
person.style.top = top + move + "px";
x++;
} else {
box4.style.top = box4.offsetTop + move + "px";
var a = map[x + 2][y];
map[x + 2][y] = map[x + 1][y];
map[x + 1][y] = map[x][y];
map[x][y] = a;
person.style.top = top + move + "px";
x++;
}
}
} else if (map[x + 1][y] == 1) {
break;
} else if (map[x + 1][y] == 0 || 2) {
var a = map[x + 1][y];
map[x + 1][y] = map[x][y];
map[x][y] = a;
person.style.top = top + move + "px";
x++;
}
break;
}
}
for (var i = 0; i < ss; i++) {
if (map[place[i][0]][place[i][1]] == 3.4 || map[place[i][0]][place[i][1]] == 3.2 || map[place[i][0]][place[i][1]] == 3.3 || map[place[i][0]][place[i][1]] == 3.1) {
num++;
} else {
num = 0;
break;
}
}
setTimeout(function () {
if (num == number) {
alert("恭喜下一关！！！")
location.href = "box.html";
}
})
};
function replace() {
location.reload();
}
function goback() {
location.href = "box1.html";
}
function go() {
location.href = "box.html";
}
function back() {
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
map[i][j] = historymap[i][j];
}
}
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
var box4 = document.getElementById("box4");
var person = document.getElementById("person");
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
if (map[i][j] == 3.1) {
box1.style.left = 210 + j * 50 + "px";
box1.style.top = 60 + i * 50 + "px";
} else if (map[i][j] == 3.2) {
box2.style.left = 210 + j * 50 + "px";
box2.style.top = 60 + i * 50 + "px";
} else if (map[i][j] == 3.3) {
box3.style.left = 210 + j * 50 + "px";
box3.style.top = 60 + i * 50 + "px";
} else if (map[i][j] == 3.4) {
box4.style.left = 210 + j * 50 + "px";
box4.style.top = 60 + i * 50 + "px";
} else if (map[i][j] == 4) {
person.style.left = 210 + j * 50 + "px";
person.style.top = 60 + i * 50 + "px";
x = i;
y = j;
}
}
}
}
</script>
</body>
</html>
