代码来自一门课程，不是我自己写的，但我明白它的意思和应该做的。
ship的尺寸是75px * 75px。在全尺寸时，它会移动。月亮的尺寸是50px * 35px。在全尺寸时，它会移动，但会随着火箭船移动。
该应用程序的目标是让用户使用箭头键将船移动到月球上，碰撞后，月球移动到一个随机位置。不需要记分，就这样。
但就像我说的，什么都不动。
任何帮助都是感激的。我认为问题在于我的Javascript或图像大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Lunar Landing</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<img src="img/ship.png" id="ship">
<img src="img/moon.png" id="moon">
<script src="app.js"></script>
</body>
</html>
function isTouching(a, b) {
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();
return !(
aRect.top + aRect.height < bRect.top ||
aRect.top > bRect.top + bRect.height ||
aRect.left + aRect.width < bRect.left ||
aRect.left > bRect.left + bRect.width
);
}
const init = () => {
const avatar = document.querySelector('#ship');
const coin = document.querySelector('#moon');
moveCoin();
window.addEventListener('keyup', function(e) {
if (e.key === 'ArrowDown' || e.key === 'Down') {
moveVertical(avatar, 50);
}
else if (e.key === 'ArrowUp' || e.key === 'Up') {
moveVertical(avatar, -50);
}
else if (e.key === 'ArrowRight' || e.key === 'Right') {
moveHorizontal(avatar, 50);
avatar.style.transform = 'scale(1,1)';
}
else if (e.key === 'ArrowLeft' || e.key === 'Left') {
moveHorizontal(avatar, -50);
avatar.style.transform = 'scale(-1,1)';
}
if (isTouching(avatar, coin)) moveCoin();
});
};
const moveVertical = (element, amount) => {
const currTop = extractPos(element.style.top);
element.style.top = `${currTop + amount}px`;
};
const moveHorizontal = (element, amount) => {
const currLeft = extractPos(element.style.left);
element.style.left = `${currLeft + amount}px`;
};
const extractPos = (pos) => {
if (!pos) return 100;
return parseInt(pos.slice(0, -2));
};
const moveCoin = () => {
const x = Math.floor(Math.random() * window.innerWidth);
const y = Math.floor(Math.random() * window.innerHeight);
coin.style.top = `${y}px`;
coin.style.left = `${x}px`;
};
init();
所以我认为在我的JS文件中有一些不必要的代码行。还有我的CSS。我重新观看了教程并跟随，现在它工作得很好!
这是我的CSS代码…
img {
width: 100px;
position: absolute;
top: 100px;
left: 100px;
}
这是我的JavaScript:
function isTouching(a, b) {
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();
return !(
aRect.top + aRect.height < bRect.top ||
aRect.top > bRect.top + bRect.height ||
aRect.left + aRect.width < bRect.left ||
aRect.left > bRect.left + bRect.width
);
}
const ship = document.querySelector('#rship');
const moon = document.querySelector('#bmoon');
window.addEventListener('keyup', function(e){
if(e.key === 'ArrowDown' || e.key === 'Down'){
const currTop = extractPos(ship.style.top);
ship.style.top = `${currTop + 50}px`;
}
else if(e.key === 'ArrowUp' || e.key === 'Up'){
const currTop = extractPos(ship.style.top);
ship.style.top = `${currTop - 50}px`;
}
else if(e.key === 'ArrowRight' || e.key === 'Right'){
const currLeft = extractPos(ship.style.left);
ship.style.left = `${currLeft + 50}px`;
ship.style.transform = 'scale(1, 1)';
}
else if(e.key === 'ArrowLeft' || e.key === 'Left'){
const currLeft = extractPos(ship.style.left);
ship.style.left = `${currLeft - 50}px`;
ship.style.transform = 'scale(-1, 1)';
}
if (isTouching(ship, moon)) moveMoon();
});
const extractPos = (pos) => {
if(!pos) return 100;
return parseInt(pos.slice(0, -2));
};
const moveMoon = () => {
const x = Math.floor(Math.random() * window.innerHeight);
const y = Math.floor(Math.random() * window.innerWidth);
moon.style.top = `${x}px`;
moon.style.left = `${y}px`;
}
moveMoon();