canvas实现随机方块堆积布局效果代码
代码语言:html
所属分类:其他
代码描述:canvas实现随机方块堆积布局效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; background-color: #000; margin: 0; padding: 0; border-width: 0; overflow: hidden; cursor: pointer; } </style> </head> <body translate="no"> <script > "use strict"; let canv, ctx; // canvas and context let maxx, maxy; // canvas dimensions let grid; let rectangles; // for animation let messages; // shortcuts for Math. const mrandom = Math.random; const mfloor = Math.floor; const mround = Math.round; const mceil = Math.ceil; const mabs = Math.abs; const mmin = Math.min; const mmax = Math.max; const mPI = Math.PI; const mPIS2 = Math.PI / 2; const mPIS3 = Math.PI / 3; const m2PI = Math.PI * 2; const m2PIS3 = Math.PI * 2 / 3; const msin = Math.sin; const mcos = Math.cos; const matan2 = Math.atan2; const mhypot = Math.hypot; const msqrt = Math.sqrt; const rac3 = msqrt(3); const rac3s2 = rac3 / 2; //------------------------------------------------------------------------ function alea(mini, maxi) { // random number in given range if (typeof maxi == "undefined") return mini * mrandom(); // range 0..mini return mini + mrandom() * (maxi - mini); // range mini..maxi } // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function intAlea(mini, maxi) { // random integer in given range (mini..maxi - 1 or 0..mini - 1) // if (typeof maxi == "undefined") return mfloor(mini * mrandom()); // range 0..mini - 1 return mini + mfloor(mrandom() * (maxi - mini)); // range mini .. maxi - 1 } //------------------------------------------------------------------------ class Line { /* line of ordered, non overlapping segments a segment is a pair (a,b) of integers (negative integers are allowed) with a <= b next segment (a1,b1) in list must have a1 > b */ constructor() { this.segments = []; } // constructor isCompatible(seg) { // returns index for insertion before (may be 0 and this.segments.length) // returns false if overlaps an existing segment if (this.segments.length == 0) return 0; let k; for (k = 0; k < this.segments.length; ++k) { if (seg[1] < this.segments[k][0]) return k; // new seg fits before this.segments[k] if (seg[0] <= this.segments[k][1]) return false; // overlapping } // for k return k; // fits at the end; } // isCompatible insertIfCompatible(seg) { /* if insertion is possible, does it and returns index use for insertion else returns false */ let k = this.isCompatible(seg); if (k === false) return false; this.segments.splice(k, 0, seg); return k; } tellGaps(mini, maxi) { // /* creates a list of segments -if any- which could be inserted between mini and maxi */ if (this.segments.length == 0) return [[mini, maxi]]; // if completely empty const segs = []; if (this.segments[0][0] > mini) segs.push([mini, this.segments[0][0] - 1]); for (let k = 0; k < this.segments.length - 1; ++k) { if (this.segments[k][1] < this.segments[k + 1][0] - 1) segs.push([this.segments[k][1] + 1, this.segments[k + 1][0] - 1]); } if (this.segments.at(-1)[1] < maxi) segs.push([this.segments - at(-1)[1] + 1, maxi]); return segs; } // tellGaps } // class Line //------------------------------------------------------------------------ class Rectangle { constructor(kx0, ky0, grid) { // negative coordinates not allowed due to the use of Array grid - does not matter for our purrpose // initially a 1 x 1 square, but will grow later // MUST NOT be called with kx0, ky0 not compatible with grid this.kx0 = kx0; this.kx1 = kx0; this.ky0 = ky0; this.ky1 = ky0; this.hue = intAlea(360); this.sat = 30 + mround(70 * (1 - alea(1) * alea(1))); grid[this.ky0].insertIfCompatible([this.kx0, this.kx0]); this.grid = grid; this.canGrow = new Array(4).fill(true); } static isCompatible(kx0, ky0, grid) { if (kx0 < 0) return false; if (ky0 < 0) return false; if (kx0 >= grid.nbx) return false; if (ky0 >= grid.nby) return false; return grid[ky0].isCompatible([kx0, kx0]) !== false; } grow(dir) { let indices = []; switch (dir) { case 0: // up (towards 0, since y=0 is 1st line on screen) if (this.ky0 == 0) return false; if ( this.grid[this.ky0 - 1].insertIfCompatible([this.kx0, this.kx1]) === false) return false; // no insertion this.ky0--; return true; case 1: // rightward if (this.kx1 >= this.grid.nbx - 1) return false; for (let ky = this.ky0; ky <= this.ky1; ++ky) { let idx = this.grid[ky].isCompatible([this.kx1 + 1, this.kx1 + 1]); if (idx === false) return false; indices.push(idx); } // for ky // if insertion possible on all lines, grow corresponding segments for (let ky = this.ky0; ky <= this.ky1; ++ky) { let idx = indices.shift(); this.grid[ky].segments[idx - 1][1]++; } this.kx1++; return true; // success case 2: // down (towards nby) if (this.ky1 >= this.grid.nby - 1) return false; if ( this.grid[this.ky1 + 1].insertIfCompatible([this.kx0, this.kx1]) === false) return false; // no insertion this.ky1++; return true; case 3: // leftward if (this.kx0 <= 0) return false; for (let ky = this.ky0; ky <= this.ky1; ++ky) { let idx = this.grid[ky].isCompatible([this.kx0 - 1, this.kx0 - 1]); if (idx === false) return false; indices.push(idx); } // for ky // if insertion possible on all lines, grow corresponding segments for (let ky = this.ky0; ky <= this.ky1; ++ky) { let idx = indices.shift(); this.grid[ky].segments[idx][0]--; } this.kx0--; return true; // success } // switch (dir) } // grow draw(n = 0) { let radius = 15; ctx.beginPath(); const kx0 = this.kx0 + n; const ky0 = this.ky0 + n; const kx1 = this.kx1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0