Рисование шариков на холсте — Как скопировать один шарик на несколько шариков
Я хочу смоделировать коробку случайных движущихся шаров.
Я создал холст только с одним движущимся шаром.
Я хочу скопировать шар на другие шары, чтобы они могли начинать с определенного направления и перемещаться в произвольных направлениях независимо.
Код ниже используется для создания холста из 1 движущегося шара.
Ребята, можете ли вы помочь мне воспроизвести шары и заставить их двигаться в случайных направлениях?
Я использую Javascript, HTML5 и PHP.выделенный текст
Спасибо.
<html>
<head>
<style>
canvas { margin:0 20px 10px 200px; width:700; height:400; border:solid #CC0000; border-radius:15px;}
</style>
<canvas id="move"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('move');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var x = canvas.width / 2 + 100; //starting position
var y = canvas.height / 2 + 100;
var ball = canvas.getContext('2d');
ball.fillStyle = '#FF0000'; //color
var radius = 30;
var dx = 10;
var dy = 10;
var delta = 55; // range (from 0) of possible dx or dy change
var max = 215; // maximum dx or dy values
canvas.addEventListener("click", togglestart);
function togglestart() {
if (interval == undefined) interval = window.setInterval(animate, 10000 / 60); // 60 FPS
else {
interval = clearInterval(interval);
console.log(interval);
}
}
var interval = window.setInterval(animate, 1000 / 60);
function animate() {
var d2x = (Math.random() * delta - delta / 2); //change dx and dy by random value
var d2y = (Math.random() * delta - delta / 2);
if (Math.abs(d2x + dx) > max) // start slowing down if going too fast
d2x *= -1;
if (Math.abs(d2y + dy) > max) d2y *= -1;
dx += d2x;
dy += d2y;
if ((x + dx) < 0 || (x + dx) > canvas.width) // bounce off walls
dx *= -1;
if ((y + dy) < 0 || (y + dy) > canvas.height) dy *= -1;
x += dx;
y += dy;
ball.beginPath(); //drawing ball
ball.arc(x, y, radius, 0, 2 * Math.PI, false);
ball.clearRect(0, 0, canvas.width, canvas.height); // CLS clear the canvas
ball.fill();
}
</script>
</head>
</html>
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …