<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas实现小球的自由落体</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="600px" height="600px"></canvas>
<script>
let canvas = document.getElementById("canvas");
let Gravity = 0.8;
let Firction = 0.9;
function randomIntFronRange(low, high) {
return Math.floor(Math.random() * (high - low + 1) + low)
}
canvas.width = window.innerWidth;
canvas.Height = window.innerHeight;
let ctx = canvas.getContext("2d");
let colorArray = ["rgb(83,126,255)", "rgb(3,35,128)", "rgb(6,69,255)", "rgb(41,63,128)", "rgb(11,56,255)"]
// var mouse = {};
// let maxRadius = 26;
document.addEventListener("mousedown", function (event) {
ctx.clearRect(0, 0, canvas.width, canvas.Height);
init();
});
document.addEventListener("resize", function () {
canvas.width = window.innerWidth;
canvas.Height = window.innerHeight;
init();
})
function Ball(x, y, dx, dy, radius, color) {
this.x = x;
this.y = y;
this.dy = dy
this.dx = dx;
this.radius = radius;
this.color = color;
this.draw = function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
this.update = function () {
if (this.y + this.radius + this.dy + Gravity > canvas.height) {
this.dy = -this.dy;
this.dy *= Firction;
this.dx *= Firction;
} else {
this.dy += Gravity;
}
if (this.x + this.radius + this.dx >= canvas.width || this.x - this.radius + this.dx <= 0) {
this.dx = -this.dx;
}
this.y += this.dy;
this.x += this.dx;
// if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
// this.dx = -this.dx
// }
// if (this.y + this.radius > canvas.Height || this.y - this.radius < 0) {
// this.dy = -this.dy;
// }
// this.x += this.dx;
// this.y += this.dy;
this.draw();
// if (mouse.x - this.x < 50 && mouse.x - this.x > -50 && mouse.y - this.y < 50 && mouse.y - this.y > -
// 50) {
// if (this.radius < maxRadius) {
// this.radius += 1;
// }
// } else if (this.radius > this.minRadius) {
// this.radius -= 1
// }
}
}
// let ball = new Ball(canvas.width / 2, canvas.height / 2, 10, 100, "blue");
let ballArray = [];
function init() {
for (let i = 0; i < 366; i++) {
// let radius = Math.random() * 1 + 5;
let radius = randomIntFronRange(2, 8);
let x = randomIntFronRange(radius, canvas.width - radius)
// let x = Math.random() * (canvas.width - 2 * radius) + radius;
// let y = Math.random() * (canvas.Height - 2 * radius) + radius;
let y = randomIntFronRange(radius, canvas.height - radius);
let dx = randomIntFronRange(-5, 5);
let dy = randomIntFronRange(1, 2)
// let dy = Math.random() * 5 + 10;
let color = colorArray[Math.floor(Math.random() * 5)];
ballArray.push(new Ball(x, y, dx, dy, radius, color));
}
}
init();
function animation() {
requestAnimationFrame(animation);
ctx.clearRect(0, 0, canvas.width, canvas.Height);
//ball.update();
for (let n of ballArray) {
n.update();
//n.draw();
}
}
animation();
// let run = function () {
// // ctx.clearRect(0,0,canvas.Width,canvas.Height);
// num++;
// }
// run();
// setInterval(run,10);
</script>
</body>
</html>
Canvas实现小球的自由落体
最新推荐文章于 2021-06-01 06:44:41 发布