Make 10 blue balls that can pound on each other and walls's game

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

No:19836

117

←

Prev Next

→

Make 10 blue balls that can pound on each other an..ALL
Developer User8801｜Date and time 23/10/7 3:59:15
Build time 20.04 sec｜Game capacity 2.637KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>لعبة الكرات الزرقاء</title>
</head>
<body>
  <canvas id="gameCanvas" width="500" height="500"></canvas>
  <script>
    // احتفظ بمرجع لعنصر اللوحة
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");

// تعيين بعض الثوابت للعبة
    var ballRadius = 20;
    var ballColor = "#267cff";
    var initialSpeed = 3;
    var friction = 0.95;
  
    // قم بإنشاء كائن الكرة
    function Ball(x, y, dx, dy) {
      this.x = x; // موضع x الحالي
      this.y = y; // موضع y الحالي
      this.dx = dx; // سرعة الحركة في اتجاه x
      this.dy = dy; // سرعة الحركة في اتجاه y

// رسم الكرة على اللوحة
      this.draw = function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, ballRadius, 0, Math.PI*2);
        ctx.fillStyle = ballColor;
        ctx.fill();
        ctx.closePath();
      };

// تحديث موضع الكرة والكشف عن الاصطدامات
      this.update = function() {
        // التحقق من حدود اللوحة واصطدام الكرة
        if (this.x + this.dx > canvas.width - ballRadius || this.x + this.dx < ballRadius) {
          this.dx = -this.dx;
        }
        
        if (this.y + this.dy > canvas.height - ballRadius || this.y + this.dy < ballRadius) {
          this.dy = -this.dy;
        }
        
        // تحديث موضع الكرة
        this.x += this.dx;
        this.y += this.dy;
      };
    }

// قم بإنشاء مجموعة من الكرات الزرقاء
    var balls = [];
    for (var i = 0; i < 10; i++) {
      var x = Math.random() * (canvas.width - ballRadius * 2) + ballRadius;
      var y = Math.random() * (canvas.height - ballRadius * 2) + ballRadius;
      var dx = Math.random() * initialSpeed * 2 - initialSpeed;
      var dy = Math.random() * initialSpeed * 2 - initialSpeed;
      balls.push(new Ball(x, y, dx, dy));
    }

// دالة تقوم برسم اللعبة وتحديثها بشكل دوري
    function drawGame() {
      // مسح اللوحة
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // رسم الكرات وتحديثها
      for (var i = 0; i < balls.length; i++) {
        balls[i].draw();
        balls[i].update();
      }
      
      // تكرار تنفيذ الدالة
      requestAnimationFrame(drawGame);
    }

// استدعاء دالة رسم اللعبة لبدء اللعبة
    drawGame();
  </script>
</body>
</html>