0

基于我的老问题，我开始从头开始在 html/js/css 中重建我的游戏。当我只有播放器和 1 个积木时，它似乎有效，但在有 2 个或更多积木时不起作用。

我复制了关于使用一个数组将对象推入其中的概念。然后，我没有使用过滤器，而是为此数组使用了一个 for-of 循​​环来进行一个函数中的运动，并检查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>

它应该只是阻止我撞到第二块砖（第一块阻止我并记录它），但它让我通过并且没有记录任何关于它的内容。它接缝以获得正确的 x,y,width,height,setPosition 值，所以我认为这是由于 move 函数中的 if 语句，但我不确定。有人可以解释一下为什么会这样吗？我用谷歌搜索了很多，但看起来没有什么是我正在搜索的。PS：我想保留没有 jQuery 的代码，但如果有必要这样做，我会使用它。

4

1 回答 1

1

在处理第一个非对象后，您正在return从函数的for循环中调用：movecurrentElement

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;
}
于 2019-01-02T16:39:51.820 回答