前端动画Canvas小球碰撞

广州前端开发工资水平|实施工程师转前端开发容易吗？|web前端开发调试工具

html 代码

<!DOCTYPE html>

<html>

<head>

<title>h5前端开发会用到动画吗：canvas</title>

<style>

* {

margin: 0;

padding: 0;

}

body,

html {

width: 100%;

height: 100%;

}

canvas {

display: block;

}

#mycanvas {

background: #001022;

}

#mybuttons {

position: absolute;

bottom: 20px;

left: 20px;

}

#mybuttons button {

padding: 5px;

}

</style>

</head>

<body>

</div>

</body>

$(function () {

var canvas = $(‘#mycanvas’);

var ctx = canvas.get(0).getContext(‘2d’);

var canvasWidth = canvas.width();

var canvasHeight = canvas.height();

$(window).resize(resizeCanvas);

function resizeCanvas() {

$(‘#mycanvas’).attr(‘height’, $(window).get(0).innerHeight);

$(‘#mycanvas’).attr(‘width’, $(window).get(0).innerWidth);

canvasWidth = canvas.width();

canvasHeight = canvas.height();

}

resizeCanvas();

var playAnimation = true;

var startButton = $(“#startAnimation”);

var stopButton = $(“#stopAnimation”);

startButton.hide();

startButton.click(function () {

$(this).hide();

stopButton.show();

playAnimation = true;

animate();

})

stopButton.click(function () {

$(this).hide();

startButton.show();

playAnimation = false;

})

var Asteroid = function (x, y, radius, mass, vX, vY, aX, aY) {

this.x = x;

this.y = y;

this.radius = radius;

this.mass = mass;

this.vX = vX;

this.vY = vY;

this.aX = aX;

this.aY = aY;

}

var asteroid = new Array();

for (var i = 0; i < 40; i++) {

var x = 20 + (Math.random() * (canvasWidth – 40));

var y = 20 + (Math.random() * (canvasHeight – 40));

var radius = 5 + Math.random() * 10;

var mass = radius / 2;

var vX = Math.random() * 4 – 2;

var vY = Math.random() * 4 – 2;

var aX = 0;

var aY = 0;

asteroid.push(new Asteroid(x, y, radius, mass, vX, vY, aX, aY));

}

function animate() {

ctx.clearRect(0, 0, canvasWidth, canvasHeight);

ctx.fillStyle = ‘rgb(255,255,255)’;

var asteroidLength = asteroid.length;

for (var i = 0; i < asteroidLength; i++) {

var tmpAsteroid = asteroid[i];

tmpAsteroid.x += tmpAsteroid.vX;

tmpAsteroid.y += tmpAsteroid.vY;

// if(Math.abs(tmpAsteroid.vX)>0.1){

// tmpAsteroid.vX*=0.9;

// }else{

// tmpAsteroid.vX=0;

// };

// if(Math.abs(tmpAsteroid.vY)>0.1){

// tmpAsteroid.vY*=0.9;

// }else{

// tmpAsteroid.vY=0;

// };

for (var j = i + 1; j < asteroidLength; j++) {

var tmpAsteroidB = asteroid[j];

var dX = tmpAsteroidB.x – tmpAsteroid.x;

var dY = tmpAsteroidB.y – tmpAsteroid.y;

var distance = Math.sqrt((dX * dX) + (dY * dY));

if (distance < tmpAsteroid.radius + tmpAsteroidB.radius) {

var angle = Math.atan2(dY, dX);

var sine = Math.sin(angle);

var cosine = Math.cos(angle);

var x = 0;

var y = 0;

var xB = dX * cosine + dY * sine;

var yB = dY * cosine – dX * sine;

var vX = tmpAsteroid.vX * cosine + tmpAsteroid.vY * sine;

var vY = tmpAsteroid.vY * cosine – tmpAsteroid.vX * sine;

var vXb = tmpAsteroidB.vX * cosine + tmpAsteroidB.vY * sine;

var vYb = tmpAsteroidB.vY * cosine – tmpAsteroidB.vX * sine;

var vTotal = vX – vXb;

vX = ((tmpAsteroid.mass – tmpAsteroidB.mass) * vX + 2 * tmpAsteroidB.mass * vXb) / (tmpAsteroid.mass +

tmpAsteroidB.mass)

vXb = vTotal + vX;

xB = x + (tmpAsteroid.radius + tmpAsteroidB.radius);

tmpAsteroid.x = tmpAsteroid.x + (x * cosine – y * sine);

tmpAsteroid.y = tmpAsteroid.y + (y * cosine + x * sine);

tmpAsteroidB.x = tmpAsteroid.x + (xB * cosine – yB * sine);

tmpAsteroidB.y = tmpAsteroid.y + (yB * cosine + xB * sine);

tmpAsteroid.vX = vX * cosine – vY * sine;

tmpAsteroid.vY = vY * cosine + vX * sine;

tmpAsteroidB.vX = vXb * cosine – vYb * sine;

tmpAsteroidB.vY = vYb * cosine + vXb * sine;

}

if (tmpAsteroid.x – tmpAsteroid.radius < 0) {

tmpAsteroid.x = tmpAsteroid.radius;

tmpAsteroid.vX *= -1;

tmpAsteroid.aX *= -1;

} else if (tmpAsteroid.x + tmpAsteroid.radius > canvasWidth) {

tmpAsteroid.x = canvasWidth – tmpAsteroid.radius;

tmpAsteroid.vX *= -1;

tmpAsteroid.aX *= -1;

}

if (tmpAsteroid.y – tmpAsteroid.radius < 0) {

tmpAsteroid.y = tmpAsteroid.radius;

tmpAsteroid.vY *= -1;

tmpAsteroid.aY *= -1;

} else if (tmpAsteroid.y + tmpAsteroid.radius > canvasHeight) {

tmpAsteroid.y = canvasHeight – tmpAsteroid.radius;

tmpAsteroid.vY *= -1;

tmpAsteroid.aY *= -1;

}

if (Math.abs(tmpAsteroid.vX) < 10) {

tmpAsteroid.vX += tmpAsteroid.aX;

}

if (Math.abs(tmpAsteroid.vY) < 10) {

tmpAsteroid.vY += tmpAsteroid.aY;

}

ctx.beginPath();

ctx.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI * 2, false);

ctx.closePath();

ctx.fill();

}

if (playAnimation) {

setTimeout(animate, 33);

}

animate();

})

</script>

</html>

前端开发app有那些|前端h5混合开发app|安卓app开发属于前端后端

前端动画Canvas小球碰撞

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发