jquery实现海底鱼儿数量速度控制游动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：jquery实现海底鱼儿数量速度控制游动动画效果代码，可对鱼的数量进行增减，鱼儿游动的速度也可增减。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <style>
        .draw-line{
        stroke-width:3;
        stroke-dasharray: 3,2;
        stroke: #FF8C00;
    }.other-f1{
        stroke: lightskyblue;
    }.other-f2  {
        stroke: #11EE3D;
    }.other-f3  {
        stroke: #E6E61A;
    }.other-f4  {
        stroke: #2B2BD5;
    }.other-f5  {
        stroke: #808080;
    }.other-f6  {
        stroke: #F70938;
    }.other-f7  {
        stroke: #44A3BB;
    }.other-f8  {
        stroke: #9E4DB3;
    }
    .btn{
        padding: 5px 10px;margin: 3px;border: none;background-color: #0c8cc7;color: white;border-radius: 2px;outline: none;cursor: pointer;
        font-family: Microsoft YaHei;font-size: 14px;
    }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
        (function(){
        var config;
        var me;
        var zFish = {config : config = {
                delay: 20,
                svgH: 0,
                svgW: 0,
                da: 40,//加速度
                df: 8,//默认阻力
            },
            fishArr: []
        };
    
        me = {
            id: 'user0',
            clazz: '',
            type: 1,
            seed: 0,
            head:{
                r : 7,
                x : 50,
                y : 50,
                vx : 0,
                vy : 0,
                xPower : 0,//-1 0 1 横向加速度
                yPower : 0,//-1 0 1 纵向加速度
            },
            body:[
                {x:0,y:0,r:8},
                {x:0,y:0,r:9},
                {x:0,y:0,r:9},
                {x:0,y:0,r:8},
                {x:0,y:0,r:7},
                {x:0,y:0,r:5},
                {x:0,y:0,r:4},
                {x:0,y:0,r:5},
            ]
        };
        function makeSVG(tag,id) {
            var ns = 'http://www.w3.org/2000/svg';
            var el= document.createElementNS(ns, tag);
            el.setAttribute("class","draw-line");
            el.setAttribute("id",id);
            return el;
        }
        zFish.initRoad = function() {
            var svg = $("#svg");
            var h = svg.height();
            var w = svg.width();
            config.svgH = h;
            config.svgW = w;
        }
        zFish.initFish = function(fish) {
            var svg = $("#svg");
            var h = svg.height();
            var w = svg.width();
            var ball = $(makeSVG("circle","fish_"+fish.id+"_0"));
            ball.addClass(fish.clazz);
            var x0 = fish.head.x;
            var y0 = h-fish.head.y;
            ball.attr("cx",x0).attr("cy",y0).attr("r",fish.head.r);
            ball.css("zIndex",fish.body.length + 1);
            svg.append(ball);
            for (var tai in fish.body) {
                var tail = $(makeSVG("circle","fish_"+fish.id+"_"+(parseInt(tai)+1)));
                tail.attr("cx",x0).attr("cy",y0).attr("r",fish.body[tai].r);
                tail.addClass(fish.clazz+' draw-line');
                svg.append(tail);
                tail.css("zIndex",parseInt(tai)+1);
            }
            if(fish.type == 1){
                $("#mczl").text("路面摩擦阻力："+config.df);
            }
    
    
        }
        zFish.initEvent = function() {
            $(document).bind('keypress', function(event){
                if(event.keyCode === 119){
                    me.head.yPower = config.da;
                }else if(event.keyCode === 100){
                    me.head.xPower = config.da;
                }else if(event.keyCode === 115){
                    me.head.yPower = -config.da;
                }else if(event.keyCode === 97){
                    me.head.xPower = -config.da;
                }
            }).bind('keyup', function(event){
                if(event.keyCode === 87){
                    me.head.yPower = 0;
                }else if(event.keyCode === 68){
                    me.head.xPower = 0;
                }else if(event.keyCode === 83){
                    me.head.yPower = 0;
                }else if(event.keyCode === 65){
                    me.head.xPower = 0;
                }
            });
        }
        zFish.run = function(fish){
            var ball ;
            if(fish == null){
                fish = me;
            }
            if(fish.type !== 1){
                fish.seed ++;
                if(fish.seed > 190){
                    fish.seed = 0;
                }
                if(fish.seed == 0 ){
                    var xy = fish.getPower();
                    fish.head.xPower = xy.x;
                    fish.head.yPower = xy.y;
                }
    
            }
            var ball = fish.head;
            var xPower = ball.xPower;
            var yPower = ball.yPower;
    
            if(ball.vx !== 0 ){
                xPower += (ball.vx > 0) ? -config.df : config.df;
            }
            if(ball.vy !== 0 ){
                yPower += (ball.vy > 0) ? -config.df : config.df;
            }
            var t = config.delay/1000;
            ball.vx = ball.vx + xPower * t;
            ball.vy = ball.vy + yPower * t;
            if(Math.abs(ball.vx) < 0.0000000001){
                ball.vx = 0;
            }
            if(Math.abs(ball.vy) < 0.0000000001){
                ball.vy = 0;
            }
            var sx = ball.vx*t + 0.5* xPower*t*t;
            var sy = ball.vy*t + 0.5* yPower*t*t;
            ball.x += sx *10;
            ball.y -= sy *10;
            var fix = ball.x;
            var fiy = config.svgH-ball.y;
            var fishObj = $("#fish_"+fish.id+"_0");
            if(ball.x >ball.r && ball.x < config.svgW-ball.r){
                fishObj.attr("cx",fix);
            }else{
                ball.vx = -ball.vx;
                if(ball.x <ball.r){
                    ball.x = ball.r;
                    fishObj.attr("cx",ball.x);
                }else if(ball.x > config.svgW-ball.r){
                    ball.x = config.svgW-ball.r;
                    fishObj.attr("cx",config.svgW-ball.r);
                }
    
            }
  .........完整代码请登录后点击上方下载按钮下载查看