时间掉落 html

最新推荐文章于 2024-10-04 06:11:34 发布
最新推荐文章于 2024-10-04 06:11:34 发布
阅读量687 收藏
点赞数
文章标签： html css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GracieLaw/article/details/121787126
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>时间</title>
  <style>
    html,
    body {
      -ms-touch-action: none;
      -ms-content-zooming: none;
      margin: 0;
      padding: 0;
      background: #333;
      position: absolute;
      width: 100%;
      height: 100%;
    }

    #screen {
      width: 100%;
      height: 100%;
      margin: auto auto;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: #000;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <canvas id="screen"></canvas>
</body>
<script>
  !function () {
    "use strict";

    /* ==== screen setup ==== */

    var screen = {
      elem: document.getElementById("screen"),
      width: 0,
      height: 0,
      top: 0,
      left: 0,
      resize: function () {
        var o = screen.elem;
        screen.width = o.offsetWidth;
        screen.height = o.offsetHeight;
        for (screen.left = 0, screen.top = 0; o != null; o = o.offsetParent) {
          screen.left += o.offsetLeft;
          screen.top += o.offsetTop;
        }
        screen.elem.width = screen.width;
        screen.elem.height = screen.height;
        if (PHY2D) {
          PHY2D.deleteStatic();
          PHY2D.rectangle(screen.width / 2, screen.height + 50, screen.width, 100, 0, 0);
          PHY2D.rectangle(screen.width / 2, -screen.height * 2, screen.width, 100, 0, 0);
          PHY2D.rectangle(-50, 0, 100, screen.height * 4, 0, 0);
          PHY2D.rectangle(screen.width + 50, 0, 100, screen.height * 4, 0, 0);
        }
      }
    }

    screen.elem.onselectstart = function () {
      return false;
    }
    screen.elem.ondrag = function () {
      return false;
    }
    var ctx = screen.elem.getContext("2d");
    window.addEventListener('resize', screen.resize, false);

    /* ==== pointer setup ==== */

    var pointer = {
      pos: {
        x: 0,
        y: 0
      },
      active: false,
      down: function (e, touch) {
        e.preventDefault();
        var p = touch ? e.touches[0] : e;
        (!touch && document.setCapture) && document.setCapture();
        this.pos.x = p.clientX - screen.left;
        this.pos.y = p.clientY - screen.top;
        this.active = true;
      },
      up: function (e, touch) {
        e.preventDefault();
        (!touch && document.releaseCapture) && document.releaseCapture();
        this.active = false;
      },
      move: function (e, touch) {
        e.preventDefault();
        var p = touch ? e.touches[0] : e;
        if (this.active) {
          this.pos.x = p.clientX - screen.left;
          this.pos.y = p.clientY - screen.top;
        }
      }
    }

    if ('ontouchstart' in window) {
      screen.elem.ontouchstart = function (e) {
        pointer.down(e, true);
      }.bind(pointer);
      screen.elem.ontouchmove = function (e) {
        pointer.move(e, true);
      }.bind(pointer);
      screen.elem.ontouchend = function (e) {
        pointer.up(e, true);
      }.bind(pointer);
      screen.elem.ontouchcancel = function (e) {
        pointer.up(e, true);
      }.bind(pointer);
    }
    document.addEventListener("mousedown", function (e) {
      pointer.down(e, false);
    }.bind(pointer), true);
    document.addEventListener("mousemove", function (e) {
      pointer.move(e, false);
    }.bind(pointer), true);
    document.addEventListener("mouseup", function (e) {
      pointer.up(e, false);
    }.bind(pointer), true);

    /* ==== vector 2D library ==== */

    function Vector(x, y) {
      this.x = x || 0.0;
      this.y = y || 0.0;
    }
    Vector.prototype = {
      set: function (x, y) {
        this.x = x;
        this.y = y;
        return this;
      },
      dot: function (v) {
        return this.x * v.x + this.y * v.y;
      },
      lenSqr: function () {
        return this.x * this.x + this.y * this.y;
      },
      transform: function (v, m) {
        this.x = m.cos * v.x - m.sin * v.y + m.pos.x;
        this.y = m.sin * v.x + m.cos * v.y + m.pos.y;
        return this;
      },
      rotate: function (v, m) {
        this.x = m.cos * v.x - m.sin * v.y;
        this.y = m.sin * v.x + m.cos * v.y;
        return this;
      },
      normal: function (a, b) {
        var x = a.x - b.x,
          y = a.y - b.y,
          len = Math.sqrt(x * x + y * y);
        this.x = -y / len;
        this.y = x / len;
        return this;
      },
      project: function (a, b, n) {
        var x = a.x - b.x,
          y = a.y - b.y,
          len = Math.sqrt(x * x + y * y);
        return (-y / len) * n.x + (x / len) * n.y;
      },
      addScale: function (v1, v2, s) {
        this.x = v1.x + (v2.x * s);
        this.y = v1.y + (v2.y * s);
        return this;
      },
      subScale: function (v1, v2, s) {
        this.x = v1.x - (v2.x * s);
        this.y = v1.y - (v2.y * s);
        return this;
      },
      add: function (v1, v2) {
        this.x = v1.x + v2.x;
        this.y = v1.y + v2.y;
        return this;
      },
      sub: function (v1, v2) {
        this.x = v1.x - v2.x;
        this.y = v1.y - v2.y;
        return this;
      },
      scale: function (v1, s) {
        this.x = v1.x * s;
        this.y = v1.y * s;
        return this;
      },
      perp: function () {
        var x = this.x;
        this.x = -this.y;
        this.y = x;
        return this;
      },
      inv: function (v1) {
        this.x = -v1.x;
        this.y = -v1.y;
        return this;
      },
      clamp: function (v, min, max) {
        if (v > max) v = max;
        else if (v < min) v = min;
        return v;
      },
      rotateIntoSpaceOf: function (a, m) {
        var dx = -a.x,
          dy = -a.y;
        this.x = dx * m.cos + dy * m.sin;
        this.y = dx * -m.sin + dy * m.cos;
        return this;
      },

      // SIMD Array vectors

      array: function (n, values) {
        var array = new Array(n);
        array.min = new Vector();
        array.max = new Vector();
        for (var i = 0; i < n; i++) {
          array[i] = new Vector(
            values ? values[i * 2 + 0] : 0.0,
            values ? values[i * 2 + 1] : 0.0
          );
        }
        array.transform = function (v, m) {
          for (var i = 0, len = this.length; i < len; i++) {
            var vi = v[i],
              elem = this[i];
            var x = m.cos * vi.x - m.sin * vi.y + m.pos.x;
            var y = m.sin * vi.x + m.cos * vi.y + m.pos.y;
            if (x < this.min.x) this.min.x = x;
            if (y < this.min.y) this.min.y = y;
            if (x > this.max.x) this.max.x = x;
            if (y > this.max.y) this.max.y = y;
            elem.x = x;
            elem.y = y;
          }
          return this;
        }
        array.rotate = function (v, m) {
          for (var i = 0, len = this.length; i < len; i++) {
            var vi = v[i],
              elem = this[i];
            elem.x = m.cos * vi.x - m.sin * vi.y;
            elem.y = m.sin * vi.x + m.cos * vi.y;
          }
          return this;
        }
        array.resetMinmax = function () {
          this.min.x = 100000.0;
          this.min.y = 100000.0;
          this.max.x = -100000.0;
          this.max.y = -100000.0;
        }
        array.normal = function (points) {
          for (var i = 0; i < this.length; i++) {
            this[i].normal(
              points[(i + 1) % this.length],
              points[i]
            );
          }
          return this;
        }
        return array;
      }
    }

    /* ==== Matrix container ==== */

    function Matrix() {
      this.cos = 0.0;
      this.sin = 0.0;
      this.pos = new Vector();
      this.ang = 0.0;
    }

    Matrix.prototype = {
      set: function (a, x, y, w, h) {
        this.cos = Math.cos(a);
        this.sin = Math.sin(a);
        this.ang = a;
        this.pos.x = x;
        this.pos.y = y;
        this.w = w;
        this.h = h;
        return this;
      },
      copy: function (matrix) {
        this.cos = matrix.cos;
        this.sin = matrix.sin;
        this.ang = matrix.ang;
        this.pos.x = matrix.pos.x;
        this.pos.y = matrix.pos.y;
        return this;
      },
      integrate: function (va, vx, vy, kTimeStep) {
        this.pos.x += vx * kTimeStep;
        this.pos.y += vy * kTimeStep;
        this.ang += va * kTimeStep;
        this.cos = Math.cos(this.ang);
        this.sin = Math.sin(this.ang);
        return this;
      }
    }

    /* ==== PHY2D continuous collision engine ==== */

    var PHY2D = function (ctx, pointer, Vector, Matrix) {
      var kGravity = 5;
      var kTimeStep = 1 / 60;
      var kFriction = 0.5;
      var objects = [];
      var drag = false;
      var v0 = new Vector();
      var v1 = new Vector();
      var v2 = new Vector();
      var v3 = new Vector();
      var v4 = new Vector();
      var v5 = new Vector();

      // contacts list

      var contacts = [];
      contacts.index = 0;
      contacts.create = function (A, B, pa, pb, nx, ny) {
        if (!this[this.index]) this[this.index] = new Contact();
        this[this.index++].set(A, B, pa, pb, nx, ny);
      }

      // AABB container

      function AABB() {
        this.x = 0.0;
        this.y = 0.0;
        this.w = 0.0;
        this.h = 0.0;
      }

      // Polygon constructor

      function Polygon(x, y, w, h, vertices, invMass, angle, img) {
        this.img = img;
        this.vel = new Vector();
        this.angularVel = 0.0;
        this.invMass = invMass;
        this.matrix = new Matrix().set(angle, x, y, w, h);
        this.aabb = new AABB();
        this.drag = false;
        this.static = false;
        this.length = (vertices.length / 2) | 0;
        this.localSpacePoints = new Vector().array(this.length, vertices);
        this.localSpaceNormals = new Vector().array(this.length).normal(this.localSpacePoints);
        this.worldSpaceNormals = new Vector().array(this.length);
        this.worldSpacePoints = new Vector().array(this.length);
        this.invI = (invMass > 0) ? 1 / ((1 / invMass) * (w * w + h * h) / 3) : 0
        this.c1 = new Vector();
        this.c0 = new Vector();
        objects.push(this);
      }

      Polygon.prototype = {

        // calculate aabb & transform world space points

        motionAABB: function () {
          this.worldSpacePoints.resetMinmax();
          this.worldSpacePoints.transform(this.localSpacePoints, this.matrix);
          this.worldSpaceNormals.rotate(this.localSpaceNormals, this.matrix);
          var min = this.worldSpacePoints.min;
          var max = this.worldSpacePoints.max;
          this.aabb.x = (min.x + max.x) * 0.5;
          this.aabb.y = (min.y + max.y) * 0.5;
          this.aabb.w = (max.x - min.x) * 0.5;
          this.aabb.h = (max.y - min.y) * 0.5;
        },

        // Poly vs poly collision detection (Minkowski Difference)

        contact: function (that) {
          var face, vertex, vertexRect, faceRect, fp, va, vb, vc, nx, ny, wsN, wdV0, wdV1, wsV0, wsV1;
          mostSeparated.set(100000, -1, -1, 0, 100000);
          mostPenetrating.set(-100000, -1, -1, 0, 100000);
          this.featurePairJudgement(that, 2);
          that.featurePairJudgement(this, 1);

          if (mostSeparated.dist > 0 && mostSeparated.fpc !== 0) {
            face = mostSeparated.edge;
            vertex = mostSeparated.closestI;
            fp = mostSeparated.fpc;
          } else if (mostPenetrating.dist <= 0) {
            face = mostPenetrating.edge;
            vertex = mostPenetrating.closestI;
            fp = mostPenetrating.fpc;
          }

          if (fp === 1) vertexRect = this, faceRect = that;
          else vertexRect = that, faceRect = this;

          wsN = faceRect.worldSpaceNormals[face];
          va = vertexRect.worldSpacePoints[(vertex - 1 + vertexRect.length) % vertexRect.length];
          vb = vertexRect.worldSpacePoints[vertex];
          vc = vertexRect.worldSpacePoints[(vertex + 1) % vertexRect.length];
          if (v0.project(vb, va, wsN) < v1.project(vc, vb, wsN)) {
            wdV0 = va;
            wdV1 = vb;
          } else {
            wdV0 = vb;
            wdV1 = vc;
          }
          wsV0 = faceRect.worldSpacePoints[face];
          wsV1 = faceRect.worldSpacePoints[(face + 1) % faceRect.length];
          if (fp === 1) {
            this.projectPointOntoEdge(wsV0, wsV1, wdV0, wdV1);
            that.projectPointOntoEdge(wdV1, wdV0, wsV0, wsV1);
            nx = -wsN.x;
            ny = -wsN.y;
          } else {
            this.projectPointOntoEdge(wdV1, wdV0, wsV0, wsV1);
            that.projectPointOntoEdge(wsV0, wsV1, wdV0, wdV1);
            nx = wsN.x;
            ny = wsN.y;
          }
          contacts.create(this, that, this.c0, that.c0, nx, ny);
          contacts.create(this, that, this.c1, that.c1, nx, ny);
        },

        featurePairJudgement: function (that, fpc) {
          var wsN, closestI, closest, dist;
          for (var edge = 0; edge < this.length; edge++) {
            wsN = this.worldSpaceNormals[edge];
            v5.rotateIntoSpaceOf(wsN, that.matrix);
            var closestI = -1,
              closestD = -100000;

            for (var i = 0; i < that.length; i++) {
              var d = v5.dot(that.localSpacePoints[i]);
              if (d > closestD) {
                closestD = d;
                closestI = i;
              }
            }

            var closest = that.worldSpacePoints[closestI];
            v0.sub(closest, this.worldSpacePoints[edge]);
            var dist = v0.dot(wsN);

            if (dist > 0) {
              v1.sub(closest, this.worldSpacePoints[(edge + 1) % this.length]);
              dist = this.projectPointOntoEdgeZero(v0, v1).lenSqr();

              if (dist < mostSeparated.dist) {
                mostSeparated.set(dist, closestI, edge, fpc);
              }
            } else {
              if (dist > mostPenetrating.dist) {
                mostPenetrating.set(dist, closestI, edge, fpc);
              }
            }
          }
        },

        projectPointOntoEdge: function (p0, p1, e0, e1) {
          var l = v2.sub(e1, e0).lenSqr() + 0.0000001;
          this.c0.addScale(e0, v2, v3.clamp(v3.sub(p0, e0).dot(v2) / l, 0, 1));
          this.c1.addScale(e0, v2, v3.clamp(v3.sub(p1, e0).dot(v2) / l, 0, 1));
        },

        projectPointOntoEdgeZero: function (e0, e1) {
          var l = v2.sub(e1, e0).lenSqr() + 0.0000001;
          return this.c0.addScale(e0, v2, v3.clamp(v3.inv(e0).dot(v2) / l, 0, 1));
        },

        // integrate

        integrate: function () {
          if (this.drag) {
            this.vel.x += (pointer.pos.x - this.matrix.pos.x);
            this.vel.y += (pointer.pos.y - this.matrix.pos.y);
          } else {
            if (this.invMass > 0) this.vel.y += kGravity;
          }

          this.matrix.integrate(this.angularVel, this.vel.x, this.vel.y, kTimeStep);

          if (!this.static) this.motionAABB();
          else {
            if (this.invMass === 0) {
              this.static = true;
              this.motionAABB();
            }
          }
        },

        // draw image

        draw: function () {
          if (this.img) {
            var m = this.matrix;
            ctx.save();
            ctx.translate(m.pos.x, m.pos.y);
            ctx.rotate(m.ang);
            ctx.drawImage(this.img, -m.w * 0.5, -m.h * 0.5, m.w, m.h);
            ctx.restore();

            if (pointer.active) {
              if (!drag && this.invMass) {
                ctx.beginPath();
                for (var j = 0; j < this.length; j++) {
                  var a = this.worldSpacePoints[j];
                  ctx.lineTo(a.x, a.y);
                }
                ctx.closePath();
                if (ctx.isPointInPath(pointer.pos.x, pointer.pos.y)) {
                  this.drag = true;
                  drag = true;
                }
              }
            } else {
              if (drag) {
                for (var i = 0; i < objects.length; i++) objects[i].drag = false;
                drag = false;
              }
            }
          }
        }
      }

      // Feature pair container

      function FeaturePair() {
        this.dist = 0;
        this.closestI = 0;
        this.edge = 0;
        this.fpc = 0;
      }

      FeaturePair.prototype.set = function (dist, closestI, edge, fpc) {
        this.dist = dist;
        this.closestI = closestI;
        this.edge = edge;
        this.fpc = fpc;
      }

      var mostSeparated = new FeaturePair();
      var mostPenetrating = new FeaturePair();

      // Contacts Constructor

      function Contact() {
        this.a = null;
        this.b = null;
        this.normal = new Vector();
        this.normalPerp = new Vector();
        this.ra = new Vector();
        this.rb = new Vector();
        this.dist = 0;
        this.impulseN = 0;
        this.impulseT = 0;
        this.invDenom = 0;
        this.invDenomTan = 0;
      }

      Contact.prototype = {

        // set new contact

        set: function (A, B, pa, pb, nx, ny) {
          var ran, rbn;
          this.a = A;
          this.b = B;
          this.normal.set(nx, ny);
          this.normalPerp.set(-ny, nx);
          this.dist = v1.sub(pb, pa).dot(this.normal);
          this.impulseN = 0;
          this.impulseT = 0;
          this.ra.sub(pa, A.matrix.pos).perp();
          this.rb.sub(pb, B.matrix.pos).perp();
          ran = this.ra.dot(this.normal);
          rbn = this.rb.dot(this.normal);
          this.invDenom = 1 / (A.invMass + B.invMass + (ran * ran * A.invI) + (rbn * rbn * B.invI));
          ran = this.ra.dot(this.normalPerp);
          rbn = this.rb.dot(this.normalPerp);
          this.invDenomTan = 1 / (A.invMass + B.invMass + (ran * ran * A.invI) + (rbn * rbn * B.invI));
        },

        applyImpulse: function (imp) {
          // linear
          this.a.vel.addScale(this.a.vel, imp, this.a.invMass);
          this.b.vel.subScale(this.b.vel, imp, this.b.invMass);

          // angular
          this.a.angularVel += imp.dot(this.ra) * this.a.invI;
          this.b.angularVel -= imp.dot(this.rb) * this.b.invI;
        },

        // solve contacts

        solve: function () {
          var newImpulse, absMag, dv = v1;

          // relative velocities
          dv.sub(
            v2.addScale(this.b.vel, this.rb, this.b.angularVel),
            v3.addScale(this.a.vel, this.ra, this.a.angularVel)
          );

          // new impulse
          newImpulse = (dv.dot(this.normal) + this.dist / kTimeStep) * this.invDenom + this.impulseN;
          if (newImpulse > 0) newImpulse = 0;
          this.applyImpulse(v2.scale(this.normal, newImpulse - this.impulseN));
          this.impulseN = newImpulse;

          // friction impulse
          absMag = Math.abs(this.impulseN) * kFriction;
          newImpulse = v2.clamp(dv.dot(this.normalPerp) * this.invDenomTan + this.impulseT, -absMag, absMag);
          this.applyImpulse(v3.scale(this.normalPerp, newImpulse - this.impulseT));
          this.impulseT = newImpulse;
        }
      }

      function render() {
        // aabb broadphase

        contacts.index = 0;
        for (var i = 0, len = objects.length; i < len - 1; i++) {
          var A = objects[i];
          for (var j = i + 1; j < len; j++) {
            var B = objects[j];
            if (A.invMass || B.invMass) {
              var a = A.aabb,
                b = B.aabb;
              if (
                Math.abs(b.x - a.x) - (a.w + b.w) < 0 &&
                Math.abs(b.y - a.y) - (a.h + b.h) < 0
              ) A.contact(B);
            }

          }
        }

        // solver

        var len = contacts.index;

        for (var j = 0; j < 5; j++) {
          for (var i = 0; i < len; i++) {
            contacts[i].solve();
          }
        }

        // integration

        for (var i = 0, len = objects.length; i < len; i++) {
          objects[i].integrate();
        }

        // draw polygons

        for (var i = 0; i < len; i++) {
          var rb = objects[i];
          rb.draw();

        }
      }

      // public interface

      return {

        render: render,

        // create new rectangle

        rectangle: function (x, y, w, h, mass, angle, img) {
          var vertices = [
            w / 2, -h / 2, -w / 2, -h / 2, -w / 2, h / 2,
            w / 2, h / 2
          ];

          var invMass = mass ? 1 / mass : 0;
          return new Polygon(x, y, w, h, vertices, invMass, angle, img);
        },

        // delete static objects

        deleteStatic: function () {
          var k = objects.length;
          while (k--) {

            var p = objects[k];
            if (!p.invMass) objects.splice(k, 1);

          }
        },

        // draw numbers

        number: function (w, h, text) {
          var img = document.createElement("canvas");
          var context = img.getContext("2d");
          img.width = w;
          img.height = h;
          context.font = "bold " + (w * 0.92) + "px arial";
          context.fillStyle = hsl;
          context.fillText(text, 0, h * 0.97);
          return img;
        },

        // delete objects

        delete: function (object) {
          for (var i = 0, len = objects.length; i < len; i++) {

            if (objects[i] === object) {
              objects.splice(i, 1);
              return;
            }

          }
        }
      }
    }(ctx, pointer, Vector, Matrix);

    /* ==== clock logic ==== */

    screen.resize();

    function n(n) {
      return n > 9 ? "" + n : "0" + n;
    }

    var hb = "",
      mb = "",
      hsl = "",
      hue = 0,
      lum = 0,
      xp = 0;
    var hour, minut, seconds = [];

    function addNumber(w, x, t, m, a) {
      var h = (w * 0.69) | 0;
      var img = PHY2D.number(w, h, t);
      return PHY2D.rectangle(x, -w, w, h, m, a, img);

    }

    function toc() {
      // what time is it ?

      var t = new Date(),
        hr = n(t.getHours()),
        mn = n(t.getMinutes()),
        sc = n(t.getSeconds()),
        w, h, img, sec;

      // hour

      if (hr != hb) {
        hue = (Math.random() * 360) | 0;
        hsl = "hsl(" + hue + ", 70%, 80%)";
        w = (screen.width / 3) | 0;
        PHY2D.delete(hour);
        hour = addNumber(w, w * 1.2, hr, 1, 0);
        hb = hr;
      }

      // minute

      if (mn != mb) {
        // new color hue
        hue = (Math.random() * 360) | 0;
        hsl = "hsl(" + hue + ", 70%, 60%)";

        // change hour color
        w = (screen.width / 3) | 0;
        h = (w * 0.69) | 0;
        img = PHY2D.number(w, h, hr);
        hour.img = img;

        // delete old minute and create new one
        w = (screen.width / 5) | 0;
        PHY2D.delete(minut);
        minut = addNumber(w, screen.width - w * 1.2, mn, 1, 0);
        mb = mn;

        // delete old seconds
        for (var i = 0; i < seconds.length; i++) {
          setTimeout(function () {
            PHY2D.delete(seconds.shift());
          }, i * 60)
        }
        xp = 0;
      }

      // seconds
      hsl = "hsl(" + hue + ",70%," + ((20 + Math.random() * 80) | 0) + "%)";
      w = (screen.width / 15) | 0;
      sec = addNumber(w, w + (xp * w) % (screen.width - (w * 2)), sc, 0.1, Math.random() * 2 * Math.PI);
      seconds.push(sec);
      xp++;
    }

    toc();
    setInterval(toc, 1000);

    /* ==== main loop ==== */

    function run() {
      requestAnimationFrame(run);
      ctx.clearRect(0, 0, screen.width, screen.height);
      PHY2D.render();

    }

    requestAnimationFrame(run);

  }();
</script>

</html>
GracieLaw
关注
水果掉落小游戏（原生js+css动画）
qq_45428582的博客
07-20 1270
摘要 水果下落小游戏，采用原生js的dom操作和css的animation，做的比较粗糙，目的是练习原生js的常用操作。游戏功能与界面均为他人设计，本demo具体代码实现由本人独立实现。 样式 demo功能： 水果随机位置下落 水果图片随机 在水果下落至底部前点击它，加 1 分 在水果下落到消失前没有点击到，扣 1 分 随时完成分数的统计 当水果被点击时产生抖动效果，随后消失 点击”开始“进入游戏，再次点击按钮，游戏结束 结束游戏时清空游戏界面，即使还有正在下落的水果 主要实现方式 页面总体布局采用
html 花瓣飘落效果,html全屏花瓣掉落特效
weixin_42503881的博客
06-03 2820
代码片段和文件信息属性大小日期时间名称---------------------------------------文件46202020-04-1916:36demo.html目录02020-04-1916:30static\目录02020-04-191...
算法题：鸡蛋掉落（leetcode 887题）
sindyra的博客
08-17 1539
题目： 鸡蛋掉落 你将获得K个鸡蛋，并可以使用一栋从1到N共有N层楼的建筑。 每个蛋的功能都是一样的，如果一个蛋碎了，你就不能再把它掉下去。 你知道存在楼层F，满足0 <= F <= N任何从高于F的楼层落下的鸡蛋都会碎，从F楼层或比它低的楼层落下的鸡蛋都不会破。 每次移动，你可以取一个鸡蛋（如果你有完整的鸡蛋）并把它从任一楼层X扔下（满...
JS实现接掉落块游戏
A4465643的博客
04-29 2054
H5接掉落块游戏
mc服务器怪物掉落修改,【服务端插件】 clear 2.3-清理插件,红石,流水岩浆,动物怪物掉落物,作物自动清理[1.6.2-1.7.2]...
weixin_29666489的博客
08-11 1391
英文名称:clear中文名称:清理来源:原创类型:|CraftBukkit插件| |Spigot插件|前置模组|插件:无下载地址:http://pan.baidu.com/s/1gdiSBFP原帖地址:http://www.mcbbs.net/thread-262183-1-1.html最后更新:2014-07-25此清理插件包括以下几个模块:TPS检测及提示包括几个级别的服务器TPS状态,状态改...
植物大战僵尸：寻找阳光掉落Call调用
CSDN
07-18 4666
实验目标：通过遍历阳光产生的时间,寻找阳光产生的本地Call,使用代码注入器注入,自定义生成阳光 阳光CALL遍历技巧： 进入植物大战僵尸-> 当出现阳光后->马上搜索未知初始数值 返回游戏-> 马上切回CE-> 搜索减少的数值 -> 掉一点搜一点 最后排查出它的掉落地址-> 锁定1即可实现无限掉落 1.首先CE打开游戏，然后进入植物大战僵尸，当出现阳光后...
植物大战僵尸(3)：寻找阳光掉落CALL
weixin_30362233的博客
07-18 1057
实验目标：通过遍历阳光产生的时间,寻找阳光产生的本地Call,使用代码注入器注入,自定义生成阳光 阳光CALL遍历技巧： 进入植物大战僵尸-> 当出现阳光后->马上搜索未知初始数值 返回游戏-> 马上切回CE-> 搜索减少的数值 -> 掉一点搜一点 最后排查出它的掉落地址-> 锁定1即可实现无限掉落 1.首先CE打开游戏，然后进入植物大...
HTML+CSS制作人物介绍网页
Kyra17的博客
05-22 7497
HTML+CSS制作人物介绍网页，仅使用HTML+CSS实现点击导航栏后，页面内部分内容切换。
HTML5粒子特效
hzp666的博客
06-09 5235
会跳舞的系统时间： http://www.html5tricks.com/html5-canvas-dance-time.html 2.3D倒计时粒子爆炸效果 http://www.html5tricks.com/html5-canvas-3d-explod-clock.html
html设置樱花飘落效果,jQuery实现web页面樱花坠落的特效
weixin_34585343的博客
06-03 4348
源码地址开发原因上课看到一位女生桌面背景是一课樱花树，顿时产生了一个让樱花可以在web页面飞舞的想法，借此把这个插件献送给那位女同学；开发过焦点图，轮转图，瀑布流等应用插件，但是这类型插件还是第一次做，那个啥兴趣使然对吧；开发工具Jquery+webstorm,无需额外配置任何环境，移动端无法使用效果演示为了更加显眼，背景换成了黑色,gif图有些卡顿，实际效果比较流畅使用方法在需要加入效果的页面加...
HTML5 Canvas雨滴掉落特效
07-24
"HTML5 Canvas雨滴掉落特效"就是利用Canvas API来模拟真实的雨滴下落过程，为用户带来沉浸式的视觉体验。 首先，我们要理解Canvas的基本概念。Canvas是一个矩形区域，在HTML文档中通过`<canvas>`标签定义。通过...
HTML5 Canvas实现很有创意的数字掉落时间显示动画特效源码.zip
11-03
这个“HTML5 Canvas实现很有创意的数字掉落时间显示动画特效源码.zip”文件很可能是包含了一个使用Canvas API创建的动态时间显示效果的示例代码。 在HTML5中，Canvas元素是一个矩形区域，可以通过JavaScript来控制...
HTML5 SVG雪花掉落动画特效
07-24
本主题聚焦于“HTML5 SVG雪花掉落动画特效”，它利用GSAP（GreenSock Animation Platform）这一强大的JavaScript库，结合SVG（Scalable Vector Graphics）矢量图形，创建出全屏透明的雪花飘落动画，为网页增添冬季的...
MOPHelp_getcz9_千年3怪物掉落物品_千年_千年3_
10-03
这样的信息对于新手玩家来说尤其有价值，他们可以借此知道哪些怪物能掉落他们需要的装备或材料，从而更有效地规划游戏时间。同时，对于老玩家来说，这样的信息也能帮助他们更快地完成某些特定的收集任务。 "MOPHelp...
JS实现文字掉落效果的方法
10-24
总体来说，JS实现文字掉落效果是网页开发中常见的一种视觉特效实现，它涉及到HTML页面结构的设置、CSS样式的配置以及JavaScript动画逻辑的编写。通过掌握这些技术，开发人员可以有效地提升网页的视觉吸引力和用户...
【前端开发入门】html快速入门
qbbmnnnnnn的博客
09-29 1076
本篇介绍html的相关内容，包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。
XHTML 简介
最新发布
wjs2024的博客
10-04 144
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
HTML的修饰(CSS) -- 第三课
ZxVSaccount的博客
10-01 919
前面我们已经了解了html的一些基本使用方法,我们再写html代码的时候不可避免的会改变其中的一些样式,而这就有一种专门的方式用来修饰html编写的网页的样式,它就是css!本节主要介绍了css 的基本用法和属性,内容较多,多多练习,熟能生巧!
关于HTML 案例_个人简历展示02
Dingyuan0的博客
09-29 1222
展示效果 用table进行布局 label 标签进行关联 例如：点姓名就可以到text中去填写内容 input的使用 text 文本框 select与option 选择框 checkbox 复选框 textarea ul与li 无序列表 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte
html实现花瓣掉落背景
12-30
以下是一个使用HTML和CSS实现花瓣掉落背景的例子： ```html <!DOCTYPE html> <html> ...然后在HTML中创建了多个`div`元素作为花瓣，并为每个花瓣添加了不同的位置和延迟时间，以实现花瓣的掉落效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值