【编程游戏】贺岁霓虹灯。（参观366楼xiuyouxu的霓虹灯）-优快云博客

本文介绍了一款使用HTML和JavaScript实现的动态霓虹灯效果编程游戏。通过创建旋转的霓虹灯图案，展示了基本的HTML布局、JavaScript定时器及元素操作等前端技术。适用于学习前端开发技巧和创意编程。

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

效果图

评分

参观 [目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page">  <title>MyNeon</title>  </head> <body bgcolor='#000000'> <script type="text/javascript"> /** * 霓虹灯 * * @param {} * r 圆盘半径 */ Neon = function(r) { this.r = r; this.pointTexts = ['○', '●', '★', '■', '◆', '▲']; this.colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink']; this.pointWidth = 20; this.pointHeight = 20; this.blankLength = this.r / 3; this.o = [document.body.clientWidth / 2, document.body.clientHeight / 2]; this.points = []; this.theta = 2 * Math.asin(this.pointWidth / this.blankLength / 2); this.col = Math.floor((this.r - this.blankLength) / this.pointWidth); this.row = Math.floor(2 * Math.PI / this.theta); this.init(); } Neon.prototype = { init : function() { this.theta = (this.theta > 0) ? this.theta : Math.PI / 12; for (var i = 0; i <= this.row; i++) { var ps = []; for (var j = 0; j < this.col; j++) { var p = document.createElement('div'); p.style.position = 'absolute'; p.style.height = this.pointHeight+'px'; p.style.width = this.pointWidth+'px'; p.style.left = Math.floor(this.o[0] + (this.blankLength + j * this.pointWidth) * Math.cos(i * this.theta) - this.pointWidth / 2)+'px'; p.style.top = Math.floor(this.o[1] - (this.blankLength + j * this.pointHeight) * Math.sin(i * this.theta) - this.pointHeight / 2)+'px'; p.innerHTML = this.randomTextAndColor(Math.floor(Math.random() * this.colors.length), this.pointTexts[Math.floor(Math .random() * this.pointTexts.length)]); document.body.appendChild(p); ps[j] = p; } this.points[i] = ps; } }, start : function() { var self = this; var i = 0; var times = 0; var text = this.pointTexts[Math.floor(Math.random() * this.pointTexts.length)]; setInterval(function() { for (var j = 0; j < self.col; j++) { self.points[i][j].innerHTML = self.randomTextAndColor(Math .floor(Math.random() * self.colors.length), self.pointTexts[Math.floor(Math.random() * self.pointTexts.length)]); } if (i == self.row - times) { var ci = Math.floor(Math.random() * self.colors.length); for (var j = 0; j < self.col; j++) { self.points[i][j].innerHTML = self.randomTextAndColor(ci, text); } times++; if (self.row == times) { text = self.pointTexts[Math.floor(Math.random() * self.pointTexts.length)]; times = 0; } i = 0; } else { i++; } }, 5); }, randomTextAndColor : function(ci, text) { return '<span style="color:' + this.colors[ci] + ';">' + text + '</span>'; } } window.onload = function() { var neon = new Neon(400); neon.start(); } </script> </body> </html>
参观 [目前Firefox中好使，其他浏览器需复制到本地，存为html文件看效果]