So i am making an HTML file but… the ball isn’t jumping at all! here is the code if someone can help:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Idle Game!</title>
<style>
body {
background-color: royalblue;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans';
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
cursor: default;
position: relative; /* Add position relative to the body */
height: 100vh; /* Ensure body takes full viewport height */
}
.button {
background-color: rgb(0, 153, 255);
border-radius: 10px; /* Adjust the radius as needed */
font-family: 'Ubuntu', sans-serif;
position: absolute;
height: 100px;
width: 100px;
text-decoration: solid;
top: 20px; /* Adjust as needed */
right: 20px; /* Adjust as needed */
cursor: pointer; /* Change cursor on hover */
display: flex;
justify-content: center;
align-items: center;
color: white; /* Optional: to make the text visible on the button */
text-align: center; /* Optional: to center the text */
}
.circle {
background-color: dodgerblue;
border-radius: 100%;
height: 100px;
width: 100px;
position: absolute;
top: 10px; /* Initial top position */
left: 10px; /* Initial left position */
}
.pad {
background-color: rgb(0, 25, 105); /* Changed color for better visibility */
border-radius: 40px;
width: 100%;
height: 50px; /* Increased height for better visibility */
position: absolute;
bottom: 0; /* Position it at the bottom */
border: 2px solid black; /* Add a border to make it stand out */
z-index: 10; /* Ensure it's on top of other elements */
text-align: center; /* Center text inside pad */
line-height: 50px; /* Center text vertically */
}
</style>
</head>
<body>
<div class="pad">Pad</div>
<div class="circle"></div>
<div class="button" onclick="startGame()">Start the game!</div>
<script>
let dy = 2; // vertical speed
let interval;
let y; // Declare y outside the event listener function
let collision = false;
function startGame() {
let circle = document.querySelector('.circle');
y = parseInt(circle.style.top) || 10; // Initial top position
let pad = document.querySelector('.pad');
let padTop = window.innerHeight - pad.offsetHeight; // Get the top position of the pad
console.log("Pad height:", pad.offsetHeight);
console.log("Pad top position:", padTop);
interval = setInterval(function () {
// Check if the circle reaches the top of the pad
if (y + circle.offsetHeight >= padTop) {
clearInterval(interval); // Stop the circle
dy = 0; // Reset vertical speed
collision = true;
circle.style.top = (padTop - circle.offsetHeight) + 'px'; // Correct position
console.log("touchè")
} else {
collision = false; // Circle is not colliding with the pad
// Move the circle downwards
y += dy;
}
// Update circle position
circle.style.top = y + 'px';
}, 10); // Move every 10 milliseconds
}
// Add event listener for space bar key press
document.addEventListener('keydown', function(event) {
if (event.code === 'Space') {
console.log(y);
let circle = document.querySelector('.circle');
if (collision) { // Only allow jumping when the circle is on the pad
dy = -10; // Set the vertical speed to -10 to make the circle jump upwards
} else {
console.log("Nuh uh, jump when on pod. this ain't your double jump type shi..."); // Inform the user that jumping is only allowed when on the pad
}
}
});
</script>
</body>
</html>
i tried to add the Y in the event.key for the space BUT THEN IT ISN’t FALLING!
i also tried to make the collision check (which worked) but it isn;t working still! WHy is the Y changing but the circle is at same place? Please someone help me!