It is basically a game of billiards, with items sometimes appearing on the table and causing a gust of wind when you hit them.'s game

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

No:1804

4650

←

Prev Next

→

It is basically a game of billiards, with items so..ALL
Developer User3410｜Date and time 23/6/19 3:08:24
Build time 55.661 sec｜Game capacity 5.376KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Billiards Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>

<body>
    <canvas id="gameCanvas"></canvas>
    <p>Score: <span id="score">0</span></p>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const scoreBoard = document.getElementById("score");
      const ctx = canvas.getContext("2d");
      const BALL_RADIUS = 10;
      const BALL_SPEED = 5;
      const ITEM_RADIUS = 15;
      const ITEM_PROBABILITY = 0.05;
      const WIND_SPEED = 2;

let balls = [];
      let items = [];
      let score = 0;
      let wind = 0;

function init() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        window.addEventListener('resize', function() {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
        });

canvas.addEventListener('click', function(e) {
          let x = e.clientX - canvas.offsetLeft;
          let y = e.clientY - canvas.offsetTop;
          balls.forEach(ball => {
            let distance = Math.sqrt((ball.x - x) ** 2 + (ball.y - y) ** 2);
            if (distance < BALL_RADIUS) {
              ball.vx += BALL_SPEED * (ball.x - x) / distance;
              ball.vy += BALL_SPEED * (ball.y - y) / distance;
            }
          });
        });

setInterval(update, 16);
      }

class Ball {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.vx = 0;
          this.vy = 0;
        }

move() {
          this.x += this.vx;
          this.y += this.vy;
          if (this.x < BALL_RADIUS || this.x > canvas.width - BALL_RADIUS) {
            this.vx = -this.vx;
            this.x += this.vx;
          }
          if (this.y < BALL_RADIUS || this.y > canvas.height - BALL_RADIUS) {
            this.vy = -this.vy;
            this.y += this.vy;
          }
        }

draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, BALL_RADIUS, 0, 2 * Math.PI);
          ctx.fillStyle = 'black';
          ctx.fill();
        }
      }

class Item {
        constructor(x, y) {
          this.x = x;
          this.y = y;
        }

draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, ITEM_RADIUS, 0, 2 * Math.PI);
          ctx.fillStyle = 'gold';
          ctx.fill();
        }
      }

function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw balls
        balls.forEach(ball => ball.draw());

// Draw items
        items.forEach(item => item.draw());

// Move and collide balls
        balls.forEach(ball => {
          ball.move();
          balls.forEach(otherBall => {
            if (otherBall != ball) {
              let distance = Math.sqrt((otherBall.x - ball.x) ** 2 + (otherBall.y - ball.y) ** 2);
              if (distance < BALL_RADIUS * 2) {
                let angle = Math.atan2(otherBall.y - ball.y, otherBall.x - ball.x);
                let v1 = Math.sqrt(ball.vx ** 2 + ball.vy ** 2);
                let v2 = Math.sqrt(otherBall.vx ** 2 + otherBall.vy ** 2);
                let theta1 = Math.atan2(ball.vy, ball.vx) - angle;
                let theta2 = Math.atan2(otherBall.vy, otherBall.vx) - angle;
                let phi = Math.atan2(otherBall.y - ball.y, otherBall.x - ball.x);
                let v1x = v2 * Math.cos(theta2) * Math.cos(phi) + v1 * Math.sin(theta1) * Math.cos(phi + Math.PI / 2);
                let v1y = v2 * Math.cos(theta2) * Math.sin(phi) + v1 * Math.sin(theta1) * Math.sin(phi + Math.PI / 2);
                let v2x = v1 * Math.cos(theta1) * Math.cos(phi) + v2 * Math.sin(theta2) * Math.cos(phi + Math.PI / 2);
                let v2y = v1 * Math.cos(theta1) * Math.sin(phi) + v2 * Math.sin(theta2) * Math.sin(phi + Math.PI / 2);
                ball.vx = v1x;
                ball.vy = v1y;
                otherBall.vx = v2x;
                otherBall.vy = v2y;
              }
            }
          });
        });

// Move and collide items
        items.forEach(item => {
          item.y += ITEM_RADIUS / 2;
          if (item.y > canvas.height + ITEM_RADIUS) {
            items.splice(items.indexOf(item), 1);
          }
          balls.forEach(ball => {
            let distance = Math.sqrt((ball.x - item.x) ** 2 + (ball.y - item.y) ** 2);
            if (distance < ITEM_RADIUS + BALL_RADIUS * 2) {
              items.splice(items.indexOf(item), 1);
              score++;
              scoreBoard.textContent = score;
              wind = WIND_SPEED;
            }
          });
        });

// Add item randomly
        if (Math.random() < ITEM_PROBABILITY) {
          let x = Math.random() * canvas.width;
          let y = -ITEM_RADIUS;
          let item = new Item(x, y);
          items.push(item);
        }

// Apply wind force
        balls.forEach(ball => {
          ball.vx += wind;
        });
        wind = 0;
      }

for (let i = 0; i < 10; i++) {
        let x = Math.random() * canvas.width;
        let y = Math.random() * canvas.height;
        let ball = new Ball(x, y);
        balls.push(ball);
      }

init();
    </script>
  </body>
</html>