Js распознает только первые 2 элемента массива, если - PullRequest
Новая
       20

Js распознает только первые 2 элемента массива, если

0 голосов
/ 02 января 2019

Исходя из моего старого вопроса, я начал с нуля перестраивать свою игру в html / js / css. Кажется, это работает, когда у меня есть только игрок и 1 кирпич, но не при наличии 2 или более кирпичей.

Я скопировал понятие об использовании одного массива для вставки объектов внутрь. Затем вместо фильтра я использовал цикл for для этого массива для движений в одной функции и проверял, не совпадает ли curentElement (player 0) с Obj (выбранным циклом), а затем проверяет позицию и логи, если что-то попадает. Вот мой код: 

window.addEventListener("keydown",function Keydown(e) {
		if (e.keyCode==37||e.keyCode==65) {
			for (i=0;i<16;i++) {
				if(move(currentElement,[-1,0])){break};
			}
		}
		else if (e.keyCode==38||e.keyCode==87) {
			for (i=0;i<16;i++) {
				if(move(currentElement,[0,1])){break};
			}
		}
		else if (e.keyCode==39||e.keyCode==68) {
			for (i=0;i<16;i++) {
				if(move(currentElement,[1,0])){break};
			}
		}
		else if (e.keyCode==40||e.keyCode==83) {
			for (i=0;i<16;i++) {
				if(move(currentElement,[0,-1])){break};
			}
		}
		return 0;
	}
);

function move(element,direction) {
	let newX=element.x+direction[0];
	let newY=element.y+direction[1];
	for (let Obj of Objects) {
		if (element!==Obj) {
			if (newX>=0&&newY>=0&&(newX+element.width)<=world.width&&(newY+element.height)<=world.height&&(newX>=(Obj.x+Obj.width)||newY>=(Obj.y+Obj.height)||(newX+element.width)<=Obj.x||(newY+element.height)<=Obj.y)) {
				element.x=newX;
				element.y=newY;
				element.setPosition();
				break;
			} else if (newX<=0&&direction[1]==0) {console.log("Off the world to the left")}
			else if (newY<=0&&direction[0]==0) {console.log("Off the world to the bottom")}
			else if ((newX+element.width)>=world.width&&direction[1]==0) {console.log("Off the world to the right")}
			else if ((newY+element.height)>=world.height&&direction[0]==0) {console.log("Off the world to the top")}
			else if (newX<=(Obj.x+Obj.width)) {console.log("Hitting to the right:",Obj)}
			else if (newY<=(Obj.y+Obj.height)) {console.log("Hitting to the top:",Obj)}
			else if ((newX+element.width)>=Obj.x) {console.log("Hitting to the left:",Obj)}
			else if ((newY+element.height)>=Obj.y) {console.log("Hitting to the bottom:",Obj)}
			return 1
		}
	}
	return 0;
}

function CreateObject(element,x,y) {
	const Hitbox={
		"class":element.className,
		"x":x,
		"y":y,
		"width":element.offsetWidth,
		"height":element.offsetHeight,
		"setPosition":function(){element.style.left=this.x+"px";element.style.bottom=this.y+"px";},
	}
	Hitbox.setPosition();
	Objects.push(Hitbox);
	return Hitbox;
}

const world={
	"width":document.getElementById("world").offsetWidth,
	"height":document.getElementById("world").offsetHeight
};

Objects=[];
const player=[
	CreateObject(document.getElementsByClassName("player")[0],0,0)
];
const brick=[
	CreateObject(document.getElementsByClassName("brick")[0],96,0),
	CreateObject(document.getElementsByClassName("brick")[1],128,32)
];
const currentElement=player[0];
#world {
	position:absolute;
	top:0px;
	left:0px;
	background-color:blue;
	width:640px;
	height:320px;
}
.player {
	position:absolute;
	background-color:red;
	width:32px;
	height:32px;
}
.brick {
	position:absolute;
	background-color:yellow;
	width:32px;
	height:32px;
}
<body>
	<div id="world">
		<div class="player"></div>
		<div class="brick"></div>
		<div class="brick"></div>
	</div>
	<script src="./js/physics.js"></script>
</body>

Это должно просто остановить меня от попадания во 2-й кирпич (1-й останавливает меня и регистрирует его), но вместо этого он пропускает меня и ничего не регистрирует. Он показывает правильные значения x, y, width, height, setPosition, поэтому я думаю, что это связано с оператором if внутри функции перемещения, но я не уверен. Может кто-нибудь объяснить мне, почему это счастье? Я много гуглил, но ничего не похоже на то, что я ищу. PS: я бы хотел оставить код без jQuery, но если понадобится, я воспользуюсь им.

1 Ответ

0 голосов
/ 02 января 2019

Вы return входите в цикл for в функции move после обработки первого не currentElement объекта: 

function move(element,direction) {
    let newX=element.x+direction[0];
    let newY=element.y+direction[1];
    for (let Obj of Objects) {
        if (element!==Obj) {
            if (newX>=0&&newY>=0&&(newX+element.width)<=world.width&&(newY+element.height)<=world.height&&(newX>=(Obj.x+Obj.width)||newY>=(Obj.y+Obj.height)||(newX+element.width)<=Obj.x||(newY+element.height)<=Obj.y)) {
                element.x=newX;
                element.y=newY;
                element.setPosition();
                break;
            } else if (newX<=0&&direction[1]==0) {console.log("Off the world to the left")}
            else if (newY<=0&&direction[0]==0) {console.log("Off the world to the bottom")}
            else if ((newX+element.width)>=world.width&&direction[1]==0) {console.log("Off the world to the right")}
            else if ((newY+element.height)>=world.height&&direction[0]==0) {console.log("Off the world to the top")}
            else if (newX<=(Obj.x+Obj.width)) {console.log("Hitting to the right:",Obj)}
            else if (newY<=(Obj.y+Obj.height)) {console.log("Hitting to the top:",Obj)}
            else if ((newX+element.width)>=Obj.x) {console.log("Hitting to the left:",Obj)}
            else if ((newY+element.height)>=Obj.y) {console.log("Hitting to the bottom:",Obj)}

            // Probably do NOT want to return here.. but rather just continue through the 
            // rest of the objects in Objects**
            return 1
        }
    }
    return 0;
}
...