困了累了敲代码，提神醒脑--写一些推箱子小游戏
好久没敲代码了，前几天也睡不好，怎么办，折腾自己一下就好了，反正头发多。而且我这个初学者哪能在乎头发哪，距离强者的路还远得很。
我也不是很想写，主要是闲的无聊，再加上技术差，就更不想写了，可是这整宿整宿的睡不着觉，难受啊，白天还贼精神，估计哪天我就猝死了。好了，我把我的代码发一下，很乱，一开始写的全是bug，改了好长时间才改好，这都由于我还是个初学者。
这是HTML：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="push.css">
</head>
<body>
<div>
<p></p>
<p></p>
</div>
</body>
<script src="push.js"></script>
这是CSS：（写的不好看）
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 280px;
border: solid 40px #222;
position: absolute;
top: 100px;
left: 300px;
border-radius: 50px;
background-color: rosybrown;
}
.wall{
box-sizing: border-box;
border-radius: 2px;
width: 40px;
height: 40px;
position: absolute;
background: red;
border: white 2px solid;
}
.target{
box-sizing: border-box;
border-radius: 50%;
width: 40px;
height: 40px;
position: absolute;
background: brown;
border:#222 2px solid;
}
.box{
box-sizing: border-box;
border-radius: 4px;
width: 40px;
height: 40px;
position: absolute;
background: #333;
border:#222 2px solid;
font-size: 32px;
color: white;
line-height: 28px;
text-indent: 4px;
letter-spacing: 10px;
z-index: 2;
}
img{
display: block;
box-sizing: border-box;
border-radius: 2px;
position: absolute;
width: 40px;
height: 40px;
top: 120px;
left: 120px;
position: absolute;
z-index: 3;
}
这是JS：（写的更差，把自己绕晕了好久）
var wall = [
[0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 1, 0, 2, 1, 0, 0, 0, 0, 0],
[0, 1, 0, 4, 1, 1, 1, 0, 0, 0],
[0, 1, 0, 3, 0, 0, 1, 0, 0, 0],
[0, 1, 0, 4, 0, 0, 1, 0, 0, 0],
[0, 1, 0, 2, 1, 1, 1, 0, 0, 0],
[0, 1, 1, 1, 1, 0, 0, 0, 0, 0]
];
map(wall);
function map(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
if (arr[i][j] == 1) {
var odiv = document.querySelector("div");
var p = document.createElement("p")
var op = odiv.appendChild(p);
op.className = "wall";
op.style.top = i * 40 + "px";
op.style.left = j * 40 + "px";
} else if (arr[i][j] == 2) {
var odiv = document.querySelector("div");
var p = document.createElement("p")
var op = odiv.appendChild(p);
op.className = "target";
op.style.top = i * 40 + "px";
op.style.left = j * 40 + "px";
} else if (arr[i][j] == 3) {
var odiv = document.querySelector("div");
var img = document.createElement("img");
var oimg = odiv.appendChild(img);
oimg.src = "boy.png"
oimg.id = "boy"
} else if (arr[i][j] == 4) {
var odiv = document.querySelector("div");
var p = document.createElement("p");
var op = odiv.appendChild(p);
op.innerHTML = "||";
op.className = "box";
op.style.top = i * 40 + "px";
op.style.left = j * 40 + "px";
}
}
}
}
var boy = document.getElementById("boy");
var otarget = document.getElementsByClassName("target");
var obox = document.getElementsByClassName("box");
document.onkeydown = function (eve) {
var eve = eve || window.event;
var boyx = boy.offsetLeft,
boyy = boy.offsetTop;
var owall = document.getElementsByClassName("wall");
if (eve.keyCode == 37) {
// 向左移动
boy.style.left = boy.offsetLeft - 40 + "px";
// 小孩与墙体相撞
for (var i = 0; i < owall.length; i++) {
if (owall[i].offsetLeft == boy.offsetLeft && owall[i].offsetTop == boy.offsetTop) {
boy.style.left = boyx + "px";
boy.style.top = boyy + "px";
}
}
for (var i = 0; i < obox.length; i++) {
for (var j = 0; j < owall.length; j++) {
if (obox[i].offsetLeft == boy.offsetLeft && obox[i].offsetTop == boy.offsetTop) {
// 箱子移动
obox[i].style.left = obox[i].offsetLeft - 40 + "px";
}
}
}
// 小孩推箱子与箱子相撞
for(var i =0;i<obox.length;i++){
for(var j=0;j<obox.length;j++){
if(i!=j&&obox[i].offsetLeft == obox[j].offsetLeft&&obox[i].offsetTop==obox[j].offsetTop){
obox[i].style.left = obox[i].offsetLeft+40+"px";
if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
boy.style.left = boy.offsetLeft+40+"px";
}
}
}
}
for (var i = 0; i < obox.length; i++) {
for (var j = 0; j < owall.length; j++) {
// 箱子与墙体相撞
if (obox[i].offsetLeft == owall[j].offsetLeft && obox[i].offsetTop == owall[j].offsetTop) {
obox[i].style.left = obox[i].offsetLeft+40+"px";
// 小孩与箱子相撞
if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
boy.style.left = boy.offsetLeft + 40 +"px";
}
}
}
}
if (boy.offsetLeft < 0) {
boy.style.left = 0 + "px";
}
} else if (eve.keyCode == 38) {
// 向上移动
boy.style.top = boy.offsetTop - 40 + "px";
// 小孩与墙体相撞
for (var i = 0; i < owall.length; i++) {
if (owall[i].offsetLeft == boy.offsetLeft && owall[i].offsetTop == boy.offsetTop) {
boy.style.left = boyx + "px";
boy.style.top = boyy + "px";
1
}
}
for (var i = 0; i < obox.length; i++) {
for (var j = 0; j < owall.length; j++) {
if (obox[i].offsetLeft == boy.offsetLeft && obox[i].offsetTop == boy.offsetTop) {
// 箱子移动
obox[i].style.top = obox[i].offsetTop - 40 + "px";
}
}
}
// 小孩推箱子与箱子相撞
for(var i =0;i<obox.length;i++){
for(var j=0;j<obox.length;j++){
if(i!=j&&obox[i].offsetLeft == obox[j].offsetLeft&&obox[i].offsetTop==obox[j].offsetTop){
obox[i].style.top = obox[i].offsetTop+40+"px";
if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
boy.style.top = boy.offsetTop+40+"px";
}
}
}
}
// 箱子与墙体相撞
for (var i = 0; i < obox.length; i++) {
for (var j = 0; j < owall.length; j++) {
if (obox[i].offsetLeft == owall[j].offsetLeft && obox[i].offsetTop == owall[j].offsetTop) {
obox[i].style.top = obox[i].offsetTop+40+"px";
// 小孩与箱子相撞
if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
boy.style.top = boy.offsetTop + 40 +"px";
}
}
}
}
if (boy.offsetTop < 0) {
boy.style.top = 0 + "px";
}
} else if (eve.keyCode == 39) {
// 向右移动
boy.style.left = boy.offsetLeft + 40 + "px";
// 小孩与墙体相撞
for (var i = 0; i < owall.length; i++) {
if (owall[i].offsetLeft == boy.offsetLeft && owall[i].offsetTop == boy.offsetTop) {
boy.style.left = boyx + "px";
boy.style.top = boyy + "px";
}
}
for (var i = 0; i < obox.length; i++) {
for (var j = 0; j < owall.length; j++) {
if (obox[i].offsetLeft == boy.offsetLeft && obox[i].offsetTop == boy.offsetTop) {
// 箱子移动
obox[i].style.left = obox[i].offsetLeft + 40 + "px";
}
}
}
// 小孩推箱子与箱子相撞
for(var i =0;i<obox.length;i++){
for(var j=0;j<obox.length;j++){
if(i!=j&&obox[i].offsetLeft == obox[j].offsetLeft&&obox[i].offsetTop==obox[j].offsetTop){
obox[i].style.left = obox[i].offsetLeft-40+"px";
if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
boy.style.left = boy.offsetLeft-40+"px";
}
}
}
}
for (var i = 0; i < obox.length; i++) {
for (var j = 0; j < owall.length; j++) {
// 箱子与墙体相撞
if (obox[i].offsetLeft == owall[j].offsetLeft && obox[i].offsetTop == owall[j].offsetTop) {
obox[i].style.left = obox[i].offsetLeft-40+"px";
// 小孩与箱子相撞
if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
boy.style.left = boy.offsetLeft - 40 +"px";
}
}
}
}
if (boy.offsetLeft > 360) {
boy.style.left = 360 + "px";
}
} else if (eve.keyCode == 40) {
// 向下移动
boy.style.top = boy.offsetTop + 40 + "px";
// 小孩与墙体相撞
for (var i = 0; i < owall.length; i++) {
if (owall[i].offsetLeft == boy.offsetLeft && owall[i].offsetTop == boy.offsetTop) {
boy.style.left = boyx + "px";
boy.style.top = boyy + "px";
}
}
for (var i = 0; i < obox.length; i++) {
for (var j = 0; j < owall.length; j++) {
if (obox[i].offsetLeft == boy.offsetLeft && obox[i].offsetTop == boy.offsetTop) {
// 箱子移动
obox[i].style.top = obox[i].offsetTop + 40 + "px";
}
}
}
// 小孩推箱子与箱子相撞
for(var i =0;i<obox.length;i++){
for(var j=0;j<obox.length;j++){
if(i!=j&&obox[i].offsetLeft == obox[j].offsetLeft&&obox[i].offsetTop==obox[j].offsetTop){
obox[i].style.top = obox[i].offsetTop-40+"px";
if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
boy.style.top = boy.offsetTop-40+"px";
}
}
}
}
for (var i = 0; i < obox.length; i++) {
for (var j = 0; j < owall.length; j++) {
// 箱子与墙体相撞
if (obox[i].offsetLeft == owall[j].offsetLeft && obox[i].offsetTop == owall[j].offsetTop) {
obox[i].style.top = obox[i].offsetTop-40+"px";
// 小孩与箱子相撞
if(obox[i].offsetLeft==boy.offsetLeft&&obox[i].offsetTop==boy.offsetTop){
boy.style.top = boy.offsetTop - 40 +"px";
}
}
}
}
if (boy.offsetTop > 240) {
boy.style.top = 240 + "px";
}
}
}
function missionSucess(obj1,obj2){
var n=0;
for(var i = 0;i<obj1.length;i++){
for(var j=0;j<obj2.length;j++){
if(obj1[i].offsetLeft==obj2[j].offsetLeft&&obj1[i].offsetTop==obj2[j].offsetTop){
n++;
console.log(n);
if(n==obj1.length){
alert("YOU WIN!");
}
}
}
}
}
可以执行一下missionSuccess（），让游戏更完整一些。不过我只是个初学者，都是想到哪就桥到哪。出现bug了再去改，而且格式不符合规范，还在改进。
我最想做的就是能睡个好觉，不要半夜睡不着或是半夜醒过来，我才二十出头。不想刚挣点钱就开始留遗产。
浙公网安备 33010602011771号