balls respectifs gravity's game

Click here for free DL of the app version that can save data.

No:19848

134

←

Prev Next

→

balls respectifs gravity
Developer Clemodjaz｜Date and time 23/10/7 5:54:33
Build time 12.705 sec｜Game capacity 2.037KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>Bouncy Balls</title>
	<style>
		#canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>

// Classe pour représenter une balle
		class Ball {
			constructor(x, y, radius, color, dx, dy) {
				this.x = x;
				this.y = y;
				this.radius = radius;
				this.color = color;
				this.dx = dx;
				this.dy = dy;
			}

// Méthode pour dessiner la balle
			draw() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
				ctx.fillStyle = this.color;
				ctx.fill();
				ctx.closePath();
			}

// Méthode pour mettre à jour la position de la balle en fonction de sa vitesse
			update() {
				this.x += this.dx;
				this.y += this.dy;

// Vérifier les limites du canvas et inverser la direction de la balle en cas de collision
				if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
					this.dx = -this.dx;
				}

if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
					this.dy = -this.dy;
				}
			}
		}

// Tableau pour stocker les balles
		var balls = [
			new Ball(50, 50, 30, "red", 2, 3),
			new Ball(150, 150, 20, "blue", -3, 4),
			new Ball(250, 250, 15, "green", 5, -2)
		];

// Fonction de rendu pour mettre à jour et afficher les balles
		function render() {
			// Effacer le canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// Afficher les balles
			balls.forEach(function(ball) {
				ball.draw();
			});
		}

// Fonction pour mettre à jour les balles à chaque frame
		function update() {
			// Mettre à jour la position des balles
			balls.forEach(function(ball) {
				ball.update();
			});

// Appel récursif pour continuer l'animation
			requestAnimationFrame(update);
		}

// Lancer l'animation
		requestAnimationFrame(update);
	</script>
</body>
</html>