【编程游戏】贺岁霓虹灯。(第一名奖励10000可用分) 效果图 评分 参观 [目前Firefox中好使,其他浏览器需复制到本地,存为html文件看效果] <html> <head> <title>星空</title> <style type="text/css"> body { font-family: "宋体"; overflow: hidden; } </style> </head> <body bgcolor="#000000"> <script type="text/javascript"> var star = function() { this.colours = ['#ff0000', '#00ff00', '#3366ff', '#ff00ff', '#ffa500', '#ffffff', '#fff000', '#ff00ff', '#00ff00', '#3366ff']; this.Amount = 200; this.Ypos = new Array(); this.Xpos = new Array(); this.Zpos = new Array(); this.ScrXpos = new Array(); this.ScrYpos = new Array(); this.Speed = new Array(); this.WinHeight = document.body.clientHeight; this.WinWidth = document.body.clientWidth; this.hscrll = document.body.scrollTop; /*********************华丽的分割线*************************/ this.yourLogo = "曾经,有一份爱情摆在我面前,我没好好珍惜,如果上天再给我一次机会,我会大声说:“快还钱”!"; this.logoColor = "#00ff00"; this.yourLogo = this.yourLogo.split(''); this.L = this.yourLogo.length; this.TrigSplit = 360 / this.L; this.Sz = new Array() this.logoWidth = 150; this.logoHeight = -30; this.fontypos = this.WinHeight / 1.6; this.fontxpos = this.WinWidth / 2; this.fontstep = 0.02; this.fontcurrStep = 0; } star.prototype = { init: function() { var box = document.createElement("div"); box.style.position = 'absolute'; box.style.top = '0px'; box.style.left = '0px'; document.body.appendChild(box); var fontbox = document.createElement('div'); fontbox.id = 'outer'; fontbox.style.position = 'absolute'; fontbox.style.top = '0px'; fontbox.style.left = '0px'; document.body.appendChild(fontbox); var m = this; m.each(m.L, function(i) { var item = document.createElement("div"); item.id = 'f' + i; item.style.position = 'absolute'; item.style.color = m.logoColor; item.innerHTML = m.yourLogo[i]; fontbox.appendChild(item); }) m.each(m.Amount, function(i) { var item = document.createElement("div"); item.id = 'si' + i; item.style.position = 'absolute'; item.style.color = m.colours[Math.floor(Math.round((i + 1) * (m.colours.length - 1) / m.Amount))]; item.style.fontSize = '12px'; item.innerHTML = '.'; box.appendChild(item); }); m.load(); m.fly(); m.animateLogo(); }, load: function() { var m = this; m.each(m.Amount, function(i) { m.offset(i); }); }, each: function(len, fun) { for (i = 0; i < len; i++) { fun(i); } }, offset: function(i) { this.Speed[i] = (i + 1) * 6 / this.Amount + 4; this.Xpos[i] = (Math.random() * this.WinWidth - this.WinWidth / 2) * (this.Amount - i / 3) / this.Amount; this.Ypos[i] = (Math.random() * this.WinHeight - this.WinHeight / 2) * (this.Amount - i / 3) / this.Amount; this.Zpos[i] = Math.random() * 900 * (this.Amount - i / 3) / this.Amount + 100; }, animateLogo: function() { var m = this; m.each(m.L, function(i) { var obj = document.getElementById('f' + i); obj.style.top = m.fontypos + m.logoHeight * Math.sin(m.fontcurrStep + i * m.TrigSplit * Math.PI / 180) + "px"; obj.style.left = m.fontxpos + m.logoWidth * Math.cos(m.fontcurrStep + i * m.TrigSplit * Math.PI / 180) + "px"; m.Sz[i] = 20 - Math.sin(m.fontcurrStep + i * m.TrigSplit * Math.PI / 180) * 20; m.Sz[i] = Math.max(5, m.Sz[i]); obj.style.fontSize = m.Sz[i] / 1.7 + "px"; }); m.fontcurrStep -= m.fontstep; setTimeout(function() { m.animateLogo(); }, 20); }, fly: function() { var m = this; m.each(m.Amount, function(i) { m.Zpos[i] -= m.Speed[i]; if (m.ScrXpos[i] > m.WinWidth || m.ScrXpos[i] < 0 || m.ScrYpos[i] > m.WinHeight || m.ScrYpos[i] < 0 || m.Zpos[i] <= 0) { m.offset(i); } m.ScrXpos[i] = m.Xpos[i] / m.Zpos[i] * 100 + m.WinWidth / 2; m.ScrYpos[i] = m.Ypos[i] / m.Zpos[i] * 100 + m.WinHeight / 2; var obj = document.getElementById('si' + i); obj.style.left = m.ScrXpos[i]; obj.style.top = m.ScrYpos[i] + m.hscrll; }) setTimeout(function() { m.fly(); }, 20); } } new star().init(); </script> </body> </html> 参观 [目前Firefox中好使,其他浏览器需复制到本地,存为html文件看效果]