Javascript与Canvas游戏场景开发之多彩弹力球

众所周知，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;
}

Javascript与Canvas游戏场景开发之多彩弹力球

猜你喜欢