canvas和js红色小球碰撞js特效代码

下载地址

(function () { var scr, ctx, pointer, grid, npart, ipart, pdiam, gw, gh, ax = 0, ay = 0; var obj = []; /* ==== particle constructor ==== */ var Particle = function () { this.x = Math.random() * scr.width; this.y = Math.random() * scr.height; this.vx = 0; this.vy = 0; this.dx = 0; this.dy = 0; this.w = pdiam * .5; } /* ==== move particle ==== */ Particle.prototype.move = function () { this.x += this.dx; this.y += this.dy; this.vx += this.dx; this.vy += this.dy; this.dx = 0; this.dy = 0; /* ---- draw particle ---- */ ctx.drawImage(ipart, this.x - this.w, this.y - this.w, this.w * 2, this.w * 2); } /* ==== fluid simulation ==== */ Particle.prototype.physics = function () { /* ---- mouse ---- */ if (pointer.isDown) { var dx = this.x - pointer.X; var dy = this.y - pointer.Y; var d = Math.sqrt(dx * dx + dy * dy); if (d < Math.min(scr.width, scr.height) / 2) { this.dx += dx / d * 0.5; this.dy += dy / d * 0.5; } } /* ---- gravity and acceleration ---- */ this.vx += ax; this.vy += ay; //this.vy += .1; this.x += this.vx; this.y += this.vy; /* ---- screens limits ---- */ if (this.x < pdiam * .5) this.dx += (pdiam * .5 - this.x); else if (this.x > scr.width - pdiam * .5) this.dx -= (this.x - scr.width + pdiam * .5); if (this.y < pdiam * .5) this.dy += (pdiam * .5 - this.y); else if (this.y > scr.height - pdiam * .5) this.dy -= (this.y - scr.height + pdiam * .5); /* ---- grid coordinates ---- */ var gx = Math.round(this.x / (pdiam * 4)); var gy = Math.round(this.y / (pdiam * 4)); /* ---- neightbors constraints ---- */ for (var ix = gx - 1; ix <= gx + 1; ix++) { for (var iy = gy - 1; iy <= gy + 1; iy++) { var g = grid[iy * gw + ix] || []; for (var j = 0, l = g.length; j < l; j++) { var that = g[j]; var dx = that.x - this.x; var dy = that.y - this.y; var d = Math.sqrt(dx * dx + dy * dy); if (d < pdiam) { dx = (dx / d) * (pdiam - d) * .25; dy = (dy / d) * (pdiam - d) * .25; this.dx -= dx; this.dy -= dy; that.dx += dx; that.dy += dy; } } } } /* ---- update neighbors list ---- */ if (!grid[gy * gw + gx]) grid[gy * gw + gx] = [this]; else grid[gy * gw + gx].push(this); } /* ==== main loop ==== */ var run = function () { // ---- clear screen ---- ctx.clearRect(0, 0, scr.width, scr.height); grid = new Array(gw * gh); for(var i = 0; i < npart; i++) obj[i].physics(); for(var i = 0; i < npart; i++) obj[i].move(); // ---- next frame ---- requestAnimFrame(run); } /* ==== init script ==== */ var init = function (p) { pdiam = p.particleSize; // ---- canvas ---- scr = new ge1doot.Screen({ container: "screen", resize: function () { gw = Math.round(scr.width / (pdiam * 4)); gh = Math.round(scr.height / (pdiam * 4)); } }); ctx = scr.ctx; scr.resize(); // ---- pointer ---- pointer = new ge1doot.Pointer({}); // ---- particle image ---- ipart = new Image(); ipart.src = p.particleImg; // ---- particles ---- npart = Math.round(((scr.width * scr.height) / (pdiam * pdiam)) * 0.6); for (var i = 0; i < npart; i++) { obj[i] = new Particle(); } // ---- more fun on iPad :-) ---- if (window.DeviceMotionEvent != undefined) { window.ondevicemotion = function(e) { ax = e.accelerationIncludingGravity.x * 0.1; ay = -e.accelerationIncludingGravity.y * 0.1; if (ax > 0.1) ax = 0.1; else if (ax < -0.1) ax = -0.1; if (ay > 0.1) ay = 0.1; else if (ay < -0.1) ay = -0.1; if (window.innerWidth / window.innerHeight > 1) { var t = ay; ay = ax; ax = -t; } } } else ay = 0.1; run(); } return { // ---- launch script ----- load : function (p) { window.addEventListener("load", function () { init(p); }, false); } }})().load({ particleImg: "images/piu2.png", particleSize: 62});

dd: