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

柔光的暖阳◎ 2022-05-28 22:37 176阅读 0赞

众所周知，Javascript结合HTML的canvas元素可以开发出丰富多彩的浏览器界面效果，并用于网页游戏的开发，下面分享一个在浏览器上实现的一个多彩弹力球Demo, 在这里有几点需要注意：

1、理解JavaScript类的建立，可参考：[点击打开链接][Link 1]。

2、理解JavaScript的原型继承机制，可参考：[点击打开链接][Link 2]。

3、理解canvas元素的使用。

我们先来看这个Demo实现的效果：

![20180312214712154][]

下面将源代码附上：

**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>
    <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;
    }

[Link 1]: http://blog.csdn.net/qq_37338983/article/details/78714574
[Link 2]: http://blog.csdn.net/qq_37338983/article/details/74746311
[20180312214712154]: /images/20220529/e7824b99f7064aacb93d1ff93d3e6c5c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关 windows游戏编程：球球大作战吃鸡版（C语言游戏开发）

球球大作战：前言：本游戏用到了图形界面库graphics.h，图形界面库下载安装：[https://blog.csdn.net/alzzw/article/...

分手后的思念是犯贱/ 2024年04月17日 05:46/ 0 赞/ 100 阅读

相关 QML Canvas 绘制波浪进度球

目前这个实现比较简单，就是填充一个带正弦路径的区域，然后截取出圆球部分。 ![20210312003005463.png][]![20210312003108913.png]

曾经终败给现在/ 2022年11月07日 11:51/ 0 赞/ 271 阅读

相关 JavaScript canvas实现跟随鼠标移动小球

本文实例为大家分享了js跟随鼠标移动小球的具体代码，供大家参考，具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12

冷不防/ 2022年10月29日 07:51/ 0 赞/ 230 阅读

相关 37-JavaScript-DOM-小游戏-小球碰撞后折返

参考: [Cascading Style Sheet 2.0 中文手册\_.chm][Cascading Style Sheet 2.0 _.chm] 1.

￡神魔★判官ぃ/ 2022年09月18日 12:52/ 0 赞/ 226 阅读

相关 canvas多彩条纹背景

See the Pen [ Canvas stripes][Canvas stripes] by haiqing wang ([@whqet][whqet]) on[CodeP

柔光的暖阳◎/ 2022年08月24日 14:17/ 0 赞/ 255 阅读

相关取球游戏

今盒子里有n个小球，A、B两人轮流从盒中取球，每个人都可以看到另一个人取了多少个，也可以看到盒中还剩下多少个，并且两人都很聪明，不会做出错误的判断。我

怼烎@/ 2022年08月08日 14:37/ 0 赞/ 168 阅读

相关 canvas标签实现动态小球

Html5 canvas标签实现动态小球话不多说，直接上代码 <canvas id="mycanvas" width="500" height="500" st

曾经终败给现在/ 2022年07月14日 05:50/ 0 赞/ 253 阅读

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

众所周知，Javascript结合HTML的canvas元素可以开发出丰富多彩的浏览器界面效果，并用于网页游戏的开发，下面分享一个在浏览器上实现的一个多彩弹力球Demo, 在这

柔光的暖阳◎/ 2022年05月28日 22:37/ 0 赞/ 177 阅读

相关 HTML5之canvas彩色动感小球

一：代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t

╰+哭是因爲堅強的太久メ/ 2022年05月13日 05:24/ 0 赞/ 271 阅读

相关 css动画小案例弹力球

什么是 CSS3 中的动画？动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比

系统管理员/ 2022年03月25日 03:28/ 0 赞/ 331 阅读