Javascript与Canvas游戏场景开发之多彩弹力球开发实现教程
程序员文章站
2023-11-15 12:41:40
众所周知，javascript结合html的canvas元素可以开发出丰富多彩的界面效果，并用于网页游戏的开发，下面分享一个在浏览器上实现的一个多彩弹力球demo, 在这里有几点需...
众所周知，javascript结合html的canvas元素可以开发出丰富多彩的界面效果，并用于网页游戏的开发，下面分享一个在浏览器上实现的一个多彩弹力球demo, 在这里有几点需要注意：
1、理解javascript类的建立，可参考：点击打开链接。
2、理解javascript的原型继承机制，可参考：点击打开链接。
3、理解canvas元素的使用。
我们先来看这个demo实现的效果：
下面将源代码附上：
1、html文档：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bouncing - balls</title>
<link rel="stylesheet" href="css/ballstyle.css">
</head>
<body>
<canvas></canvas><!--添加canvas元素-->
<script src = "js/colorball.js"></script>
</body>
</html>
2、js文档，colorball.js
let canvas = document.queryselector('canvas');
let ctx = canvas.getcontext('2d');
let width = canvas.width = window.innerwidth;//快速设置变量
let height = canvas.height = window.innerheight;
//返回一个随机数
function random(min, max) {
let num = math.floor(math.random() * (max - min + 1) + min);
return num;
}
//小球的构造器
function ball(x, y, velx, vely, color, size) {
this.x = x;//最开始的坐标
this.y = y;
this.velx = velx;//水平速度
this.vely = vely;//垂直速度
this.color = color;//颜色
this.size = size;//尺寸
}
//画出小球
ball.prototype.draw = function() {
ctx.beginpath();//定义画图的开始
ctx.fillstyle = this.color;//定义颜色
ctx.arc(this.x, this.y, this.size, 0, 2 * math.pi);//arc画圆弧
ctx.fill();//结束绘画
};
//let testball = new ball(50, 100, 4, 4, 'blue', 10);//测试
//更新位置
ball.prototype.update = function() {
if((this.x + this.size) >= width) {
this.velx = -(this.velx);
}
if((this.x - this.size) <= 0) {
this.velx = -(this.velx);
}
if((this.y + this.size) >= width) {
this.vely = -(this.vely);
}
if((this.y - this.size) <= 0) {
this.vely = -(this.vely);
}
this.x += this.velx;
this.y += this.vely;
};
//碰撞检测，当两个小球相撞颜色发生改变
ball.prototype.collisiondetect = function() {
for(let i = 0; i < balls.length; i++) {
if(!(this === balls[i])) {
let dx = this.x - balls[i].x;
let dy = this.y - balls[i].y;
let distance = math.sqrt(dx * dx + dy * dy);
if(distance < this.size + balls[i].size) {
balls[i].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
}
}
}
};
let balls = [];//存储球
//动画
function loop() {
ctx.fillstyle = 'rgba(0, 0, 0, 0.25)';
ctx.fillrect(0, 0, width, height);
while (balls.length < 200) {
let ball = new ball(
random(0, width),
random(0, height),
random(-8, 7),
random(-7, 8),
'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
random(10, 20)
);
balls.push(ball);
}
for(let i = 0; i < balls.length; i++) {
balls[i].draw();
balls[i].update();
balls[i].collisiondetect();
}
requestanimationframe(loop);
}
loop();
3、css文档，ballstyle.css
html, body {
margin: 0;
}
html {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
height: 100%;
}
body {
overflow: hidden;
height: inherit;
}