0
충돌 감지 작업을하고 있었는데 객체가 특정 x 위치에 도달했을 때 테스트하여 간단하게 시작할 것이라고 생각했습니다. 그것은 100으로 설정했을 때 작동합니다. '캐릭터'에 대한 초기 최상위 값으로, 문제가 최고 업데이트라고 믿습니다. 그러나, 나는 왜 그런 경우 동그라미가 움직일 지 모르겠다. 만약 당신이 "최고"를 유지하는 법을 말해 줄 수 있다면 더 좋을 것이다. 충돌 탐지를 도와 주면 좋을 것이다!상위 속성이 업데이트되지 않습니다. 함수는 자바 스크립트에서 함수 값 = 초기 최상위 값으로 설정 한 경우에만 작동합니다.
(ps. 나는 CSS, javascript 및 html을 한 페이지에 넣는 것은 좋지 않다는 것을 알고 있습니다. 웹 사이트의 일부로이 파일을 하나의 파일로 옮겼으므로 코드를 살펴 보지 않고 별도로 테스트 할 수 있습니다. 전체 웹 사이트와 내가 이것을 알아 내면 적절한 파일에 추가 할 것입니다.)
<html>
<head>
<style>
#character {
position: absolute;
width: 42px;
height: 42px;
background: black;
border-radius: 50%;
}
#character2 {
position: absolute;
width: 42px;
height: 42px;
background: pink;
border-radius: 50%;
} </style>
</head>
<body>
<div id = 'character'></div>
<div id = 'character2'></div>
<script>
var keys = {};
keys.UP = 38;
keys.LEFT = 37;
keys.RIGHT = 39;
keys.DOWN = 40;
keys.W = 87;
keys.A = 65;
keys.D = 68;
keys.S = 83;
/// store reference to character's position and element
var character = {
x: 1000,
y: 100,
speedMultiplier: 1,
element: document.getElementById("character")
};
var character2 = {
x: 100,
y: 100,
speedMultiplier: 3,
element: document.getElementById("character2")
};
/// key detection (better to use addEventListener, but this will do)
document.body.onkeyup =
document.body.onkeydown = function(e){
/// prevent default browser handling of keypresses
if (e.preventDefault) {
e.preventDefault();
}
else {
e.returnValue = false;
}
var kc = e.keyCode || e.which;
keys[kc] = e.type == 'keydown';
};
/// character movement update
var moveCharacter = function(dx, dy){
character.x += (dx||0) * character.speedMultiplier;
character.y += (dy||0) * character.speedMultiplier;
character.element.style.left = character.x + 'px';
character.element.style.top = character.y + 'px';
};
var moveCharacter2 = function(dx, dy){
character2.x += (dx||0) * character2.speedMultiplier;
character2.y += (dy||0) * character2.speedMultiplier;
character2.element.style.left = character2.x + 'px';
character2.element.style.top = character2.y + 'px';
};
/// character control
var detectCharacterMovement = function(){
if (keys[keys.LEFT]) {
moveCharacter(-1, 0);
}
if (keys[keys.RIGHT]) {
moveCharacter(1, 0);
}
if (keys[keys.UP]) {
moveCharacter(0, -1);
}
if (keys[keys.DOWN]) {
moveCharacter(0, 1);
}
if (keys[keys.A]) {
moveCharacter2(-1, 0);
}
if (keys[keys.D]) {
moveCharacter2(1, 0);
}
if (keys[keys.W]) {
moveCharacter2(0, -1);
}
if (keys[keys.S]) {
moveCharacter2(0, 1);
}
};
/// update current position on screen
moveCharacter();
moveCharacter2();
/// game loop
setInterval(function(){
detectCharacterMovement();
}, 1000/24);
function getPosition() {
var elem = document.getElementById("character");
var top = getComputedStyle(elem).getPropertyValue("top");
if (top == '200px') {
alert ("hi");
}
getPosition()
}
getPosition()
// var pos1 = document.getElementById('character').style.top
</script>
</body>
</html>