SOURCE

console 命令行工具 X clear

                    
>
console
/****** 2017/7/19   by cK-round ******/
// 找到 <canvas> 元素:
var canvas = document.getElementById("canvas"),
    submit = document.getElementById("submit"),
    h3 = document.getElementsByTagName("h3"),
    infor = document.getElementById("box3"),
    p = document.getElementsByTagName("p"),
    w = 550, h = 690, circles = new Array(), timer, timer2, timer3,
    flage;


// 创建背景(canvastext)对象
var ctx = canvas.getContext("2d");

// 创建渐变
var bgcChange = ctx.createLinearGradient(0, h, 0, 0);
bgcChange.addColorStop(0, "#aaa");
bgcChange.addColorStop(1, "#fff");

// 填充渐变
ctx.fillStyle = bgcChange;
ctx.fillRect(0, 0, w, h);

submit.onclick = function () {
    clearInterval(timer);
    clearInterval(timer2);
    clearTimeout(timer3);
    infor.style.display = "none";
    var setBallNum = document.getElementById("ballNum1"),
        setRadius = document.getElementById("radius1"),
        setSpeed = document.getElementById("speed1"),
        ballNum, r, speed, duration = 0;
    circles.splice(0, circles.length);
    duration = duration - duration;
    r = parseInt(setRadius.value);
    var minX = r, maxX = w - r,
        minY = r, maxY = h - r;
    ballNum = parseInt(setBallNum.value);
    speed = parseFloat(setSpeed.value);
    if (isNaN(speed) || isNaN(ballNum) || isNaN(r)) {
        h3[0].innerHTML = 'Prompt:Please enter the parameters correctly!';
    } else {
        h3[0].innerHTML = 'Prompt:You have 3 seconds to prepare.';
        timer3 = setTimeout(function () {
            flage = true;
        }, 2990);
        if (!flage) {
            began(circles, ballNum, r, speed, minX, maxX, minY, maxY, duration);
        }
    }
};

canvas.onclick = function () {
    if (!flage) {
        submit.onclick()
    }
};

function began(circles, ballNum, r, speed, minX, maxX, minY, maxY, duration) {


//获取鼠标在canvas上的坐标
    canvas.onmousemove = function (e) {
        var loc = windowToCanvas(canvas, e.clientX, e.clientY);
        circles[ballNum].x = loc.x;
        circles[ballNum].y = loc.y;
    };

    function windowToCanvas(canvas, x, y) {
        var bbox = canvas.getBoundingClientRect();
        return {
            x: x - bbox.left * (w / bbox.width),
            y: y - bbox.top * (h / bbox.height)
        };
    }

    for (var i = 0; i < ballNum + 1; i++) {

        // 红球
        circles[i] = {
            x: w * Math.random(),  //圆心的x轴坐标值
            y: h * Math.random(),  //圆心的y轴坐标值
            velocityX: speed /* Math.random()*/,
            velocityY: speed /* Math.random()*/,
            color: '#f00'
        };

        //蓝球
        circles[ballNum] = {
            x: 1,  //圆心的x轴坐标值
            y: 1,  //圆心的y轴坐标值
            velocityX: 0,
            velocityY: 0,
            color: '#00f'
        };
        circles[i].x < minX || circles[i].x > maxX ? circles[i].x = minX : circles[i].x;
        circles[i].y < minY || circles[i].y > maxY ? circles[i].y = minY : circles[i].y;
    }

    timer = setInterval(function () {

        //清除画布内容
        ctx.clearRect(0, 0, w, h);

        // 填充渐变
        ctx.fillStyle = bgcChange;
        ctx.fillRect(0, 0, w, h);


        //填充球
        circles.forEach(function (b) {

            //开始一个新的绘制路径
            ctx.beginPath();
            ctx.arc(b.x, b.y, r, 0, Math.PI * 2, false);
            ctx.fillStyle = b.color;
            ctx.closePath();
            ctx.fill();
            setTimeout(function () {
                boundary(b);
                collision(circles, r);
            }, 3000)
        });
    }, 1);

    timer2 = setInterval(function () {
        duration += 0.01;
        return duration;
    }, 10);

    //边界判定
    function boundary(b) {
        if (b.x + b.velocityX > maxX) b.x = maxX;
        if (b.x + b.velocityX < minX) b.x = minX;
        if (b.y + b.velocityY > maxY) b.y = maxY;
        if (b.y + b.velocityY < minY) b.y = minY;
        if (b.x + b.velocityX > maxX ||
            b.x + b.velocityX < minX)
            b.velocityX = -b.velocityX;

        if (b.y + b.velocityY > maxY ||
            b.y + b.velocityY < minY)
            b.velocityY = -b.velocityY;
        if (b != circles[ballNum]) {
            b.x += b.velocityX;
            b.y += b.velocityY;
        }
    }

    //碰撞判定
    function collision(circles, r) {
        if (flage) {
            circles.forEach(function (b1) {
                circles.forEach(function (b2) {
                    if (b1 !== b2) {
                        var rc = Math.sqrt(Math.pow(b1.x - b2.x, 2) + Math.pow(b1.y - b2.y, 2));
                        if (Math.ceil(rc) < (r + r)) {

                            //获取碰撞后的速度增量
                            var ax = ((b1.velocityX - b2.velocityX) * Math.pow((b1.x - b2.x), 2) +
                                    (b1.velocityY - b2.velocityY) * (b1.x - b2.x) * (b1.y - b2.y)) / Math.pow(rc, 2),
                                ay = ((b1.velocityY - b2.velocityY) * Math.pow((b1.y - b2.y), 2) +
                                    (b1.velocityX - b2.velocityX) * (b1.x - b2.x) * (b1.y - b2.y)) / Math.pow(rc, 2);

                            //将速度增量赋给碰撞小球
                            b1.velocityX = b1.velocityX - ax;
                            b1.velocityY = b1.velocityY - ay;
                            b2.velocityX = b2.velocityX + ax;
                            b2.velocityY = b2.velocityY + ay;

                            //修正小球碰撞距离
                            var clength = r - rc / 2;
                            var cx = clength * (b1.x - b2.x) / rc,
                                cy = clength * (b1.y - b2.y) / rc;
                            b1.x = b1.x + cx;
                            b1.y = b1.y + cy;
                            b2.x = b2.x - cx;
                            b2.y = b2.y - cy;

                            //碰到蓝球
                            if (b1 == circles[ballNum] && b2 != circles[ballNum] && Math.ceil(rc) < (r + r) ||
                                b1 != circles[ballNum] && b2 == circles[ballNum] && Math.ceil(rc) < (r + r)) {
                                flage = false;
                                clearInterval(timer);
                                clearInterval(timer2);
                                h3[0].innerHTML = 'Prompt:You can start by clicking the mouse left key on the canvas.';
                                p[3].innerHTML = 'Radius: ' + r;
                                p[4].innerHTML = 'Ball Number: ' + ballNum;
                                p[5].innerHTML = 'Initial Max Velocity: ' + speed;
                                p[6].innerHTML = 'Duration: ' + Math.floor((duration - 3) * 100) / 100 + 's';
                                infor.style.display = "block";
                                return flage;
                            }
                        }
                    }
                })
            })
        }
    }
}
<div id="box1">
        <canvas id='canvas' width='550' height='690'>
            兄déi,你的浏览器不支持 HTML5 canvas 标签
        </canvas>
    </div>
    <div id="box2">
        <form action="javascript:;">
            <h1>Avoid The Red Ball</h1>
            <h2>Parameter setting</h2>
            <p>Radius:<br><input id="radius1" type="text" placeholder="建议不要超过30,初始值为20" value="20"></p>
            <p>Ball Number:<br><input id="ballNum1" type="text" placeholder="建议不要超过35,初始值为8" value="8"></p>
            <p>Initial Max Velocity:<br><input id="speed1" type="text" placeholder="建议不要超过8,初始值为1" value="1"></p>
            <br>
            <input id="submit" type="submit" value="Submit">&nbsp;
            <input type="reset" value="Reset">
            <br>
            <h3>Prompt:You can start by clicking the mouse left key on the canvas.</h3>
                <hr>
                <div id="box3">
                    <h1>Game Over</h1>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                </div>
        </form>
    </div>
html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #123;
    color: #eee;
}

div {
    display: inline-block;
}

#box1 {
    width: 550px;
    height: 690px;
}

#box2 {
    margin-left: 68px;
    position: absolute;
}

#box3 {
    display: none;
}

#canvas {
    margin: 0;
    padding: 0;
    border: thin solid #eee;
}