AI game creator

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

No:50487

←

Prev Next

→

Bouncing Numbers
Developer User21309｜Date and time 24/3/8 16:31:19
Build time 5.094 sec｜Game capacity 1.264KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Bouncing Numbers</title>
<style>
  body {
    margin: 0;
    overflow: hidden;
    background-color: #f0f0f0;
  }
  canvas {
    display: block;
    margin: 0 auto;
    background-color: #ffffff;
  }
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

const numbers = [];
  for (let i = 0; i < 5; i++) {
    numbers.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      dx: Math.random() * 4 - 2,
      dy: Math.random() * 4 - 2,
      num: Math.floor(Math.random() * 10)
    });
  }

function drawNumber(number) {
    ctx.font = '40px Arial';
    ctx.fillText(number.num, number.x, number.y);
  }

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

numbers.forEach(number => {
      number.x += number.dx;
      number.y += number.dy;

if (number.x >= canvas.width || number.x <= 0) {
        number.dx *= -1;
      }
      if (number.y >= canvas.height || number.y <= 0) {
        number.dy *= -1;
      }

drawNumber(number);
    });

requestAnimationFrame(update);
  }

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