<!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: 409px;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;">上一步</button>
<button class="p1" style="width: 95px;float:left;">下一步</button>
</div>
<script type="text/javascript">
var map = [
[0, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 2, 2, 2, 2, 1, 1],
[0, 1, 0, 0, 0, 0, 0, 1],
[1, 1, 0, 3.1, 0, 3.2, 0, 1],
[1, 1, 0, 3.3, 0, 1, 1, 1],
[1, 1, 1, 0, 3.4, 1, 0, 0],
[0, 0, 1, 0, 4, 1, 0, 0],
[0, 0, 1, 1, 1, 1, 0, 0]
];
//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];
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--;
num++;
} 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--;
num++;
} 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--;
num++;
} 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--;
num++;
} 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) {
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--;
num++;
} 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--;
num++;
} 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--;
num++;
} 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--;
num++;
} 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) {
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++;
num++;
} 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++;
num++;
} 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++;
num++;
} 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++;
num++;
} 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) {
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++;
num++;
} 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++;
num++;
} 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++;
num++;
} 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++;
num++;
} 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) {
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;
}
}
setTimeout(function () {
if (num == number) {
alert("下一关")
location.href = "box2.html";
}
})
};
</script>
</body>
</html>
