ボールが壁に当たると真ん中同じ性質のボールが2つできるゲーム's game

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

No:36795

←

Prev Next

→

ボールが壁に当たると真ん中同じ性質のボールが2つできるゲーム
Developer User4403｜Date and time 24/1/18 11:18:12
Build time 13.708 sec｜Game capacity 3.121KB｜

Script

←

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 {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

let balls = [];
    let score = 0;

function createBall(x, y, radius, dx, dy) {
      return {
        x: x,
        y: y,
        radius: radius,
        dx: dx,
        dy: dy,
        isSuperBall: false
      };
    }

function updateBall(ball) {
      ball.x += ball.dx;
      ball.y += ball.dy;

if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
        ball.dx = -ball.dx;
      }
      if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
        ball.dy = -ball.dy;
      }
    }

function checkCollision(ball1, ball2) {
      const dx = ball1.x - ball2.x;
      const dy = ball1.y - ball2.y;
      const distance = Math.sqrt(dx*dx + dy*dy);

if (distance < ball1.radius + ball2.radius) {
        if (ball1.isSuperBall || ball2.isSuperBall) {
          createSuperBalls(ball1.x, ball1.y);
        }
        balls.splice(balls.indexOf(ball1), 1);
        balls.splice(balls.indexOf(ball2), 1);
        score++;
      }
    }
    
    function createSuperBalls(x, y) {
      const radius = 20;
      const dx = Math.random() * 2 - 1;
      const dy = Math.random() * 2 - 1;
      
      balls.push(createBall(x, y, radius, dx, dy));
      balls.push(createBall(x, y, radius, -dx, -dy));
    }

function drawScore() {
      context.font = "16px Arial";
      context.fillStyle = "black";
      context.fillText("Score: " + score, 8, 20);
    }

function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      balls.forEach(function(ball) {
        drawBall(ball);
        updateBall(ball);

balls.forEach(function(otherBall) {
          if (otherBall !== ball) {
            checkCollision(ball, otherBall);
          }
        });
      });

drawScore();
      requestAnimationFrame(draw);
    }

function randomIntFromInterval(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

function initGame() {
      canvas.addEventListener("click", function(event) {
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

const radius = randomIntFromInterval(10, 30);
        const dx = randomIntFromInterval(-2, 2);
        const dy = randomIntFromInterval(-2, 2);

const newBall = createBall(x, y, radius, dx, dy);
        balls.push(newBall);
      });

draw();
    }

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