AI game creator

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

No:43177

←

Prev Next

→

Billiards
Developer User19129｜Date and time 24/2/14 19:41:00
Build time 14.86 sec｜Game capacity 3.459KB｜

Script

النقاط: 0

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>لعبة البلياردو</title>
  <style>
    #canvas {
      background-color: green;
      margin: 0 auto;
      display: block;
    }
    
    #score {
      text-align: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="800"></canvas>
  <div id="score">النقاط: 0</div>

// إعداد قائمة الأجسام على الشاشة
    let balls = [
      { x: 100, y: 100, dx: 2, dy: 5, radius: 20 },
      { x: 200, y: 200, dx: -3, dy: -4, radius: 30 },
      { x: 300, y: 300, dx: 4, dy: -2, radius: 25 }
    ];

// الحصول على مرجع لعنصر canvas
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

// دالة لرسم الكرات
    function drawBalls() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = 0; i < balls.length; i++) {
        ctx.beginPath();
        ctx.arc(balls[i].x, balls[i].y, balls[i].radius, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.closePath();
      }
    }

// دالة لتحريك الكرات والتصادمات
    function moveBalls() {
      for (let i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].dx;
        balls[i].y += balls[i].dy;

// التصادم مع الحواف
        if (balls[i].x + balls[i].radius > canvas.width || balls[i].x - balls[i].radius < 0) {
          balls[i].dx = -balls[i].dx;
        }
        if (balls[i].y + balls[i].radius > canvas.height || balls[i].y - balls[i].radius < 0) {
          balls[i].dy = -balls[i].dy;
        }

// التصادم مع الكرات الأخرى
        for (let j = 0; j < balls.length; j++) {
          if (i !== j) {
            let dx = balls[i].x - balls[j].x;
            let dy = balls[i].y - balls[j].y;
            let distance = Math.sqrt(dx * dx + dy * dy);

if (distance < balls[i].radius + balls[j].radius) {
              balls[i].dx = -balls[i].dx;
              balls[i].dy = -balls[i].dy;
              balls[j].dx = -balls[j].dx;
              balls[j].dy = -balls[j].dy;
            }
          }
        }
      }
    }

// دالة لزيادة النقاط وتحديث عرضها
    function increaseScore() {
      score++;
      document.getElementById('score').textContent = 'النقاط: ' + score;
    }

// دالة لمراقبة النقرات على الشاشة
    function handleClick(event) {
      const rect = canvas.getBoundingClientRect();
      const clickX = event.clientX - rect.left;
      const clickY = event.clientY - rect.top;

for (let i = 0; i < balls.length; i++) {
        let dx = clickX - balls[i].x;
        let dy = clickY - balls[i].y;
        let distance = Math.sqrt(dx * dx + dy * dy);

if (distance < balls[i].radius) {
          increaseScore();
          balls.splice(i, 1);
          break;
        }
      }
    }

// إضافة مراقب للنقرات على الشاشة
    canvas.addEventListener('click', handleClick);

// دالة لتحديث اللعبة وتكرارها بسرعة
    function update() {
      drawBalls();
      moveBalls();
      requestAnimationFrame(update);
    }

// بدء تشغيل اللعبة
    update();
  </script>
</body>
</html>