Update index.html
Browse files- index.html +8 -4
index.html
CHANGED
@@ -20,19 +20,20 @@
|
|
20 |
let score = 0;
|
21 |
let isGameOver = false;
|
22 |
|
|
|
23 |
function startFalling() {
|
24 |
let ballPosition = 0;
|
25 |
-
const ballSpeed =
|
26 |
const catcherPosition = catcher.offsetLeft;
|
27 |
-
|
28 |
function fallBall() {
|
29 |
if (isGameOver) return;
|
30 |
|
31 |
ballPosition += ballSpeed;
|
32 |
ball.style.top = ballPosition + "px";
|
33 |
|
|
|
34 |
if (ballPosition >= window.innerHeight - 100) {
|
35 |
-
// Check if the ball is caught
|
36 |
if (ballPosition >= window.innerHeight - 120 &&
|
37 |
ballPosition <= window.innerHeight - 100 &&
|
38 |
(catcherPosition <= ball.offsetLeft &&
|
@@ -41,11 +42,12 @@
|
|
41 |
scoreDisplay.textContent = "Score: " + score;
|
42 |
}
|
43 |
|
44 |
-
// Reset ball position after
|
45 |
ballPosition = 0;
|
46 |
ball.style.left = Math.random() * (window.innerWidth - 50) + "px";
|
47 |
}
|
48 |
|
|
|
49 |
if (!isGameOver) {
|
50 |
requestAnimationFrame(fallBall);
|
51 |
}
|
@@ -54,6 +56,7 @@
|
|
54 |
fallBall();
|
55 |
}
|
56 |
|
|
|
57 |
function moveCatcher(event) {
|
58 |
const catcherWidth = catcher.offsetWidth;
|
59 |
if (event.clientX >= 0 && event.clientX <= window.innerWidth - catcherWidth) {
|
@@ -63,6 +66,7 @@
|
|
63 |
|
64 |
document.addEventListener("mousemove", moveCatcher);
|
65 |
|
|
|
66 |
function startGame() {
|
67 |
score = 0;
|
68 |
scoreDisplay.textContent = "Score: " + score;
|
|
|
20 |
let score = 0;
|
21 |
let isGameOver = false;
|
22 |
|
23 |
+
// Function to move the falling ball
|
24 |
function startFalling() {
|
25 |
let ballPosition = 0;
|
26 |
+
const ballSpeed = 4;
|
27 |
const catcherPosition = catcher.offsetLeft;
|
28 |
+
|
29 |
function fallBall() {
|
30 |
if (isGameOver) return;
|
31 |
|
32 |
ballPosition += ballSpeed;
|
33 |
ball.style.top = ballPosition + "px";
|
34 |
|
35 |
+
// If the ball reaches the bottom, check if it's caught by the catcher
|
36 |
if (ballPosition >= window.innerHeight - 100) {
|
|
|
37 |
if (ballPosition >= window.innerHeight - 120 &&
|
38 |
ballPosition <= window.innerHeight - 100 &&
|
39 |
(catcherPosition <= ball.offsetLeft &&
|
|
|
42 |
scoreDisplay.textContent = "Score: " + score;
|
43 |
}
|
44 |
|
45 |
+
// Reset ball position after it falls
|
46 |
ballPosition = 0;
|
47 |
ball.style.left = Math.random() * (window.innerWidth - 50) + "px";
|
48 |
}
|
49 |
|
50 |
+
// Continue falling
|
51 |
if (!isGameOver) {
|
52 |
requestAnimationFrame(fallBall);
|
53 |
}
|
|
|
56 |
fallBall();
|
57 |
}
|
58 |
|
59 |
+
// Function to move the catcher based on mouse movement
|
60 |
function moveCatcher(event) {
|
61 |
const catcherWidth = catcher.offsetWidth;
|
62 |
if (event.clientX >= 0 && event.clientX <= window.innerWidth - catcherWidth) {
|
|
|
66 |
|
67 |
document.addEventListener("mousemove", moveCatcher);
|
68 |
|
69 |
+
// Function to start the game
|
70 |
function startGame() {
|
71 |
score = 0;
|
72 |
scoreDisplay.textContent = "Score: " + score;
|