jquery canvas深海乌贼鼠标交互游动动画效果代码-html代码-BFW代码库

jquery canvas深海乌贼鼠标交互游动动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery canvas深海乌贼鼠标交互游动动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body{background:#333;margin:0;overflow:hidden}canvas{background:black}
    </style>
</head>

<body>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
        var App = {};
 jQuery(document).ready(function() {
     App.setup();
     App.frame = function() {
         App.update();
         window.requestAnimationFrame(App.frame)
     };
     App.frame();
     jQuery("canvas#ourCanvas").on("click", function(a) {
         App.hasUserClicked = !App.hasUserClicked
     });
     jQuery("canvas#ourCanvas").on("mousemove", function(a) {
         App.target.x = a.pageX;
         App.target.y = a.pageY
     })
 });
 App.setup = function() {
     var a = document.createElement("canvas");
     a.height = window.innerHeight;
     a.width = window.innerWidth;
     a.id = "ourCanvas";
     document.body.appendChild(a);
     this.ctx = a.getContext("2d");
     this.width = a.width;
     this.height = a.height;
     this.stepCount = 0;
     this.hasUserClicked = false;
     this.xC = a.width / 2;
     this.yC = a.height / 2;
     this.target = {
         x: this.xC,
         y: this.yC,
         radius: 20
     };
     this.armsPop = 20;
     this.arms = [];
     for (var b = 0; b < this.armsPop; b++) {
         this.arms.push([])
     }
     this.initialBirth();
     this.gravity = -1;
     this.springStiffness = 0.5;
     this.viscosity = 0.1;
     this.isElastic = false
 };
 App.initialBirth = function() {
     for (var b = 0; b < this.arms.length; b++) {
         var a = this.arms[b];
         var e = 20 + Math.ceil(20 * Math.random());
         for (var c = 0; c < e; c++) {
             var f = this.width * Math.random();
             var g = this.height * Math.random();
             var d = {
                 x: f,
                 y: g,
                 xLast: f,
                 yLast: g,
                 xSpeed: 0,
                 ySpeed: 0,
                 stickLength: 10,
                 name: "seed" + this.stepCount
             };
             a.push(d)
         }
     }
 };
 App.update = function() {
     this.evolve();
     this.move();
     this.draw()
 };
 App.evolve = function() {
     this.stepCount++;
     this.target.radius = 50 + 30 * Math.sin(this.stepCount / 10)
 };
 App.move = function() {
     if (!this.hasUserClicked) {
         this.target.x = this.xC + 150 * Math.cos(this.stepCount / 50);
         this.target.y = this.yC + 150 * Math.sin(this.stepCount / 20)
     }
     for (var c = 0; c < this.arms.length; c++) {
         var b = this.arms[c];
         var j = 2 * Math.PI * c / this.arms.length;
         var h = {
             x: this.target.x + this.target.radius * Math.cos(j),
             y.........完整代码请登录后点击上方下载按钮下载查看