[英]Javascript, game, How can I determine the position (x,y) of a div element relative to a parent div in javascript?
I made a stupid 'game'. 我做了一个愚蠢的“游戏”。 I would like to improve on this stupid game by having the character be able to jump over a block that will scroll infinitely (looped) from the right to the left.
我想通过让角色能够跳过从右到左无限滚动(循环)的方块来改进这个愚蠢的游戏。 I am trying to figure out how to determine the position of the character div and the position of the scrolling block div.
我试图弄清楚如何确定字符div的位置和滚动块div的位置。
I want to know this so that I can set a conditional statement that checks of the character position(x) == block position (x) then it will end the game. 我想知道这一点,以便我可以设置一个条件语句来检查角色位置(x)==块位置(x),然后它将结束游戏。 else if the character position (x) == block position (x) && character position (y) ==!
否则,如果字符位置(x)==块位置(x)&&字符位置(y)==! block position(y) a point is awarded (for jumping over the block).
积木位置(y)获得一个点(用于越过积木)。
So far I have tried using positon() that I am logging to the console every time a keydown event is encountered that moves the character. 到目前为止,我已经尝试过使用positon(),每次遇到移动字符的keydown事件时,我都会登录到控制台。 That way I can track where the character is.
这样我就可以追踪角色的位置。 I had to do this to manually determine the bounds of my background (div id='bg') and use those bounds to limit the character from moving outside of them.
我必须手动确定背景的边界(div id ='bg'),并使用这些边界限制角色移动到背景之外。 However when I introduce a static block in the middle of the map it always says the position() = 0 regardless of where it is placed.
但是,当我在地图中间引入一个静态块时,无论放置在哪里,它总是说position()= 0。 This is just a simple square I put in the background div to represent a block.
这只是我在背景div中放置的一个简单正方形,代表一个块。
I really dont know what im doing I just tried to make something for fun and now am very confused. 我真的不知道我在做什么,我只是想做些有趣的事情,现在非常困惑。 I've been coding for a week and have no idea what I am doing.
我已经编码了一个星期,不知道我在做什么。 I went down a rabbit hole of collision detection documentation but its so far above my head.
我钻了一个碰撞检测文档的兔子洞,但是它远远超出了我的头顶。 This seems like a simple task maybe I'm wrong in thinking that.
这似乎是一个简单的任务,也许我认为是错误的。
here is my stupid game 这是我的愚蠢的游戏
here is the code I have right now 这是我现在拥有的代码
$(document).ready(function() {
// movement functions
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
// Left arrow key pressed - move left
case 37:
if($('#character').position().left > 0){
$('#character').animate({left: "-=10px"}, 'fast');
console.log($('#character').position());
}
else{
$('#character').clearQueue();
}
break;
// Right Arrow Pressed - move right
case 39:
// condition to keep in bounds of bg div
if($('#character').position().left < 720){
$('#character').animate({left: '+=10px'}, 'fast');
console.log($('#character').position());
}
// clear animate request if cndtn fails
else{
$('#character').clearQueue();
}
break;
// Space key pressed - (jump animation)
case 32:
if($('#character').position().left < 720){
$('#character').animate({top: '-=50px'}, 'fast').animate({left: '+=10px'}, 'fast').animate({top: '+=50px'}, 'fast');
console.log($('#character').position());
}
else{
$('#character').clearQueue();
}
break;
}
});
// hide rules once keys are pressed
$(document).on('keydown', function(){
$('#rules').fadeOut(1000);
$('#res').fadeOut(100);
});
// character select button
$('#charSelect').click(function(){
var input = prompt("paste image link here");
$('#character').css('background-image','url('+input+')');
$('#res').show();
});
// background select button
$('#bgSelect').click(function(){
var input = prompt("paste image link here");
$('#bg').css('background-image', 'url('+input+')');
$('#res').show();
});
//reset button
$('#reset').click(function(){
$('#character').css('background-image','url(Character.jpg)');
$('#character').css('left','0px');
$('#bg').css('background-image','url("Background.jpg")');
$('#rules').show();
$('#res').show();
});
});
您可以使用偏移功能比较定位:var差= $('#character')。offset()。left-$('#another-div')。offset()。left;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.