Js在if中只识别数组的前2个元素
Js recognizes only first 2 elements of an array in if
根据我的老问题,我在 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 值,所以我认为这是由于移动函数中的 if 语句,但我不确定。有人能解释一下为什么会这样吗?我在谷歌上搜索了很多,但看起来没有什么是我正在搜索的。
PS:我想留下没有 jQuery 的代码,但如果有必要,我会使用它。
在处理完第一个非currentElement
对象后,您return
从move
函数中的for
循环开始:
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;
}
根据我的老问题,我在 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 值,所以我认为这是由于移动函数中的 if 语句,但我不确定。有人能解释一下为什么会这样吗?我在谷歌上搜索了很多,但看起来没有什么是我正在搜索的。 PS:我想留下没有 jQuery 的代码,但如果有必要,我会使用它。
在处理完第一个非currentElement
对象后,您return
从move
函数中的for
循环开始:
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;
}