1. 构造函数 canvas小球碰撞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>构造函数运动球</title>
<style type="text/css">
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="400">你的浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//定义球的构造函数
function Ball(x,y,r,color,speedx,speedy){
this.x = x;
this.y = y;
this.r = r;
this.color = color;
this.speedx = speedx;
this.speedy = speedy;
}
//花的方法
Ball.prototype.draw = function(){
context.beginPath();
context.arc(this.x,this.y,this.r,0,Math.PI*2);
context.fillStyle = this.color;
context.fill();
}
//球的移动方法
Ball.prototype.move = function(){
this.x += this.speedx;
this.y += this.speedy;
//碰壁检测
if(this.x < this.r || this.x > canvas.width - this.r){
this.speedx *= -1;
}
if(this.y < this.r || this.y > canvas.height - this.r){
this.speedy *= -1;
}
}
//随机数函数
function randomNum(min,max){
return parseInt(Math.random()*(max-min)+min);
}
function randomColor(){
return "rgb("+randomNum(0,256)+","+randomNum(0,256)+","+randomNum(0,256)+")";
}
var arr = [];
for(var i = 0;i < 100;i++){
var r = randomNum(1,50);
var x = randomNum(r,canvas.width - r);
var y = randomNum(r,canvas.height - r);
var speedx = randomNum(1,10);
var speedy = randomNum(1,10);
var color = randomColor();
var newBall = new Ball(x,y,r,color,speedx,speedy);
arr.push(newBall);
}
//实例化球
function act(){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i = 0;i < arr.length;i++){
arr[i].draw();
arr[i].move();
}
window.requestAnimationFrame(act);
}
act();
</script>
</html>
2. 类 canvas小球碰撞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>构造函数运动球</title>
<style type="text/css">
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="400">你的浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
class Ball{
constructor(x,y,r,color,speedx,speedy){
this.x = x;
this.y = y;
this.r = r;
this.color = color;
this.speedx = speedx;
this.speedy = speedy;
}
//花的方法
draw(){
context.beginPath();
context.arc(this.x,this.y,this.r,0,Math.PI*2);
context.fillStyle = this.color;
context.fill();
}
//球的移动方法
move(){
this.x += this.speedx;
this.y += this.speedy;
//碰壁检测
if(this.x < this.r || this.x > canvas.width - this.r){
this.speedx *= -1;
}
if(this.y < this.r || this.y > canvas.height - this.r){
this.speedy *= -1;
}
}
}
//随机数函数
function randomNum(min,max){
return parseInt(Math.random()*(max-min)+min);
}
function randomColor(){
return "rgb("+randomNum(0,256)+","+randomNum(0,256)+","+randomNum(0,256)+")";
}
var arr = [];
for(var i = 0;i < 100;i++){
var r = randomNum(1,50);
var x = randomNum(r,canvas.width - r);
var y = randomNum(r,canvas.height - r);
var speedx = randomNum(1,10);
var speedy = randomNum(1,10);
var color = randomColor();
var newBall = new Ball(x,y,r,color,speedx,speedy);
arr.push(newBall);
}
//实例化球
function act(){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i = 0;i < arr.length;i++){
arr[i].draw();
arr[i].move();
}
window.requestAnimationFrame(act);
}
act();
</script>
</html>
有上可以看出，用类写面向对象的方法，思路更清晰。当然，在考虑兼容的情况下，还是使用构造函数
