网站首页 » 前端开发 » HTML5 » Canvas 动画之多对象边界碰撞运动
上一篇:
下一篇:

Canvas 动画之多对象边界碰撞运动

前言

学习的道路永远没有尽头,除非……。之前分享过两篇文章《Canvas 动画之多对象运动》和《Canvas 动画之来回运动的小圆》,可以说本文是基于这两篇博文之上做出来的效果。都说一步一个脚印,记录下来了才知道自己当初是怎么走过来的。好了,马上开始今天的分享,老规矩上第二道菜:

HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas 多对象碰撞运动动画-云库前端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
            background: #000;
        }
    </style>
</head>
<body>
    <script src="index.js"></script>
    <script>
    var iCircle = new Circle();
    </script>
</body>
</html>

这个估计也没什么好说的。接下来我们上第二道菜:

JavaScript 代码
/*
* @Author: 朝夕熊
* @Date:   2017-11-05 10:17:45
* @Last Modified by:   zhaoxixiong
* @Last Modified time: 2017-11-05 10:27:05
*/
function Circle() {
    this.init();
    this.generalRandomParam();
    this.drawCircles();
    this.ballAnimate();
}
// 初始化
Circle.prototype.init = function(){
    //父元素宽高
    this.stateW = document.body.offsetWidth;
    this.stateH = document.body.offsetHeight;
    this.iCanvas = document.createElement("canvas");
    // 设置Canvas 与父元素同宽高
    this.iCanvasW = this.iCanvas.width = this.stateW;
    this.iCanvasH = this.iCanvas.height = this.stateH;
    // 获取 2d 绘画环境
    this.ctx = this.iCanvas.getContext("2d");
    // 插入到 body 元素中
    document.body.appendChild(this.iCanvas);
    // 随机生成圆的数量
    this.ballNumber = ramdomNumber(100, 500);
    // 保存所有小球的数组
    this.balls = [];
    // 保存动画中最后一个停止运动的小球
    this.animte = null;
}
// 渲染出所有圆
Circle.prototype.drawCircles = function () {
    for(var i=0;i<this.ballNumber;i++){
        this.renderBall(this.balls[0]);
    }
}
// 随机生成每个圆的相关参数
Circle.prototype.generalRandomParam = function(){
    for(var i=0;i<this.ballNumber;i++){
        var ball = {};
        // ball.aX = ramdomNumber(0.3, 0.5); // 随机生成一个加速度
        // ball.aY = ramdomNumber(0.3, 0.5);
        ball.size = ramdomNumber(3, 10); // 随机生成圆半径
        // 随机生成圆心 x 坐标
        ball.x = ramdomNumber(0+ball.size, this.iCanvasW-ball.size);
        ball.y = ramdomNumber(0+ball.size, this.iCanvasH-ball.size);

        ball.speedX = ramdomNumber(-1, 1);
        ball.speedY = ramdomNumber(-1, 1);
        this.balls.push(ball);
    }
}

// 改变圆的位置
Circle.prototype.changeposition = function(){
    for(var i=0;i<this.ballNumber;i++){
        this.balls[i].x += this.balls[i].speedX;
        this.balls[i].y += this.balls[i].speedY;
    }
}

// 画圆
Circle.prototype.renderBall = function(ball){
    this.ctx.fillStyle = "#fff";
    this.ctx.beginPath(); // 这个一定要加
    this.ctx.arc(ball.x, ball.y, ball.size, 0, 2 * Math.PI);
    this.ctx.closePath(); // 这个一定要加
    this.ctx.fill();
}

// 小球碰撞判断
Circle.prototype.collision = function(ball){
    for(var i=0;i<this.ballNumber;i++){
       if(ball.x>this.iCanvasW-ball.size || ball.x<ball.size){
            if(ball.x>this.iCanvasW-ball.size){
                ball.x = this.iCanvasW-ball.size;
            }else{
                ball.x = ball.size;
            }
            ball.speedX = - ball.speedX;
       }
       if(ball.y>this.iCanvasH-ball.size || ball.y<ball.size){
            if(ball.y>this.iCanvasH-ball.size){
                ball.y = this.iCanvasH-ball.size;
            }else{
                ball.y = ball.size;
            }
            ball.speedY = - ball.speedY;
       }
    }
}

// 开始动画
Circle.prototype.ballAnimate = function(){
    var This = this;
    var animateFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    (function move(){
        animte = animateFrame(move);
        This.ctx.clearRect(0, 0, This.iCanvasW, This.iCanvasH);
        This.changeposition();
        for(var i=0;i<This.ballNumber;i++){
           This.collision(This.balls[i]);
           This.renderBall(This.balls[i]);
        }

    })();
}
// 生成一个随机数
function ramdomNumber(min, max) {
    return Math.random() * (max - min) + min;
}

代码清楚明了,如果你对代码不是怎么关注,那么你可以看看在线 DEMO:http://yunkus.com/demo/canvas/canvas-multiple-object-collision/。上面例子中关于小球的一此参数都是随机生成。比如:小球大小、速度、初始位置等。Canvas 多对象边界碰撞运动动画就分享到这里,该懂的人估计已经懂了,还不懂的朋友可以静静地再欣赏一小段时间,关键是得沉住气。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/canvas-multiple-object-collision/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END