【編程遊戲】賀歲霓虹燈。(第一名獎勵10000可用分)
效果圖
評分
參觀 [目前Firefox中好使,其他瀏覽器需複製到本地,存爲html文件看效果] <html> <head><title>賀歲霓虹燈 -- 新年快樂 -- 作者:zswang</title></head> <style> body{overflow:hidden;background-color:Black;} .bulb{position:absolute;} </style> <body> <script text="text/javascript"> function hsl2color(hsl) { if (hsl.h > 360 || hsl.h < 0 || hsl.s > 100 || hsl.s < 0 || hsl.l > 100 || hsl.l < 0) return "#000000"; var rgb = {r: 0, g: 0, b: 0}; if (hsl.h <= 60) { rgb.r = 255; rgb.g = 255 / 60 * hsl.h; } else if (hsl.h <= 120) { rgb.r = 255 - (255 / 60) * (hsl.h - 60); rgb.g = 255; } else if (hsl.h <= 180) { rgb.g = 255; rgb.b = (255 / 60) * (hsl.h - 120); } else if (hsl.h <= 240) { rgb.g = 255 - (255 / 60) * (hsl.h - 180); rgb.b = 255; } else if (hsl.h <= 300) { rgb.r = (255 / 60) * (hsl.h - 240); rgb.b = 255; } else if (hsl.h <= 360) { rgb.r = 255; rgb.b = 255 - (255 / 60) * (hsl.h - 300); } var sat = Math.abs((hsl.s - 100) / 100); rgb.r = rgb.r - (rgb.r - 128) * sat; rgb.g = rgb.g - (rgb.g - 128) * sat; rgb.b = rgb.b - (rgb.b - 128) * sat; var lum = (hsl.l - 50) / 50; if (lum > 0) { rgb.r = rgb.r + (255 - rgb.r) * lum; rgb.g = rgb.g + (255 - rgb.g) * lum; rgb.b = rgb.b + (255 - rgb.b) * lum; } else if (lum < 0) { rgb.r = rgb.r + rgb.r * lum; rgb.g = rgb.g + rgb.g * lum; rgb.b = rgb.b + rgb.b * lum; } return "#" + ("00000" + (Math.floor(rgb.r) * 256 * 256 + Math.floor(rgb.g) * 256 + Math.floor(rgb.b) ).toString(16)).replace(/^.*(.{6}$)/g, "$1"); } var charDatas = [ "10080A1C7F60004022401444FFFE0A487F4808480A4829884888890828081008", // 新 "080008081FFC1100210041101FF8110011001104FFFE01000100010001000100", // 年 "10801080108010885BFC54885088908810881FFE1080114011201210140E1804", // 快 "002000F01F0010001100110021047FFE01000100092009101108210C45040200" // 樂 ]; function data2Lattice(data) { var result = []; for (var i = 0; i < 16; i++) { var line = parseInt(data.substr(i * 4, 4), 16); var points = []; for (var j = 15; j >= 0; j--) points.push((1 << j & line) != 0); result.push(points); } return result; } function MoveDictate(command) { this.directions = []; this.isBreak = command.indexOf("B") >= 0; this.isTry = command.indexOf("T") >= 0; this.isEddy = command.indexOf("D") >= 0; this.point = [0, 0]; this.max = 1e7; var match = //[(/d+),(/d+)/]/.exec(command); if (match) { this.point[0] = +match[1]; this.point[1] = +match[2]; } var regex = /[nswe]|SW|SE|NE|NW/g; while (match = regex.exec(command)) { this.directions.push({ n: 0, s: 1, w: 2, e: 3, NW: 4, NE: 5, SW: 6, SE: 7}[match[0]]); } } function MagicBox(options) { options = options || {}; this.command = options.command || ""; this.size = options.size || 16; this.moveDictates = []; this.command = this.command.replace(/R/g, this.size - 1); this.current = [0, 0]; var match = //[(/d+),(/d+)/]/.exec(this.command.replace(//{.*?/}/g, "")); if (match) { this.current[0] = +match[1]; this.current[1] = +match[2]; } var regex = //{(.*?)/}/g; while (match = regex.exec(this.command)) this.moveDictates.push(new MoveDictate(match[1])); var dictate = 0; this.paths = []; this.paths.push([this.current[0], this.current[1]]); this.numbers = {}; this.numbers[this.current] = 1; for (var i = 2; i <= this.size * this.size; i++) { var next = [this.current[0], this.current[1]]; for (var j = 0; j < this.moveDictates.length; j++) { if (this.move(this.moveDictates[dictate], next)) { if (this.moveDictates[dictate].isBreak) { if (this.moveDictates[dictate].isEddy) this.moveDictates[dictate].max = 1e7; dictate = (dictate + 1) % this.moveDictates.length; } this.current = [next[0], next[1]]; break; } else { if (this.moveDictates[dictate].isEddy) this.moveDictates[dictate].max = 1e7; dictate = (dictate + 1) % this.moveDictates.length; } } this.numbers[this.current] = i; this.paths.push([this.current[0], this.current[1]]); } } MagicBox.prototype = { offsets: [[0, -1], [0, +1], [-1, 0], [+1, 0], [-1, -1], [+1, -1], [-1, +1], [+1, +1]], // 變化參數 ↑↓←→↖↗↙↘ move: function(moveDictate, dest) { do { var isBrack = true; for (var i = 0; i < moveDictate.directions.length; i++) { if (moveDictate.isEddy && i > moveDictate.max) break; var d = moveDictate.directions[i]; var temp = moveDictate.isTry ? [moveDictate.point[0], moveDictate.point[1]] : [dest[0], dest[1]]; temp[0] += this.offsets[d][0]; temp[1] += this.offsets[d][1]; if (temp[0] < 0 || temp[0] >= this.size) continue; if (temp[1] < 0 || temp[1] >= this.size) continue; if (!this.numbers[temp]) { dest[0] = temp[0]; dest[1] = temp[1]; if (moveDictate.isEddy) moveDictate.max = i; return true; } if (moveDictate.isTry) { moveDictate.point = [temp[0], temp[1]]; isBrack = false; break; } } } while (!isBrack); return false; } } // 霓虹燈 function Neon(options) { options = options || {}; this.interval = options.interval || 100; // 變化間隔時間,單位毫秒 this.parent = options.parent || document.body; // 容器 this.bulbSize = options.bulbSize || 20; this.rowCount = 16; // 行數 this.colCount = 16; // 列數 this.bulbHue = options.bulbHue || 240; this.snakeLength = options.snakeLength || 13; this.bulbs = {}; this.tickCount = 0; this.charIndex = 0 this.lattice = data2Lattice(charDatas[this.charIndex]); this.state = 0; this.magicBoxs = [ new MagicBox({command: "{es}{wn}"}), new MagicBox({command: "{eB}{SW}{sB}{NE}"}), new MagicBox({command: "{SW}{[0,0]esBT}"}), new MagicBox({command: "{SE}{[0,0]eBT}{SE}{[0,0]sBT}"}), new MagicBox({command: "[0,R]{eB}{wnD}{nB}{seD}"}), new MagicBox({command: "{ews}"}) ]; this.magicIndex = 0; this.magicTick = 0; var h = document.body.clientHeight || document.documentElement.clientHeight; var w = document.body.clientWidth || document.documentElement.clientWidth; for (var i = 0; i < this.rowCount; i++) { for (var j = 0; j < this.colCount; j++) { var bulb = new Bulb({ size: this.bulbSize, pos: {x: i * this.bulbSize, y: j * this.bulbSize}, hue: this.bulbHue }); this.bulbs[i + "," + j] = bulb; bulb.lightness = 0; bulb.doChange(); } } } Neon.prototype = { replay: function() { var self = this; setInterval(function() { self.tick(); }, this.interval); }, tick: function() { this.clear(); if (this.tickCount % 10 == 0) { this.bulbHue = Math.random() * 360; for (var i = 0; i < this.rowCount; i++) { for (var j = 0; j < this.colCount; j++) { bulb = this.bulbs[[i, j]]; bulb.hue = this.bulbHue; } } } for (var j = 0; j < this.colCount; j++) { for (var i = 0; i < this.rowCount; i++) { if (this.tickCount + j < 16 || this.tickCount + j >= 16 + 16) continue; if (!this.lattice[i][(j + this.tickCount) % this.rowCount]) continue; var bulb = this.bulbs[[j, i]]; bulb.lightness = 40; bulb.doChange(); } } if (this.tickCount >= 32) { this.charIndex = (this.charIndex + 1) % charDatas.length; this.lattice = data2Lattice(charDatas[this.charIndex]); this.tickCount = 0; } for (var i = 0; i < this.snakeLength; i++) { var paths = this.magicBoxs[this.magicIndex].paths; var bulb = this.bulbs[paths[(i + this.magicTick * 3) % paths.length]]; bulb.lightness = 100 * (i / this.snakeLength); bulb.doChange(); } if (this.magicTick * 3 + this.snakeLength >= 256) { this.magicIndex = (this.magicIndex + 1) % this.magicBoxs.length; this.magicTick = 0; } this.tickCount++; this.magicTick++; }, clear: function() { for (var i = 0; i < this.rowCount; i++) { for (var j = 0; j < this.colCount; j++) { bulb = this.bulbs[[i, j]]; bulb.setLightness(0); } } } } // 燈泡 function Bulb(options) { options = options || {}; this.parent = options.parent || document.body; // 容器 this.pos = options.pos || {}; // 位置 this.hue = options.hue || 100; // 色相 this.size = options.size || 20; // 大小 this.saturation = options.saturation || 100; // 飽和度 this.lightness = options.lightness || 50; // 亮度 this.div = document.createElement("div"); this.div.className = "bulb"; this.div.style.top = this.pos.y + "px"; this.div.style.left = this.pos.x + "px"; this.div.style.width = this.size; this.div.style.height = this.size; this.parent.appendChild(this.div); this.doChange(); } Bulb.prototype = { doChange: function() { this.div.style.backgroundColor = hsl2color( {h: this.hue, s: this.saturation, l: this.lightness} ); }, setLightness: function (value) { if (this.lightness == value) return; this.lightness = value; this.doChange(); } } new Neon().replay(); </script> </body> </html>參觀 [目前Firefox中好使,其他瀏覽器需複製到本地,存爲html文件看效果]
前端面試題 - 說一下原型和原型鏈? JavaScript 中,萬物皆對象,對象分爲普通對象和函數對象。 所有的函數都是函數對象(typeof f === 'function'),其他都是普通對象(typeof o === 'object'
唯一索引(Unique Index):保證索引列的值是唯一的,即重複值不允許。 非唯一索引(Non-Unique Index):允許重複值存在。 組合索引(Composite Index):在表的多個列上創建索引。 反向鍵索引(Rever
IPD(集成產品開發)模型的核心價值在於它改變了企業對於產品研發的固有觀點,將企業產研的重點由“技術爲導向”升級爲“用戶需求爲導向”,強調企業在產品的研發過程中堅持以用戶/客戶爲中心。 在IPD(集成產品開發)的模式中,需要企業或者團隊在限
用於衡量算法佔用內存空間隨着數據量變大時的增長趨勢。這個概念與時 間複雜度非常類似,只需將“運行時間”替換爲“佔用內存空間”。 算法在運行過程中使用的內存空間主要包括以下幾種。 ‧ 輸入空間:用於存儲算法的輸入數據。
/** * 處理富文本里的圖片寬度自適應 * 1.去掉img標籤裏的style、width、height屬性 * 2.img標籤添加style屬性:max-width:100%;height:auto * 3.修改所有style裏的
在 Kubernetes 中,您可以通過爲容器的生命週期事件設置處理函數來執行命令。Kubernetes 支持兩種生命週期事件處理函數:postStart 和 preStop。 postStart 處理函數:在容器創建後立即執行。這個處
1.apt-get install fcitx5 fcitx5-chinese-addon fcitx5-pinyin fcitx5-pinyin-gui fcitx5-module-* 2.im-config,運行後指定fcitx5爲默認
blog-auto-publishing-tools博客自動發佈工具現在已經可以同時支持chrome和firefox了。 很多小夥伴可能對於如何進行配置和啓動不是很瞭解,今天帶給大家一個詳細的保姆教程,只需要跟着我的步驟一步來就可以無障礙啓
EOS_LOWCODE是一款由普元軟件主導的低代碼產品,緊扣模型驅動開發的理念設計,旨在讓更多用戶快速私有化的構建專業系統。 平臺採用人工智能技術和模型驅動技術,可以在顯著提升複雜應用開發效率的同時降低開發成本;採用快速渲染技術,性能相
網絡爬蟲在信息獲取、數據分析等領域發揮着重要作用,而定時爬蟲則可以實現定期獲取網站數據的功能,爲用戶提供持續更新的信息。在Python中,結合Selenium技術可以實現定時爬蟲的功能,但如何設置和優化定時爬蟲的執行時間是一個關鍵問題。本
首先怎麼安裝就不詳細說了,去火狐、chrome或edge的應用商店搜索Tampermonkey安裝即可。官網在此:https://www.tampermonkey.net 註解配置項說明 配置說明 配置項 (a-z
環境 操作系統:銀河麒麟 V10 SP1 2303 適用架構:ARM64(鯤鵬 920、飛騰 FT-2000/4、飛騰 D2000) 前言 FireFox 火狐瀏覽器是非常流行的開源瀏覽器。但是銀河麒麟倉庫裏的版本實在是更新太慢。這
最近因爲要查一些資料, 所有搞了一個代理,但是pac 只能在firefox,google 不能用,太煩人了,所以找了一些資料. 發現一個好東西,專門設置代理的:gsettings gsettings set org.gnome.sys
1. 前言 正則表達式是一種用來匹配字符串的強有力工具。設計思想是用一種描述性的語言來給字符串定義一個規則,凡是符合規則的字符串我們就認爲它“匹配”了,否則該字符串就是不合法的。 日常開發中常常會使用正則表達式,例如:對數據格式進行校
前臺js window.atob(); window.btoa(); 後臺 import java.io.UnsupportedEncodingException; import java.net.URLDecoder; import