-
Notifications
You must be signed in to change notification settings - Fork 0
/
Learntest.html
128 lines (115 loc) · 3.54 KB
/
Learntest.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<title>Ball Game</title>
<style>
#container {
position: relative;
width: 100%;
height: 90vh;
margin: 10vh auto;
border: 1px solid #000;
background-repeat: no-repeat;
background-image: url('https://www.w3schools.com/css/paris.jpg');
background-size: 100%;
}
.ball {
position: absolute;
width: 25px;
height: 25px;
border-radius: 100%;
}
#ball1 {
background: blue;
}
#ball2 {
background: rgb(202, 48, 9);
}
#ball3 {
background: rgb(147, 17, 69);
}
#ball4 {
background: rgb(102, 19, 119);
}
#ball5 {
background: rgb(22, 136, 103);
}
</style>
</head>
<body>
<div id="container">
<div id="ball1" class="ball"></div>
<div id="ball2" class="ball"></div>
<div id="ball3" class="ball"></div>
<div id="ball4" class="ball"></div>
<div id="ball5" class="ball"></div>
</div>
<script>
// Get all the ball elements
var balls = document.getElementsByClassName('ball');
// Set initial positions and velocities for each ball
var numBalls = balls.length;
var positionsX = [400, 200, 300, 500, 600];
var positionsY = [200, 100, 150, 250, 300];
var velocitiesX = [5, -13, 2, -4, 3];
var velocitiesY = [2, 4, -15, -2, -3];
// Function to update the ball positions
function updateGame() {
for (var i = 0; i < numBalls; i++) {
var ball = balls[i];
var ballX = positionsX[i];
var ballY = positionsY[i];
var ballVelocityX = velocitiesX[i];
var ballVelocityY = velocitiesY[i];
// Update ball position
ballX += ballVelocityX;
ballY += ballVelocityY;
// Check for collisions with walls
if (ballX <= 0 || ballX >= container.offsetWidth - ball.offsetWidth) {
ballVelocityX = -ballVelocityX;
}
if (ballY <= 0 || ballY >= container.offsetHeight - ball.offsetHeight) {
ballVelocityY = -ballVelocityY;
}
// Update the ball style
ball.style.left = ballX + 'px';
ball.style.top = ballY + 'px';
// Update ball velocities
velocitiesX[i] = ballVelocityX;
velocitiesY[i] = ballVelocityY;
// Check for collisions with other balls
for (var j = 0; j < numBalls; j++) {
if (i !== j && checkCollision(ball, balls[j])) {
// Reverse the velocities of both balls
velocitiesX[i] = -velocitiesX[i];
velocitiesY[i] = -velocitiesY[i];
velocitiesX[j] = -velocitiesX[j];
velocitiesY[j] = -velocitiesY[j];
}
}
// Update the position arrays
positionsX[i] = ballX;
positionsY[i] = ballY;
}
}
// Function to check collision between two elements
function checkCollision(element1, element2) {
var rect1 = element1.getBoundingClientRect();
var rect2 = element2.getBoundingClientRect();
return (
rect1.left < rect2.right &&
rect1.right > rect2.left &&
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top
);
}
// Function to start the game
function startGame() {
// Update the game every 16 milliseconds (approximately 60 frames per second)
setInterval(updateGame, 16);
}
// Start the game when the page loads
window.onload = startGame;
</script>
</body>
</html>