canvas小球自由落体

Html

Css

 * {
	margin:0;
	padding:0;
}

let canvas = document.getElementById("canves");
 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);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas小球自由落体



代码描述：小球自由落体下降

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

DANGER

相关代码

canvas小球自由落体

最新