我無法正確構建邏輯。將足球丟入球門后，分數不會增加。如我的 JS 腳本代碼中所述，我嘗試將 score 添加到 scoreDisplay 函式（粗體）。感謝您關注這個問題。
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Score:<span id="score">0</span></h3>
<button id="start-button">Start/Pause</button>
<p>Drag the ball.</p>
<img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" >
<img src="https://picsum.photos/150/150" id="ball">
<script>
const scoreDisplay = document.querySelector('#score')
let score = 0
let currentDroppable = null;
ball.onmousedown = function(event) {
let shiftX = event.clientX - ball.getBoundingClientRect().left;
let shiftY = event.clientY - ball.getBoundingClientRect().top;
ball.style.position = 'absolute';
ball.style.zIndex = 1000;
document.body.append(ball);
moveAt(event.pageX, event.pageY);
function moveAt(pageX, pageY) {
ball.style.left = pageX - shiftX 'px';
ball.style.top = pageY - shiftY 'px';
}
function onm ouseMove(event) {
moveAt(event.pageX, event.pageY);
ball.hidden = true;
let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
ball.hidden = false;
if (!elemBelow) return;
let droppableBelow = elemBelow.closest('.droppable');
if (currentDroppable != droppableBelow) {
if (currentDroppable) { // null when we were not over a droppable before this event
leaveDroppable(currentDroppable);
}
currentDroppable = droppableBelow;
if (currentDroppable) { // null if we're not coming over a droppable now
// (maybe just left the droppable)
enterDroppable(currentDroppable);
}
//add score
**function scoreIncrement() {
score ;
document.getElementById("score").innerText="Score: " score;**
}?
}
}
document.addEventListener('mousemove', onm ouseMove);
ball.onmouseup = function() {
document.removeEventListener('mousemove', onm ouseMove);
ball.onmouseup = null;
};
};
function enterDroppable(elem) {
elem.style.background = 'pink';
}
function leaveDroppable(elem) {
elem.style.background = '';
}
ball.ondragstart = function() {
return false;
};
</script>
</body>
</html>
再次感謝您花時間查看此內容
uj5u.com熱心網友回復：
你快到了！你錯過了所謂的“旗幟”。這是一個變數（通常是真/假），它包含一些資訊，允許您在正確的事件（您擁有的事件）中做出決定。
在這種情況下，一面旗幟可以告訴我是否完成了目標，因此當我丟球時，我可以在得分上加一分。
正如您在下面的代碼中看到的，當您進入Droppable 時，該標志設定為true，而當您離開Droppable 時，它??又設定為false；然后當觸發事件 mouseUp 時，檢查標志。如果標志為真，那么分數會增加（并且它的值會在螢屏上更新）
請注意，我更改了球的樣式，使其看起來更像一個球。另請注意，訂閱和洗掉其他事件中的事件并不是一個好習慣。最好讓事件訂閱一次并擁有更多標志：例如，在 mouseDown 中設定一個標志以知道球被“抓住”，然后 mouseMove 事件將檢查該標志以查看它是否必須移動球或不是。我保持原樣，所以不要過多地更改您的代碼，但請記住它。
請參閱下面的作業代碼（一直向下滾動并單擊“運行截斷的代碼”以查看它的運行情況）。此外，如果這解決了您的問題，請不要忘記使用答案左側的綠色復選標記將其標記。
const scoreDisplay = document.querySelector('#score')
let score = 0
let currentDroppable = null;
let ballIsOverDroppable = false;
ball.onmousedown = function(event) {
let shiftX = event.clientX - ball.getBoundingClientRect().left;
let shiftY = event.clientY - ball.getBoundingClientRect().top;
ball.style.position = 'absolute';
ball.style.zIndex = 1000;
document.body.append(ball);
moveAt(event.pageX, event.pageY);
function moveAt(pageX, pageY) {
ball.style.left = pageX - shiftX 'px';
ball.style.top = pageY - shiftY 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
ball.hidden = true;
let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
ball.hidden = false;
if (!elemBelow) return;
let droppableBelow = elemBelow.closest('.droppable');
if (currentDroppable != droppableBelow) {
if (currentDroppable) { // null when we were not over a droppable before this event
leaveDroppable(currentDroppable);
}
currentDroppable = droppableBelow;
if (currentDroppable) { // null if we're not coming over a droppable now
// (maybe just left the droppable)
enterDroppable(currentDroppable);
}
}
}
document.addEventListener('mousemove', onm ouseMove);
ball.onmouseup = function() {
document.removeEventListener('mousemove', onm ouseMove);
ball.onmouseup = null;
if (ballIsOverDroppable) {
score ;
scoreDisplay.textContent = `${score}`;
}
};
};
function enterDroppable(elem) {
elem.style.background = 'pink';
ballIsOverDroppable = true;
}
function leaveDroppable(elem) {
elem.style.background = '';
ballIsOverDroppable = false;
}
ball.ondragstart = function() {
return false;
};<h3>Score:<span id="score">0</span></h3>
<button id="start-button">Start/Pause</button>
<p>Drag the ball.</p>
<img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">
<img src="https://picsum.photos/20/20" id="ball" style="border-radius: 20px; border: 2px solid black;">轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/528975.html
標籤：javascript