直线运动
2017-04-20 本文已影响0人
洛洛kkkkkk
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#kk{
box-shadow: 0 0 10px 0 sandybrown;
}
</style>
</head>
<body>
<canvas id="kk" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var myCanvas = document.getElementById("kk");
var context = myCanvas.getContext("2d");
// context.beginPath();
// context.fillStyle = "red";
// context.arc(100,100,30,0,Math.PI*2,false);
// context.fill();
// var ball = {
// r:30,
// x:100,
// y:100,
// color:"red",
// speedX:3,
// speedY:5
// }
function rand (min,max) {
return parseInt(Math.random()*(max-min+1)+min)
}
function Ball () {
this.r = rand(10,30);
this.x = rand(this.r,myCanvas.width-this.r);
this.y = rand(this.r,myCanvas.height-this.r);
this.color = `rgb(${rand(0,255)},${rand(0,255)},${rand(0,255)})`;
var rX = rand(-4,4);
var rY = rand(-4,4);
this.speedX = rX == 0?2:rX;
this.speedY = rY == 0?1:rY;
}
Ball.prototype.draw = function () {
context.beginPath();
context.fillStyle = this.color;
context.arc(this.x,this.y,this.r,0,Math.PI*2,false);
context.fill();
}
Ball.prototype.move = function () {
this.x+=this.speedX;
this.y+=this.speedY;
if(this.x+this.r>500 || this.x-this.r<0){
this.speedX*=-1;
}
if(this.y+this.r>500 || this.y-this.r<0){
this.speedY*=-1;
}
}
var balls = [];//用来存储所有产生的对象
for(var i=0;i<20;i++){
var ball = new Ball();
balls.push(ball);
}
function animate () {
context.clearRect(0,0,myCanvas.width,myCanvas.height);
for(var j=0;j<balls.length;j++){
balls[j].draw();
balls[j].move();
}
window.requestAnimationFrame(animate);
}
animate();
</script>
</html>
