[已解决]第七课课后作业动动手第二题为什么浏览器一直在载入

STmove · 发表于 2018-7-12 07:49:52

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

fishc.js

/*
* --> 要求 <--
* A. 开启弹幕效果
* B. 开启星星特效
* C. 在fishc.css中找到并完成该需求
*/
window.onload =function(){
    var RUN_AS_ANIMATION = true,

    wrapper, canvas, context, width = 600, height = 600, Tau = Math.PI * 2,
    systems = [],
    mouseX = 0, mouseY = 0, repelMouse = true,
    copyCount = 1, sequenceCount = 0, maxSequenceCount = 22, sequenceDelay = 2000,
    orbitting = false, orbitAngle, orbitDegrees = 0, orbitSpeed = 1, orbitalRadius = 10, PI180 = Math.PI / 180,
    orbitVX, orbitVY,
    colourInterval,
    repaintColour = "rgba(0,0,0, .05)",
    pathObjects = [];
    pathObjects.push({
        pLength: 0,
        dom: null,
        pcStep: 0,
        pt: null,
        id: "heart",
        shape: "M 209.95 88.4 Q 210 86.85 210 86.5 210 86.05 210 85.6 210.65 27.5 177.7 7.25 143.7 -13.75 104.9 26 66.3 -13.75 32.3 7.25 -1.85 28.2 0.1 89.75 2.05 151.35 104.9 230 207.95 151.35 209.9 89.75 209.9 89.05 209.95 88.4 Z"
    }),
    // 注销了此函数的块注释
    pathObjects.push({
        pLength: 0,
        dom: null,
        pcStep: 0,
        pt: null,
        id: "star",
        shape: "M 0 115.05 L 81.35 86.25 83.55 0 136 68.5 218.7 43.95 169.8 115.05 218.7 186.1 136 161.55 83.55 230 81.35 143.8 0 115.05 Z"
    }),
    
    pathObjects.push({
        pLength: 0,
        dom: null,
        pcStep: 0,
        pt: null,
        id: "circle",
        shape: "M 220 110 Q 220 155.6 187.75 187.8 155.6 220 110 220 64.4 220 32.15 187.8 0 155.6 0 110 0 64.4 32.15 32.2 64.4 0 110 0 155.6 0 187.75 32.2 220 64.4 220 110 Z"
    }),
    pathObjects.push({
        pLength: 0,
        dom: null,
        pcStep: 0,
        pt: null,
        id: "smallHeart",
        shape: "M 174.15 97.5 Q 174.2 96.45 174.2 96.25 174.2 95.95 174.2 95.65 174.6 57.35 152.9 44.05 130.5 30.2 104.95 56.4 79.55 30.2 57.15 44.05 34.65 57.85 35.9 98.35 37.2 138.95 104.95 190.75 172.85 138.95 174.15 98.35 174.15 97.9 174.15 97.5 Z"
    }),
    pathObjects.push({
        pLength: 0,
        dom: null,
        pcStep: 0,
        pt: null,
        id: "hallow",
        shape: "M 220 188.7 L 219.5 187.75 Q 219.25 188.25 219.05 188.7 L 220 188.7 Z M 219.5 187.75 L 107.3 0.95 107.3 63.075 Q 107.85 63.05 108.4 63.05 116.65 63.05 124.15 64.95 140.05 68.9 152.5 81.3 170.75 99.6 170.75 125.4 170.75 139.9 165 152.05 M 219.05 188.7 L 106.95 188.7 0 188.7 107 0.45 107.3 0.95 M 106.95 188.7 L 106.95 187.75 106.9 187.75 Q 82 187.25 64.3 169.5 46 151.25 46 125.4 46 111.2 51.55 99.3 56.1 89.5 64.3 81.3 82 63.55 106.9 63.1 L 106.95 63.1 Q 107.125 63.087890625 107.3 63.075 L 107.3 187.75 Q 107.480859375 187.75 107.65 187.75 108 187.75 108.4 187.75 134.2 187.75 152.5 169.5 160.3 161.7 164.75 152.5 M 107.3 187.75 Q 107.1302734375 187.75 106.95 187.75"
    }),
    pathObjects.push({
        pLength: 0,
        dom: null,
        pcStep: 0,
        pt: null,
        id: "kiss",
        shape: "M 220 111.85 Q 219.6 112.1 219.2 112.35 187.4 131.35 162.3 153.55 141.15 172.15 110.5 173.35 79.15 172.4 57.8 153.55 32.6 131.3 0.6 112.2 0.3 112.05 0.05 111.85 M 219.2 112.35 Q 215.5 113.85 202.2 106.5 187.95 98.5 165 71 142.4 43.9 109.9 62.05 77.35 43.9 54.75 71 31.8 98.5 17.55 106.5 4.25 113.85 0.6 112.2 M 36.3 113.85 Q 65.95 119.15 84.55 120.75 109.25 111.8 130.8 120.05 151.35 118.9 179.7 113.85 M 84.55 120.75 Q 109.25 127.95 130.8 120.05"
    }),


    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback, element) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

    var ParticleSystem = function (id) {
        Object.defineProperty(this, 'colour', {value: '#FF1515', writable: true});
        Object.defineProperty(this, 'friction', {value: .9, writable: true});                // f < 1 == slows;  f > 1 == speeds up
        Object.defineProperty(this, 'height', {value: 100, writable: true});
        Object.defineProperty(this, 'id', {value: id, writable: true});
        Object.defineProperty(this, 'maxSpeed', {value: 10, writable: true});
        Object.defineProperty(this, 'mouseRepelDist', {value: 100, writable: true});         // Size of repel circle
        Object.defineProperty(this, 'mouseForce', {value: .05, writable: true});             // dist particle moves when influenced by mouse. lower number: blends shape more: .05 - n
        Object.defineProperty(this, 'numParticles', {value: 50, writable: true});
        Object.defineProperty(this, 'particles', {value: [], writable: true});
        Object.defineProperty(this, 'repelMouse', {value: true, writable: true});
        Object.defineProperty(this, 'springTo', {value: true, writable: true});
        Object.defineProperty(this, 'springForce', {value: .01, writable: true});           // speed of return to spring point. tightness
        Object.defineProperty(this, 'wandering', {value: true, writable: true});
        Object.defineProperty(this, 'wander', {value: .05, writable: true});                  // bigger number - fuzzier .05 just perceptible
        Object.defineProperty(this, 'wanderMod', {value: this.wander * .5, writable: true});
        Object.defineProperty(this, 'width', {value: 100, writable: true});
        Object.defineProperty(this, 'x', {value: 0, writable: true});
        Object.defineProperty(this, 'y', {value: 0, writable: true});
    }
    ParticleSystem.prototype.setWander = function (value) {
        this.wander = value;
        this.wanderMod = value * .5
    }

    ParticleSystem.prototype.generate = function () {
        for (var j = 0; j < pathObjects.length; j += 1) {
            pathObjects[j].pcStep = pathObjects[j].pLength / this.numParticles;
        }
        var pShapeArrayX, pShapeArrayY;
        for (var i = 0; i < this.numParticles; i++) {
            pShapeArrayX = [];
            pShapeArrayY = [];
            for (var p = 0; p < pathObjects.length; p += 1) {
                pathObjects[p].pt = pathObjects[p].dom.getPointAtLength(i * pathObjects[p].pcStep);
                pShapeArrayX.push(pathObjects[p].pt.x + ((this.width - 220) / 2));
                pShapeArrayY.push(pathObjects[p].pt.y + ((this.height - 230) / 2));
            }
            var p = new Particle("p" + i, pShapeArrayX, pShapeArrayY, this);
            this.particles.push(p);
        }
    }

    ParticleSystem.prototype.update = function () {
        var particle;
        for (var i = 0; i < this.numParticles; i++) {
            particle = this.particles[i];
            particle.pUpdate();
        }
    }

    ParticleSystem.prototype.pShapeMorph = function (value) {
        var particle;
        for (var i = 0; i < this.numParticles; i++) {
            particle = this.particles[i];
            particle.pChangeSpringPoint(value);
        }
    }

    var Particle = function (id, x, y, parentSystem) {
        Object.defineProperty(this, 'id', {value: id, writable: true});
        Object.defineProperty(this, 'shapesX', {value: x, writable: true});
        Object.defineProperty(this, 'shapesY', {value: y, writable: true});
        Object.defineProperty(this, 'x', {value: this.shapesX[0], writable: true});
        Object.defineProperty(this, 'y', {value: this.shapesY[0], writable: true});
        Object.defineProperty(this, 'sx', {value: this.x, writable: true});
        Object.defineProperty(this, 'sy', {value: this.y, writable: true});
        Object.defineProperty(this, 'vx', {value: 0, writable: true});
        Object.defineProperty(this, 'vy', {value: 0, writable: true});
        Object.defineProperty(this, 'densityScore', {value: 1, writable: true});
        Object.defineProperty(this, 'parentSystem', {value: parentSystem, writable: true});
        return this;
    }

    Particle.prototype.pChangeSpringPoint = function (value) {
        if (value < 0) value = 0;
        if (value >= this.x.length) value = this.x.length - 1;
        this.sx = this.shapesX[value];
        this.sy = this.shapesY[value];
    }

    Particle.prototype.pUpdate = function () {
        if (this.parentSystem.wandering) {
            this.vx += Math.random() * this.parentSystem.wander - this.parentSystem.wanderMod;
            this.vy += Math.random() * this.parentSystem.wander - this.parentSystem.wanderMod;
        }


        this.vx *= this.parentSystem.friction;
        this.vy *= this.parentSystem.friction;


        var speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
        if (speed > this.parentSystem.maxSpeed) {
            this.vx = this.parentSystem.maxSpeed * this.vx / speed;
            this.vy = this.parentSystem.maxSpeed * this.vy / speed;
        }

        if (this.parentSystem.springTo) {
            this.vx += (this.sx - this.x) * this.parentSystem.springForce;
            this.vy += (this.sy - this.y) * this.parentSystem.springForce;
        }


        if (this.parentSystem.repelMouse) {
            var dx = mouseX - this.x;
            var dy = mouseY - this.y;
            var dist = Math.sqrt(dx * dx + dy * dy);
            if (dist < this.parentSystem.mouseRepelDist) {
                var tx = mouseX - this.parentSystem.mouseRepelDist * dx / dist;
                var ty = mouseY - this.parentSystem.mouseRepelDist * dy / dist;
                this.vx += (tx - this.x) * this.parentSystem.mouseForce;
                this.vy += (ty - this.y) * this.parentSystem.mouseForce;
            }
        }

        this.x += this.vx;
        this.y += this.vy;
    };

    function get(id) {
        return document.getElementById(id);
    }

    function createCanvas(id, w, h) {
        var tCanvas = document.createElement("canvas");
        tCanvas.width = w;
        tCanvas.height = h;
        tCanvas.id = id;
        return tCanvas;
    }

    function init() {
        var tPath;
        for (var i = 0; i < pathObjects.length; i += 1) {
            tPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            tPath.setAttribute('d', pathObjects[i].shape);
            pathObjects[i].dom = tPath;
            pathObjects[i].pLength = tPath.getTotalLength();
        }

        wrapper = get("wrapper");
        canvas = createCanvas("canvas", width, height);
        wrapper.appendChild(canvas);
        context = canvas.getContext("2d");

        var system1 = new ParticleSystem('pSys1');
        systems.push(system1);
        system1.width = width;
        system1.height = height;
        system1.maxSpeed = 3;
        system1.scalar = .3;
        system1.numParticles = 100;
        system1.x = 150;
        system1.y = 150;
        system1.setWander(1);
        system1.generate();
    }

    function update() {
        for (var i = 0; i < systems.length; i++) {
            systems[i].update();
        }
        if (orbitting) {
            doOrbit();
        }
    }

    function draw() {
        var system;
        for (var i = 0; i < systems.length; i++) {
            system = systems[i];
            context.fillStyle = system.colour;
            var particle;
            for (var j = 0; j < system.numParticles; j += 1) {
                particle = system.particles[j];
                context.beginPath();
                if (particle.densityScore > 0) {
                    context.arc(particle.x, particle.y, particle.densityScore, 0, Tau, false);
                }
                context.fill();
            }
        }
    }

    function animate() {
        context.fillStyle = repaintColour;
        context.fillRect(0, 0, width, height);
        update();
        draw();
        requestAnimFrame(animate);
    }

    function setUpEvents() {
        function getMousePos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            return {
                x: evt.clientX - rect.left,
                y: evt.clientY - rect.top
            };
        }

        canvas.addEventListener('mousemove', function (evt) {
            var mousePos = getMousePos(canvas, evt);
            mouseX = mousePos.x;
            mouseY = mousePos.y;
        }, false);
    }

    function doOrbit() {
        orbitAngle = orbitDegrees * PI180;
        orbitDegrees += orbitSpeed;
        orbitVX = orbitalRadius * Math.cos(orbitAngle);
        orbitVY = orbitalRadius * Math.sin(orbitAngle);
        mouseX = orbitVX + width * .5;
        mouseY = orbitVY + height * .5;
        orbitSpeed *= 1.003;
        orbitalRadius *= 1.003;
    }

    function randomColour() {
        var r = Math.round(Math.random() * 125) + 130,
        g = Math.round(Math.random() * 155) + 100,
        b = Math.round(Math.random() * 155) + 100;
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    }

    function clickHandler(evt) {
        switch (evt.target.id) {
            case "heart":
            systems[0].pShapeMorph(0);
            break;
            case "star":
            systems[0].pShapeMorph(1);
            break;
            case "circle":
            systems[0].pShapeMorph(2);
            break;
            case "hallow":
            systems[0].pShapeMorph(4);
            break;
            case "kiss":
            systems[0].pShapeMorph(5);
            break;
            case "wander":
            systems[0].setWander(evt.target.value);
            break;
            case "friction":
            systems[0].friction = evt.target.value;
            break;
            case "mouseDistance":
            systems[0].mouseRepelDist = evt.target.value;
            break;
            case "mouseForce":
            systems[0].mouseForce = evt.target.value;
            break;
            case "springForce":
            systems[0].springForce = evt.target.value;
            break;
            default:
            /* [[-_-]] */
        }
    }

    function enableUI() {
        get("heart").addEventListener("click", clickHandler, false);
        get("star").addEventListener("click", clickHandler, false);
        get("circle").addEventListener("click", clickHandler, false);
        get("hallow").addEventListener("click", clickHandler, false);
        get("kiss").addEventListener("click", clickHandler, false);

        get('wander').addEventListener("change", clickHandler, false);
        get('friction').addEventListener("change", clickHandler, false);
        get('mouseDistance').addEventListener("change", clickHandler, false);
        get('mouseForce').addEventListener("change", clickHandler, false);
        get('springForce').addEventListener("change", clickHandler, false);
        get('UI').style.display = "block";
    }

    function sequencer() {
        sequenceCount++;
        switch (sequenceCount) {
            case 2:
            sequenceDelay = 3000;
            systems[0].colour = '#CACAF8';
            get("w" + (copyCount++)).style.display = "none";
            get("w" + copyCount).style.display = "block";
            systems[0].pShapeMorph(1);
            break;
            case 3:
            sequenceDelay = 3000;
            systems[0].colour = '#FF1515';
            get("w" + (copyCount++)).style.display = "none";
            get("w" + copyCount).style.display = "block";
            systems[0].pShapeMorph(0);
            break;
            case 4:
            sequenceDelay = 500;
            systems[0].colour = '#69359c';
            systems[0].pShapeMorph(3);
            break;
            case 5:
            sequenceDelay = 500;
            systems[0].colour = '#FF1515';
            systems[0].pShapeMorph(0);
            break;
            case 6:
            sequenceDelay = 500;
            systems[0].colour = '#69359c';
            get("w" + (copyCount++)).style.display = "none";
            get("w" + copyCount).style.display = "block";
            systems[0].pShapeMorph(3);
            break;
            case 7:
            sequenceDelay = 600;
            systems[0].colour = '#FF1515';
            systems[0].pShapeMorph(0);
            break;
            case 8:
            sequenceDelay = 500;
            systems[0].colour = '#69359c';
            systems[0].pShapeMorph(3);
            break;
            case 9:
            sequenceDelay = 1000;
            systems[0].colour = '#FF1515';
            systems[0].pShapeMorph(0);
            break;
            case 10:
            sequenceDelay = 3500;
            systems[0].pShapeMorph(2);
            get("w" + (copyCount++)).style.display = "none";
            get("w" + copyCount).style.display = "block";
            break;
            case 11:
            sequenceDelay = 1200;
            get("w" + (copyCount++)).style.display = "none";
            get("w" + copyCount).style.display = "block";
            mouseX = width * .5;
            mouseY = height * .5;
            systems[0].mouseForce = 7;
            systems[0].mouseRepelDist = 175;
            systems[0].springForce = .1;
            systems[0].setWander(.05);
            break;
            case 12:
            sequenceDelay = 9000;
            orbitting = true;
            break;
            case 13:
            sequenceDelay = 10000;
            systems[0].colour = randomColour();
            colourInterval = setInterval(function () {
                systems[0].colour = randomColour();
            }, 500);
            get("w" + (copyCount++)).style.display = "none";
            get("w" + copyCount).style.display = "block";
            break;
            case 14:
            sequenceDelay = 2000;
            clearInterval(colourInterval);
            systems[0].colour = '#FFFFFF';
            break;
            case 15:
            sequenceDelay = 300;
            systems[0].colour = '#FF1515';
            get("w" + (copyCount++)).style.display = "none";
            get("w" + copyCount).style.display = "block";
            orbitting = false;
            systems[0].pShapeMorph(0);
            mouseX = width * .5;
            mouseY = height * .5;
            break;
            case 16:
            sequenceDelay = 300;
            systems[0].mouseForce = 6;
            systems[0].mouseRepelDist = 150;
            break;
            case 17:
            sequenceDelay = 300;
            systems[0].mouseForce = 4;
            systems[0].mouseRepelDist = 100;
            break;
            case 18:
            sequenceDelay = 7000;
            systems[0].mouseForce = 0.05;
            systems[0].mouseRepelDist = 100;
            systems[0].friction = 1.01;
            mouseX = 0;
            mouseY = 0;
            break;
            case 19:
            sequenceDelay = 300;
            get("w" + (copyCount++)).style.display = "none";
            get("w" + copyCount).style.display = "block";
            systems[0].friction = .9;
            systems[0].springForce = .01;
            setUpEvents();
            break;
            case 20:
            sequenceDelay = 2000;
            break;
            case 21:
            sequenceDelay = 5000;
            enableUI();
            break;
            case 22:
            get("w" + copyCount).style.display = "none";
            break;
            default:
        }
        if (sequenceCount < maxSequenceCount) {
            setTimeout(function () {
                sequencer();
            }, sequenceDelay);
        }
    }
// 此处注释取消
    init();

    animate();
    if (!RUN_AS_ANIMATION) {
        setUpEvents();
        enableUI();
    }
    else {
        setTimeout(function () {
            sequencer();
        }, sequenceDelay);
    }
};

自己做了之后网页一直打不开，对了答案之后返现跟我操作的一样啊，浏览器试了搜狗和Chrome，都一样，求大神解惑，咦，刚去截图发现搜狗的打开了，虽然有点慢，然而Chrome的还是在转圈微信截图_20180712074746.png

最佳答案

月排行榜 / 总排行榜

不二如是

2018-7-12 08:43:12

fishc.js：
1. 去掉第500行的注释，开启弹幕效果
2. 去掉第27~36行的注释，开启星星特效

fishc.css修改一处：
C. 第46行增加color:#2ebb96;指定字体为鱼C元气绿

可用的代码包（VIP免费）：

heartBeat.zip (5.78 KB, 下载次数: 2, 售价: 5 鱼币)

跳转到最佳答案楼层

不二如是 · 发表于 2018-7-12 08:43:12

fishc.js：
1. 去掉第500行的注释，开启弹幕效果
2. 去掉第27~36行的注释，开启星星特效

fishc.css修改一处：
C. 第46行增加color:#2ebb96;指定字体为鱼C元气绿

可用的代码包（VIP免费）：

heartBeat.zip (5.78 KB, 下载次数: 2, 售价: 5 鱼币)

STmove · 发表于 2018-7-12 09:35:56

不二如是发表于 2018-7-12 08:43
fishc.js：
1. 去掉第500行的注释，开启弹幕效果
2. 去掉第27~36行的注释，开启星星特效

感谢大神回复，代码是一样的，刚才发现Chrome也能打开了，就是第一次打开的时间要好久，回想一下搜狗第一次打开的时候也是我把它放那里好久没管..... 之后就都是秒开了，又试了我自己改的那个版本，也是秒开了（我可是改了文件名的）.....
会不会是浏览器需要另外加载一些组件什么的（就像看某些本地视频的时候，播放器需要另外下载对应的解码器）

账号		自动登录	找回密码
密码			立即注册