兔子跳跳

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

引言

兔年到了，我们一起欢庆的时候千万别忘记了兔年的幸福时刻，今天我们一起庆祝兔年的时候千万记得下面的这个时候啊，接下来我将为大我的作品兔年跳跳啊。

作品介绍

  function initVars() {

        pi = Math.PI;

        ctx = canvas.getContext("2d");

        canvas.width = canvas.clientWidth;

        canvas.height = canvas.clientHeight;

        cx = canvas.width / 2;

        cy = canvas.height / 2;

        playerZ = -25;

        playerX = playerY = playerVX = playerVY = playerVZ = pitch = yaw = pitchV = yawV = 0;

        scale = 600;

        seedTimer = 0;seedInterval = 5, seedLife = 100;gravity = .02;

        seeds = new Array();

        sparkPics = new Array();

        s = "cantelope.org/NYE/";

            for (i = 1; i <= 10; ++i) {

                sparkPic = new Image();

                sparkPic.src = s + "spark" + i + ".png";

                sparkPics.push(sparkPic);

            }

        sparks = new Array();

        pow1 = new Audio(s + "pow1.ogg");

        pow2 = new Audio(s + "pow2.ogg");

        pow3 = new Audio(s + "pow3.ogg");

        pow4 = new Audio(s + "pow4.ogg");

        frames = 0;

    }

    function rasterizePoint(x, y, z) {

        var p, d;

        x -= playerX;

        y -= playerY;

        z -= playerZ;

        p = Math.atan2(x, z);

        d = Math.sqrt(x * x + z * z);

        x = Math.sin(p - yaw) * d;

        z = Math.cos(p - yaw) * d;

        p = Math.atan2(y, z);

        d = Math.sqrt(y * y + z * z);

        y = Math.sin(p - pitch) * d;

        z = Math.cos(p - pitch) * d;

        var rx1 = -1000,ry1 = 1,rx2 = 1000,ry2 = 1,rx3 = 0,ry3 = 0,rx4 = x,ry4 = z,uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);

        if (!uc) return { x: 0, y: 0, d: -1 };

        var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;

        var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;

        if (!z) z = .000000001;

        if (ua > 0 == ua < 1 == ub > 0 == ub < 1) {

            return {

                x: cx + (rx1 + ua * (rx2 - rx1)) * scale,

                y: cy + y / z * scale,

                d: Math.sqrt(x * x + y * y + z * z) };

        } else {

            return {

                x: cx + (rx1 + ua * (rx2 - rx1)) * scale,

                y: cy + y / z * scale,

                d: -1 };

        }

    }

    function spawnSeed() {

        seed = new Object();

        seed.x = -50 + Math.random() * 100;

        seed.y = 25;

        seed.z = -50 + Math.random() * 100;

        seed.vx = .1 - Math.random() * .2;

        seed.vy = -1.5; //*(1+Math.random()/2);

        seed.vz = .1 - Math.random() * .2;

        seed.born = frames;

        seeds.push(seed);

    }

代码解析

首先我们通过动画的定义过程，配合了被进图的样式设置额兔子在上下位置的跳动过程，然后通过css的配合完成了定位的需要，灵活的设置和调整了背景的搭配，完美的呈现出每秒的表现形式，最后我们看看js的核心设置过程还添加了对象的配置属性，最后的解雇就是界面呈现的兔子跳跳过程了

总结

通过上面的兔年作品希望大家可以收获到我的祝福，希望大家可以在兔年收获事业，爱情，金钱等等等，最后真切的祝福大家新年快乐，兔年吉祥。