0
私は衝突検出に取り組んでおり、オブジェクトが特定のx位置に達したときにテストすることで簡単に始めると考えました。それは私が100に設定したときに機能します。これは、文字の最初の最高値であり、問題がトップアップであると信じられます。しかし、私はなぜ円が動いているのか分からない。「トップ」を最新の状態に保つ方法を教えてもらえれば、すばらしい衝突検出を手伝ってください！上位属性は更新されません。関数は、関数値= JavaScriptの最初のトップ値に設定した場合にのみ機能します
（ps、JavaScript、htmlを1ページに入れるのは良いことだと知っていますが、これをウェブサイトの一部として1つのファイルに移動しました。ウェブサイト全体を確認したら、適切なファイルに追加します）
<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>