基于JavaScript之碰撞的小球

最新推荐文章于 2023-07-06 21:45:43 发布

原创最新推荐文章于 2023-07-06 21:45:43 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个简单的碰撞球动画实现方法，使用HTML5 Canvas绘制多个彩色小球，并通过JavaScript控制小球在浏览器窗口内自由移动及碰撞反弹。每个小球的位置、速度、颜色随机生成，实现了动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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.onresize=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>

效果图