ボールが壁に当たると反射して同じ性質のボールが二つに増えるゲーム's game

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

No:36792

←

Prev Next

→

ボールが壁に当たると反射して同じ性質のボールが二つに増えるゲーム
Developer User4403｜Date and time 24/1/18 11:15:42
Build time 7.99 sec｜Game capacity 1.753KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
<style>
  canvas {
    border:1px solid #000000;
  }
</style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

let ballPosX = canvas.width / 2;
      let ballPosY = canvas.height - 30;
      let ballRadius = 10;
      let ballSpeedX = 2;
      let ballSpeedY = -2;

let balls = [createBall(ballPosX, ballPosY, ballSpeedX, ballSpeedY)];

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

function drawBall(ball) {
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }

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

for(let i=0; i<balls.length; i++) {
          let ball = balls[i];

drawBall(ball);

ball.x += ball.dx;
          ball.y += ball.dy;

if(ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
            ball.dx = -ball.dx;
            balls.push(createBall(ball.x, ball.y, -ball.dx, ball.dy));
          }

if(ball.y + ball.dy > canvas.height - ball.radius || ball.y + ball.dy < ball.radius) {
            ball.dy = -ball.dy;
            balls.push(createBall(ball.x, ball.y, ball.dx, -ball.dy));
          }
        }

requestAnimationFrame(update);
      }

update();
    });
  </script>
</body>
</html>