<!DOCTYPE HTML>
<HTML>
<HEAD>
<META name="Generator" content="EditPlus">
<META name="Author" content="ResumeBB">
<META name="Keywords" content="">
<META name="Description" content="">
<TITLE>碰撞球</TITLE>
<style>
body{
margin:0;
}
canvas{
display:block;
}
</style>
</HEAD>
<BODY>
<canvas class="bubble"></canvas>
<script>
var oCanvas=document.querySelector(".bubble");
var w,h;
var aColor=["#ffff99","#00ffcc","#ff0066","#00ffcc","#0000ff"];
var aBubble=[];//存放新生成的小球
~~function setSize(){
window.οnresize=arguments.callee;
//获取浏览器宽，高
w=window.innerWidth;
h=window.innerHeight;
//给canvas元素设置可视区域大小
oCanvas.width=w;
oCanvas.height=h;
}();
//获取canvas元素上可用来绘制的区域
var canCon=oCanvas.getContext("2d");
function random(min,max){
return Math.random()*(max-min)+min;//获取max-min之间的值
}
function Bubble(){};
Bubble.prototype={
init:function(){//基本参数
this.x=random(0,w);//新生成小球的x位置 0-w
this.y=random(0,h);//新生成小球的y位置 0-h
this.r=random(1,5);//新生成小球的半径
this.color=aColor[Math.floor(random(0,5))];//新生成小球的颜色
this.vx=random(-1,1);
this.vy=random(-1,1);
},
draw:function(){
canCon.beginPath();//把笔抬起来
canCon.fillStyle=this.color;//画笔设置颜色
canCon.arc(this.x,this.y,this.r,0,Math.PI*2);//画一个圆 圆心 半径 角度
canCon.fill()//填充作画
},
move:function(){
this.x+=this.vx;
this.y+=this.vy;
if(this.x-this.r<0||this.x+this.r>w){
this.vx=-this.vx;
}
if(this.y-this.r<0||this.y+this.r>w){
this.vy=-this.vy;
}
this.draw();
}
}
var bubble=new Bubble();
bubble.init();
bubble.draw();
function create(num){
for(var i=0;i<num;i++){
var bubble=new Bubble();
bubble.init();
bubble.draw();
aBubble.push(bubble);
}
}
create(500);
setInterval(function(){
canCon.clearRect(0,0,w,h);
for(var item of aBubble){
item.move();
}
},1000/60);
</script>
</BODY>
</HTML>
效果图
