<!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>
推箱子
最新推荐文章于 2024-02-02 17:18:43 发布