六边形迷宫背景效果
代码语言:html
所属分类:背景
代码描述:六边形迷宫背景效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在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: #044; margin:0; padding:0; border-width:0; } </style> </head> <body translate="no"> <script > "use strict"; window.addEventListener("load", function () { const bgColor = '#000'; const rayHex = 10; // circumradius of hexagon let canv, ctx; // canvas and context : global variables (I know :( ) let maxx, maxy; // canvas sizes (in pixels) let nbx, nby; // number of columns / rows let grid; // for animation let events = []; let mouse = {}; let explorers; // array of alive Explorers // 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 m2PI = Math.PI * 2; const msin = Math.sin; const mcos = Math.cos; const matan2 = Math.atan2; const mtan = Math.tan; const mhypot = Math.hypot; const msqrt = Math.sqrt; const rac3 = msqrt(3); const rac3s2 = rac3 / 2; const mPIS3 = Math.PI / 3; //----------------------------------------------------------------------------- function alea(min, max) { // random number [min..max[ . If no max is provided, [0..min[ if (typeof max == 'undefined') return min * mrandom(); return min + (max - min) * mrandom(); } // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function intAlea(min, max) { // random integer number [min..max[ . If no max is provided, [0..min[ if (typeof max == 'undefined') { max = min;min = 0; } return mfloor(min + (max - min) * mrandom()); } // intAlea // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function randomOrder(n) { /* returns an array with values 0..n-1 in any order */ let ar = Array.from(new Array(n).keys()); return arrayShuffle(ar); } // randomOrder // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function arrayShuffle(array) { /* randomly changes the order of items in an array only the order is modified, not the elements */ let k1, temp; for (let k = array.length - 1; k >= 1; --k) { k1 = intAlea(0, k + 1); temp = array[k]; array[k] = array[k1]; array[k1] = temp; } // for k return array; } // arrayShuffle //------------------------------------------------------------------------ // class Hexagon let Hexagon; {// scope for Hexagon let vertices; let orgx, orgy; Hexagon = function (kx, ky) { this.kx = kx; this.ky = ky; this.neighbours = []; }; // function Hexagon // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /* static method */ Hexagon.dimensions = function () { // coordinates of center of hexagon [0][0] orgx = (maxx - rayHex * (1.5 * nbx + 0.5)) / 2 + rayHex; // obvious, no ? orgy = (maxy - rayHex * rac3 * (nby + 0.5)) / 2 + rayHex * rac3; // yet more obvious /* position of hexagon vertices, relative to its center */ vertices = [[], [], [], [], [], []]; // x coordinates, from left to right vertices[3][0] = -(rayHex + 0.5); vertices[2][0] = vertices[4][0] = -(rayHex + 0.5) / 2; vertices[1][0] = vertices[5][0] = +(rayHex + 0.5) / 2; vertices[0][0] = rayHex + 0.5; // y coordinates, from top to bottom vertices[4][1] = vertices[5][1] = -(rayHex + 0.5) * rac3s2; vertices[0][1] = vertices[3][1] = 0; vertices[1][1] = vertices[2][1] = (rayHex + 0.5) * rac3s2; }; // Hexagon.dimensions // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.prototype.size = function () { /* computes screen sizes / positions */ // centre this.xc = orgx + this.kx * 1.5 * rayHex; this.yc = orgy + this.ky * rayHex * rac3; if (this.kx & 1) this.yc -= rayHex * rac3s2; // odd columns this.vertices = [[], [], [], [], [], []]; // x coordinates of this hexagon vertices this.vertices[3][0] = this.xc + vertices[3][0]; this.vertices[2][0] = this.vertices[4][0] = this.xc + vertices[2][0]; this.vertices[1][0] = this.vertices[5][0] = this.xc + vertices[1][0];; this.vertices[0][0] = this.xc + vertices[0][0];; // y coordinates of this hexagon vertices this.vertices[4][1] = this.vertices[5][1] = this.yc + vertices[4][1]; this.vertices[0][1] = this.vertices[3][1] = this.yc + vertices[0][1]; this.vertices[1][1] = this.vertices[2][1] = this.yc + vertices[1][1]; }; // Hexagon.prototype.size // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.prototype.drawHexagon = function (hue) { if (!this.vertices) this.size(); let ctxGrid = ctx; ctxGrid.beginPath(); ctxGrid.moveTo(this.vertices[0][0], this.vertices[0][1]); ctxGrid.lineTo(this.vertices[1][0], this.vertices[1][1]); ctxGrid.lineTo(this.vertices[2][0], this.vertices[2][1]); ctxGrid.lineTo(this.vertices[3][0], this.vertices[3][1]); ctxGrid.lineTo(this.vertices[4][0], this.vertices[4][1]); ctxGrid.lineTo(this.vertices[5][0], this.vertices[5][1]); ctxGrid.lineTo(this.vertices[0][0], this.vertices[0][1]); ctxGrid.strokeStyle = '#8FF'; ctxGrid.lineWidth = 0.5; ctxGrid.fillStyle = `hsl(${hue},100%,60%)`; ctxGrid.fill(); }; // Hexagon.prototype.drawHexagon // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.prototype.drawSide = function (side) { let s2 = (side + 1) % 6; if (!this.vertices) this.size(); let ctxGrid = ctx; ctxGrid.beginPath(); ctxGrid.moveTo(this.vertices[side][0], this.vertices[side][1]); ctxGrid.lineTo(this.vertices[s2][0], this.vertices[s2][1]); ctxGrid.strokeStyle = '#8FF'; ctxGrid.lineWidth = 0.5; // ctxGrid.fillStyle = `hsl(${hue},100%,60%)`; ctxGrid.stroke(); }; // Hexagon.prototype.drawSide // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /* returns a cell's neighbour keep track of it for future request defines itself as its neighbour's neighbour to reduce calculations returns false if no neighbour */ Hexagon.prototype.neighbour = function (side) { let neigh = this.neighbours[side]; if (neigh instanceof Hexagon) return neigh; // known neighbour if (neigh === false) return false; // known for no neighbour // do not know yet if (this.kx & 1) { neigh = { kx: this.kx + [1, 0, -1, -1, 0, 1][side], ky: this.ky + [0, 1, 0, -1, -1, -1][side] }; } else { neigh = { kx: this.kx + [1, 0, -1, -1, 0, 1][side], ky: this.ky + [1, 1, 1, 0, -1, 0][side] }; } if (neigh.kx < 0 || neigh.ky < 0 || neigh.kx >= nbx || neigh.ky >= nby) { this.neighbours[side] = false; return false; } neigh = grid[neigh.ky][neigh.kx]; this.neighbours[side] = neigh; neigh.neighbours[(side + 3) % 6] = this; return neigh; }; // Hexagon.prototype.neighbour // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Hexagon.whichHexagon = function (x, y) {// static method /* needs optimization !!! */ /* finds in which hexagon is the point of coordinates (x, y) returns false (if none) or hexagon */ let xv, yv, neigh; let kx, ky; // find column approximately kx = mround((x - orgx) / 1.5 / rayHex); // if this was the right column, the line would be... ky = mround((y - orgy) / rayHex / rac3 + (kx & 1) * 0.5); // kx, ky may be out of the grid even if the point is inside let xc = orgx + kx * 1.5 * rayHex; let yc = orgy + ky * rayHex * rac3; if (kx & 1) yc -= rayHex * rac3s2; let dir = matan2(y - yc, x - xc); // -PI to PI if (dir < 0) dir += m2PI; // 0 to 2 PI dir = mfloor(3 * dir / mPI) % 6; // 0 to 5 // change for neighbour hexagon switch (dir) { case 0:xv = 1.5 * rayHex; yv = rac3s2 * rayHex; break; case 1:xv = 0; yv = rac3 * rayHex; break; case 2:xv = -1.5 * rayHex; yv = rac3s2 * rayHex; break; case 3:xv = -1.5 * rayHex; yv = -rac3s2 * rayHex; break; case 4:xv = 0; yv = -rac3 * rayHex; break; case 5:xv = 1.5 * rayHex; yv = -rac3s2 * rayHex; break;} let da = mhypot(x - xc, y - yc); let db = mhypot(x - xv - xc, y - yv - yc); if (db < da) {// change for neighbour hexagon if (kx & 1) { neigh = { kx: kx + [1, 0, -1, -1, 0, 1][dir], ky: ky + [0, 1, 0, -1, -1, -1][dir] }; } else { neigh = { kx: kx + [1, 0, -1, -1, 0, 1][dir], ky: ky + [1, 1, 1, 0, -1, 0][dir] }; } ({ kx, ky } = neigh); } if (kx < 0 || ky < 0 || kx >= nbx || ky >= nby) return .........完整代码请登录后点击上方下载按钮下载查看
网友评论0