【编程游戏】贺岁霓虹灯。（参观180楼zswang的霓虹灯）

最新推荐文章于 2010-01-14 11:09:00 发布

王集鹄

最新推荐文章于 2010-01-14 11:09:00 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：【编程游戏】贺岁霓虹灯。文章标签：编程游戏 function firefox 浏览器 html

本文链接：https://blog.youkuaiyun.com/zswang/article/details/5074983

【编程游戏】贺岁霓虹灯。专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一款使用HTML和JavaScript实现的贺岁霓虹灯效果小游戏。通过自定义霓虹灯的颜色、亮度和动画效果，实现了动态变化的霓虹灯效果。适用于Firefox浏览器，其他浏览器需保存为本地HTML文件查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【编程游戏】贺岁霓虹灯。（第一名奖励10000可用分）

效果图

[目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果] <html> <head><title>贺岁霓虹灯 -- 纵横交错 -- 作者：zswang</title></head> <style> body{overflow:hidden;background-color:Black;} </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"); } // 霓虹灯 function Neon(options) { options = options || {}; this.interval = options.interval || 200; // 变化间隔时间，单位毫秒 this.parent = options.parent || document.body; // 容器 this.rowCount = options.rowCount || 20; // 行数 this.colCount = options.rowCount || 20; // 列数 this.bulbSize = options.bulbSize || 20; // 灯泡尺寸 this.bulbShape = options.bulbShape || "★"; this.bulbHue = options.bulbHue || 240; this.snakeLength = options.snakeLength || 7; this.bulbs = {}; this.tickCount = 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({ shape: this.bulbShape, 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() { 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.rowCount; j++) { if (j % 2 == 0) continue; for (var i = 0; i < this.snakeLength; i++) { var bulb = this.bulbs[ (this.tickCount + i + j) % this.colCount + "," + j]; bulb.lightness = 100 * (i / this.snakeLength); bulb.doChange(); } } for (var i = 0; i < this.colCount; i++) { if (i % 2 == 0) continue; for (var j = 0; j < this.snakeLength; j++) { var bulb = this.bulbs[i + "," + ((this.tickCount + i + j) % this.colCount)]; bulb.lightness = 100 * (j / this.snakeLength); bulb.doChange(); } } this.tickCount++; } } // 灯泡 function Bulb(options) { options = options || {}; this.parent = options.parent || document.body; // 容器 this.shape = options.shape || "●"; // 形状 this.size = options.size || 12; // 大小 this.pos = options.pos || {}; // 位置 this.hue = options.hue || 100; // 色相 this.saturation = options.saturation || 100; // 饱和度 this.lightness = options.lightness || 50; // 亮度 this.span = document.createElement("span"); this.parent.appendChild(this.span); this.span.style.position = "absolute"; this.span.style.fontSize = this.size + "px"; this.span.style.left = this.pos.x + "px"; this.span.style.top = this.pos.y + "px"; this.span.innerHTML = this.shape; this.doChange(); } Bulb.prototype = { doChange: function() { this.span.style.color = hsl2color( {h: this.hue, s: this.saturation, l: this.lightness} ); } } new Neon().replay(); </script> </body> </html>
[目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果]