Maison
interface Web
js tutoriel
JQuery et HTML+CSS implémentent le clic de souris pour déclencher des feux d'artifice
interface Web
js tutoriel
JQuery et HTML+CSS implémentent le clic de souris pour déclencher des feux d'artifice
JQuery et HTML+CSS implémentent le clic de souris pour déclencher des feux d'artifice
Jun 20, 2017 am 09:36 AM
css
html+css
jquery
实现
点击
鼠标
<span style="color: #008080"> 1</span> <!DOCTYPE html>
<span style="color: #008080"> 2</span> <html>
<span style="color: #008080"> 3</span> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<span style="color: #008080"> 4</span> <title>HTML5烟花燃放特效代码</title>
<span style="color: #008080"> 5</span>
<span style="color: #008080"> 6</span> <style>
<span style="color: #008080"> 7</span> html,body{height:100%;margin:0;padding:0<span style="color: #000000">}
</span><span style="color: #008080"> 8</span> ul,li{text-indent:0;text-decoration:none;margin:0;padding:0<span style="color: #000000">}
</span><span style="color: #008080"> 9</span> img{border:0<span style="color: #000000">}
</span><span style="color: #008080"> 10</span> body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
<span style="color: #008080"> 11</span> canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20<span style="color: #000000">}
</span><span style="color: #008080"> 12</span> *<span style="color: #000000">{
</span><span style="color: #008080"> 13</span> <span style="color: #000000"> margin: 0px;
</span><span style="color: #008080"> 14</span> <span style="color: #000000"> padding: 0px;
</span><span style="color: #008080"> 15</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 16</span> <span style="color: #000000"> #bg_Img{
</span><span style="color: #008080"> 17</span> <span style="color: #000000"> width: 1920px;
</span><span style="color: #008080"> 18</span> <span style="color: #000000"> height: 1500px;
</span><span style="color: #008080"> 19</span> <span style="color: #000000"> border: 1px solid transparent;
</span><span style="color: #008080"> 20</span> background: url("start.gif"<span style="color: #000000">) repeat;
</span><span style="color: #008080"> 21</span> text-<span style="color: #000000">align: center;
</span><span style="color: #008080"> 22</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 23</span> <span style="color: #000000"> ul{
</span><span style="color: #008080"> 24</span> <span style="color: #000000"> width: 5555px;
</span><span style="color: #008080"> 25</span> <span style="color: #000000"> height: 200px;
</span><span style="color: #008080"> 26</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 27</span> <span style="color: #000000"> li{
</span><span style="color: #008080"> 28</span> font: 120px/190px "楷体";
<span style="color: #008080"> 29</span> <span style="color: #000000"> color: white;
</span><span style="color: #008080"> 30</span> text-<span style="color: #000000">shadow: 5px 10px 10px 10px;
</span><span style="color: #008080"> 31</span> list-<span style="color: #000000">style: none;
</span><span style="color: #008080"> 32</span> <span style="color: #0000ff">float</span><span style="color: #000000">: left;
</span><span style="color: #008080"> 33</span> <span style="color: #000000"> display: none;
</span><span style="color: #008080"> 34</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 35</span> <span style="color: #000000"> #text_bd{
</span><span style="color: #008080"> 36</span> <span style="color: #000000"> width: 600px;
</span><span style="color: #008080"> 37</span> <span style="color: #000000"> height: 200px;
</span><span style="color: #008080"> 38</span> <span style="color: #000000"> border: 5px solid transparent;
</span><span style="color: #008080"> 39</span> margin-<span style="color: #000000">left: 200px;
</span><span style="color: #008080"> 40</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 41</span> <span style="color: #000000"> #mouse_click{
</span><span style="color: #008080"> 42</span> <span style="color: #000000"> margin: 0px auto;
</span><span style="color: #008080"> 43</span> text-<span style="color: #000000">align: center;
</span><span style="color: #008080"> 44</span> <span style="color: #000000"> color: white;
</span><span style="color: #008080"> 45</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 46</span> </style>
<span style="color: #008080"> 47</span>
<span style="color: #008080"> 48</span> </head>
<span style="color: #008080"> 49</span> <body>
<span style="color: #008080"> 50</span> <div id="bg_Img">
<span style="color: #008080"> 51</span> <div id="text_bd">
<span style="color: #008080"> 52</span> <ul>
<span style="color: #008080"> 53</span> <li>O(∩_∩)O~~</li>
<span style="color: #008080"> 54</span> <li>同</li>
<span style="color: #008080"> 55</span> <li>学</li>
<span style="color: #008080"> 56</span> <li>们</li>
<span style="color: #008080"> 57</span> <li>节</li>
<span style="color: #008080"> 58</span> <li>日</li>
<span style="color: #008080"> 59</span> <li>快</li>
<span style="color: #008080"> 60</span> <li>乐</li>
<span style="color: #008080"> 61</span> <li>~~</li>
<span style="color: #008080"> 62</span> </ul>
<span style="color: #008080"> 63</span> </div>
<span style="color: #008080"> 64</span> <div id="mouse_click">鼠标点击释放烟花效果</div>
<span style="color: #008080"> 65</span> </div>
<span style="color: #008080"> 66</span> <script type="text/javascript" src="jquery-3.1.1.js"></script>
<span style="color: #008080"> 67</span> <script type="text/javascript">
<span style="color: #008080"> 68</span> <span style="color: #0000ff">var</span> aLi=document.querySelectorAll("li"<span style="color: #000000">);
</span><span style="color: #008080"> 69</span> setInterval(a,1000<span style="color: #000000">);
</span><span style="color: #008080"> 70</span> setInterval(b,2000<span style="color: #000000">);
</span><span style="color: #008080"> 71</span> setInterval(c,3000<span style="color: #000000">);
</span><span style="color: #008080"> 72</span> setInterval(d,4000<span style="color: #000000">);
</span><span style="color: #008080"> 73</span> setInterval(e,5000<span style="color: #000000">);
</span><span style="color: #008080"> 74</span> setInterval(f,6000<span style="color: #000000">);
</span><span style="color: #008080"> 75</span> setInterval(g,7000<span style="color: #000000">);
</span><span style="color: #008080"> 76</span> setInterval(h,8000<span style="color: #000000">);
</span><span style="color: #008080"> 77</span> <span style="color: #0000ff">function</span><span style="color: #000000"> a() {
</span><span style="color: #008080"> 78</span> aLi[0].style.display = "block"
<span style="color: #008080"> 79</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 80</span> <span style="color: #0000ff">function</span><span style="color: #000000"> b() {
</span><span style="color: #008080"> 81</span> aLi[1].style.display = "block"
<span style="color: #008080"> 82</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 83</span> <span style="color: #0000ff">function</span><span style="color: #000000"> c() {
</span><span style="color: #008080"> 84</span> aLi[2].style.display = "block"
<span style="color: #008080"> 85</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 86</span> <span style="color: #0000ff">function</span><span style="color: #000000"> d() {
</span><span style="color: #008080"> 87</span> aLi[3].style.display = "block"
<span style="color: #008080"> 88</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 89</span> <span style="color: #0000ff">function</span><span style="color: #000000"> e() {
</span><span style="color: #008080"> 90</span> aLi[4].style.display = "block"
<span style="color: #008080"> 91</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 92</span> <span style="color: #0000ff">function</span><span style="color: #000000"> f() {
</span><span style="color: #008080"> 93</span> aLi[5].style.display = "block"
<span style="color: #008080"> 94</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 95</span> <span style="color: #0000ff">function</span><span style="color: #000000"> g() {
</span><span style="color: #008080"> 96</span> aLi[6].style.display = "block"
<span style="color: #008080"> 97</span> <span style="color: #000000"> }
</span><span style="color: #008080"> 98</span> <span style="color: #0000ff">function</span><span style="color: #000000"> h() {
</span><span style="color: #008080"> 99</span> aLi[7].style.display = "block"
<span style="color: #008080">100</span> <span style="color: #000000"> }
</span><span style="color: #008080">101</span> $(<span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">102</span> <span style="color: #0000ff">var</span> Fireworks = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">103</span> <span style="color: #0000ff">var</span> self = <span style="color: #0000ff">this</span><span style="color: #000000">;
</span><span style="color: #008080">104</span> <span style="color: #0000ff">var</span> rand = <span style="color: #0000ff">function</span>(rMi, rMa){<span style="color: #0000ff">return</span> ~~((Math.random()*(rMa-rMi+1))+<span style="color: #000000">rMi);}
</span><span style="color: #008080">105</span> <span style="color: #0000ff">var</span> hitTest = <span style="color: #0000ff">function</span>(x1, y1, w1, h1, x2, y2, w2, h2){<span style="color: #0000ff">return</span> !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 <<span style="color: #000000"> y1);};
</span><span style="color: #008080">106</span> window.requestAnimFrame=<span style="color: #0000ff">function</span>(){<span style="color: #0000ff">return</span> window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||<span style="color: #0000ff">function</span>(a){window.setTimeout(a,1E3/60)}}();
<span style="color: #008080">107</span>
<span style="color: #008080">108</span> self.init = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">109</span> self.canvas = document.createElement('canvas'<span style="color: #000000">);
</span><span style="color: #008080">110</span> self.canvas.width = self.cw =<span style="color: #000000"> $(window).innerWidth();
</span><span style="color: #008080">111</span> self.canvas.height = self.ch =<span style="color: #000000"> $(window).innerHeight();
</span><span style="color: #008080">112</span> self.particles =<span style="color: #000000"> [];
</span><span style="color: #008080">113</span> self.partCount = 150<span style="color: #000000">;
</span><span style="color: #008080">114</span> self.fireworks =<span style="color: #000000"> [];
</span><span style="color: #008080">115</span> self.mx = self.cw/2;
<span style="color: #008080">116</span> self.my = self.ch/2;
<span style="color: #008080">117</span> self.currentHue = 30<span style="color: #000000">;
</span><span style="color: #008080">118</span> self.partSpeed = 5<span style="color: #000000">;
</span><span style="color: #008080">119</span> self.partSpeedVariance = 10<span style="color: #000000">;
</span><span style="color: #008080">120</span> self.partWind = 50<span style="color: #000000">;
</span><span style="color: #008080">121</span> self.partFriction = 5<span style="color: #000000">;
</span><span style="color: #008080">122</span> self.partGravity = 1<span style="color: #000000">;
</span><span style="color: #008080">123</span> self.hueMin = 0<span style="color: #000000">;
</span><span style="color: #008080">124</span> self.hueMax = 360<span style="color: #000000">;
</span><span style="color: #008080">125</span> self.fworkSpeed = 4<span style="color: #000000">;
</span><span style="color: #008080">126</span> self.fworkAccel = 10<span style="color: #000000">;
</span><span style="color: #008080">127</span> self.hueVariance = 30<span style="color: #000000">;
</span><span style="color: #008080">128</span> self.flickerDensity = 25<span style="color: #000000">;
</span><span style="color: #008080">129</span> self.showShockwave = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008080">130</span> self.showTarget = <span style="color: #0000ff">false</span><span style="color: #000000">;
</span><span style="color: #008080">131</span> self.clearAlpha = 25<span style="color: #000000">;
</span><span style="color: #008080">132</span>
<span style="color: #008080">133</span> <span style="color: #000000"> $(document.body).append(self.canvas);
</span><span style="color: #008080">134</span> self.ctx = self.canvas.getContext('2d'<span style="color: #000000">);
</span><span style="color: #008080">135</span> self.ctx.lineCap = 'round'<span style="color: #000000">;
</span><span style="color: #008080">136</span> self.ctx.lineJoin = 'round'<span style="color: #000000">;
</span><span style="color: #008080">137</span> self.lineWidth = 1<span style="color: #000000">;
</span><span style="color: #008080">138</span> <span style="color: #000000"> self.bindEvents();
</span><span style="color: #008080">139</span> <span style="color: #000000"> self.canvasLoop();
</span><span style="color: #008080">140</span>
<span style="color: #008080">141</span> self.canvas.onselectstart = <span style="color: #0000ff">function</span><span style="color: #000000">() {
</span><span style="color: #008080">142</span> <span style="color: #0000ff">return</span> <span style="color: #0000ff">false</span><span style="color: #000000">;
</span><span style="color: #008080">143</span> <span style="color: #000000"> };
</span><span style="color: #008080">144</span> <span style="color: #000000"> };
</span><span style="color: #008080">145</span>
<span style="color: #008080">146</span> self.createParticles = <span style="color: #0000ff">function</span><span style="color: #000000">(x,y, hue){
</span><span style="color: #008080">147</span> <span style="color: #0000ff">var</span> countdown =<span style="color: #000000"> self.partCount;
</span><span style="color: #008080">148</span> <span style="color: #0000ff">while</span>(countdown--<span style="color: #000000">){
</span><span style="color: #008080">149</span> <span style="color: #0000ff">var</span> newParticle =<span style="color: #000000"> {
</span><span style="color: #008080">150</span> <span style="color: #000000"> x: x,
</span><span style="color: #008080">151</span> <span style="color: #000000"> y: y,
</span><span style="color: #008080">152</span> <span style="color: #000000"> coordLast: [
</span><span style="color: #008080">153</span> <span style="color: #000000"> {x: x, y: y},
</span><span style="color: #008080">154</span> <span style="color: #000000"> {x: x, y: y},
</span><span style="color: #008080">155</span> <span style="color: #000000"> {x: x, y: y}
</span><span style="color: #008080">156</span> <span style="color: #000000"> ],
</span><span style="color: #008080">157</span> angle: rand(0, 360<span style="color: #000000">),
</span><span style="color: #008080">158</span> speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed +<span style="color: #000000"> self.partSpeedVariance)),
</span><span style="color: #008080">159</span> friction: 1 - self.partFriction/100,
<span style="color: #008080">160</span> gravity: self.partGravity/2,
<span style="color: #008080">161</span> hue: rand(hue-self.hueVariance, hue+<span style="color: #000000">self.hueVariance),
</span><span style="color: #008080">162</span> brightness: rand(50, 80<span style="color: #000000">),
</span><span style="color: #008080">163</span> alpha: rand(40,100)/100,
<span style="color: #008080">164</span> decay: rand(10, 50)/1000,
<span style="color: #008080">165</span> wind: (rand(0, self.partWind) - (self.partWind/2))/25<span style="color: #000000">,
</span><span style="color: #008080">166</span> <span style="color: #000000"> lineWidth: self.lineWidth
</span><span style="color: #008080">167</span> <span style="color: #000000"> };
</span><span style="color: #008080">168</span> <span style="color: #000000"> self.particles.push(newParticle);
</span><span style="color: #008080">169</span> <span style="color: #000000"> }
</span><span style="color: #008080">170</span> <span style="color: #000000"> };
</span><span style="color: #008080">171</span>
<span style="color: #008080">172</span>
<span style="color: #008080">173</span> self.updateParticles = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">174</span> <span style="color: #0000ff">var</span> i =<span style="color: #000000"> self.particles.length;
</span><span style="color: #008080">175</span> <span style="color: #0000ff">while</span>(i--<span style="color: #000000">){
</span><span style="color: #008080">176</span> <span style="color: #0000ff">var</span> p =<span style="color: #000000"> self.particles[i];
</span><span style="color: #008080">177</span> <span style="color: #0000ff">var</span> radians = p.angle * Math.PI / 180<span style="color: #000000">;
</span><span style="color: #008080">178</span> <span style="color: #0000ff">var</span> vx = Math.cos(radians) *<span style="color: #000000"> p.speed;
</span><span style="color: #008080">179</span> <span style="color: #0000ff">var</span> vy = Math.sin(radians) *<span style="color: #000000"> p.speed;
</span><span style="color: #008080">180</span> p.speed *=<span style="color: #000000"> p.friction;
</span><span style="color: #008080">181</span>
<span style="color: #008080">182</span> p.coordLast[2].x = p.coordLast[1<span style="color: #000000">].x;
</span><span style="color: #008080">183</span> p.coordLast[2].y = p.coordLast[1<span style="color: #000000">].y;
</span><span style="color: #008080">184</span> p.coordLast[1].x = p.coordLast[0<span style="color: #000000">].x;
</span><span style="color: #008080">185</span> p.coordLast[1].y = p.coordLast[0<span style="color: #000000">].y;
</span><span style="color: #008080">186</span> p.coordLast[0].x =<span style="color: #000000"> p.x;
</span><span style="color: #008080">187</span> p.coordLast[0].y =<span style="color: #000000"> p.y;
</span><span style="color: #008080">188</span>
<span style="color: #008080">189</span> p.x +=<span style="color: #000000"> vx;
</span><span style="color: #008080">190</span> p.y +=<span style="color: #000000"> vy;
</span><span style="color: #008080">191</span> p.y +=<span style="color: #000000"> p.gravity;
</span><span style="color: #008080">192</span>
<span style="color: #008080">193</span> p.angle +=<span style="color: #000000"> p.wind;
</span><span style="color: #008080">194</span> p.alpha -=<span style="color: #000000"> p.decay;
</span><span style="color: #008080">195</span>
<span style="color: #008080">196</span> <span style="color: #0000ff">if</span>(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p.alpha < .05<span style="color: #000000">){
</span><span style="color: #008080">197</span> self.particles.splice(i, 1<span style="color: #000000">);
</span><span style="color: #008080">198</span> <span style="color: #000000"> }
</span><span style="color: #008080">199</span> <span style="color: #000000"> };
</span><span style="color: #008080">200</span> <span style="color: #000000"> };
</span><span style="color: #008080">201</span>
<span style="color: #008080">202</span> self.drawParticles = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">203</span> <span style="color: #0000ff">var</span> i =<span style="color: #000000"> self.particles.length;
</span><span style="color: #008080">204</span> <span style="color: #0000ff">while</span>(i--<span style="color: #000000">){
</span><span style="color: #008080">205</span> <span style="color: #0000ff">var</span> p =<span style="color: #000000"> self.particles[i];
</span><span style="color: #008080">206</span>
<span style="color: #008080">207</span> <span style="color: #0000ff">var</span> coordRand = (rand(1,3)-1<span style="color: #000000">);
</span><span style="color: #008080">208</span> <span style="color: #000000"> self.ctx.beginPath();
</span><span style="color: #008080">209</span> <span style="color: #000000"> self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));
</span><span style="color: #008080">210</span> <span style="color: #000000"> self.ctx.lineTo(Math.round(p.x), Math.round(p.y));
</span><span style="color: #008080">211</span> <span style="color: #000000"> self.ctx.closePath();
</span><span style="color: #008080">212</span> self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')'<span style="color: #000000">;
</span><span style="color: #008080">213</span> <span style="color: #000000"> self.ctx.stroke();
</span><span style="color: #008080">214</span>
<span style="color: #008080">215</span> <span style="color: #0000ff">if</span>(self.flickerDensity > 0<span style="color: #000000">){
</span><span style="color: #008080">216</span> <span style="color: #0000ff">var</span> inverseDensity = 50 -<span style="color: #000000"> self.flickerDensity;
</span><span style="color: #008080">217</span> <span style="color: #0000ff">if</span>(rand(0, inverseDensity) ===<span style="color: #000000"> inverseDensity){
</span><span style="color: #008080">218</span> <span style="color: #000000"> self.ctx.beginPath();
</span><span style="color: #008080">219</span> self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false)
<span style="color: #008080">220</span> <span style="color: #000000"> self.ctx.closePath();
</span><span style="color: #008080">221</span> <span style="color: #0000ff">var</span> randAlpha = rand(50,100)/100;
<span style="color: #008080">222</span> self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')'<span style="color: #000000">;
</span><span style="color: #008080">223</span> <span style="color: #000000"> self.ctx.fill();
</span><span style="color: #008080">224</span> <span style="color: #000000"> }
</span><span style="color: #008080">225</span> <span style="color: #000000"> }
</span><span style="color: #008080">226</span> <span style="color: #000000"> };
</span><span style="color: #008080">227</span> <span style="color: #000000"> };
</span><span style="color: #008080">228</span>
<span style="color: #008080">229</span>
<span style="color: #008080">230</span> self.createFireworks = <span style="color: #0000ff">function</span><span style="color: #000000">(startX, startY, targetX, targetY){
</span><span style="color: #008080">231</span> <span style="color: #0000ff">var</span> newFirework =<span style="color: #000000"> {
</span><span style="color: #008080">232</span> <span style="color: #000000"> x: startX,
</span><span style="color: #008080">233</span> <span style="color: #000000"> y: startY,
</span><span style="color: #008080">234</span> <span style="color: #000000"> startX: startX,
</span><span style="color: #008080">235</span> <span style="color: #000000"> startY: startY,
</span><span style="color: #008080">236</span> hitX: <span style="color: #0000ff">false</span><span style="color: #000000">,
</span><span style="color: #008080">237</span> hitY: <span style="color: #0000ff">false</span><span style="color: #000000">,
</span><span style="color: #008080">238</span> <span style="color: #000000"> coordLast: [
</span><span style="color: #008080">239</span> <span style="color: #000000"> {x: startX, y: startY},
</span><span style="color: #008080">240</span> <span style="color: #000000"> {x: startX, y: startY},
</span><span style="color: #008080">241</span> <span style="color: #000000"> {x: startX, y: startY}
</span><span style="color: #008080">242</span> <span style="color: #000000"> ],
</span><span style="color: #008080">243</span> <span style="color: #000000"> targetX: targetX,
</span><span style="color: #008080">244</span> <span style="color: #000000"> targetY: targetY,
</span><span style="color: #008080">245</span> <span style="color: #000000"> speed: self.fworkSpeed,
</span><span style="color: #008080">246</span> angle: Math.atan2(targetY - startY, targetX -<span style="color: #000000"> startX),
</span><span style="color: #008080">247</span> shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),
<span style="color: #008080">248</span> acceleration: self.fworkAccel/100,
<span style="color: #008080">249</span> <span style="color: #000000"> hue: self.currentHue,
</span><span style="color: #008080">250</span> brightness: rand(50, 80<span style="color: #000000">),
</span><span style="color: #008080">251</span> alpha: rand(50,100)/100,
<span style="color: #008080">252</span> <span style="color: #000000"> lineWidth: self.lineWidth
</span><span style="color: #008080">253</span> <span style="color: #000000"> };
</span><span style="color: #008080">254</span> <span style="color: #000000"> self.fireworks.push(newFirework);
</span><span style="color: #008080">255</span>
<span style="color: #008080">256</span> <span style="color: #000000"> };
</span><span style="color: #008080">257</span>
<span style="color: #008080">258</span>
<span style="color: #008080">259</span> self.updateFireworks = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">260</span> <span style="color: #0000ff">var</span> i =<span style="color: #000000"> self.fireworks.length;
</span><span style="color: #008080">261</span>
<span style="color: #008080">262</span> <span style="color: #0000ff">while</span>(i--<span style="color: #000000">){
</span><span style="color: #008080">263</span> <span style="color: #0000ff">var</span> f =<span style="color: #000000"> self.fireworks[i];
</span><span style="color: #008080">264</span> self.ctx.lineWidth =<span style="color: #000000"> f.lineWidth;
</span><span style="color: #008080">265</span>
<span style="color: #008080">266</span> vx = Math.cos(f.angle) *<span style="color: #000000"> f.speed,
</span><span style="color: #008080">267</span> vy = Math.sin(f.angle) *<span style="color: #000000"> f.speed;
</span><span style="color: #008080">268</span> f.speed *= 1 +<span style="color: #000000"> f.acceleration;
</span><span style="color: #008080">269</span> f.coordLast[2].x = f.coordLast[1<span style="color: #000000">].x;
</span><span style="color: #008080">270</span> f.coordLast[2].y = f.coordLast[1<span style="color: #000000">].y;
</span><span style="color: #008080">271</span> f.coordLast[1].x = f.coordLast[0<span style="color: #000000">].x;
</span><span style="color: #008080">272</span> f.coordLast[1].y = f.coordLast[0<span style="color: #000000">].y;
</span><span style="color: #008080">273</span> f.coordLast[0].x =<span style="color: #000000"> f.x;
</span><span style="color: #008080">274</span> f.coordLast[0].y =<span style="color: #000000"> f.y;
</span><span style="color: #008080">275</span>
<span style="color: #008080">276</span> <span style="color: #0000ff">if</span>(f.startX >=<span style="color: #000000"> f.targetX){
</span><span style="color: #008080">277</span> <span style="color: #0000ff">if</span>(f.x + vx <=<span style="color: #000000"> f.targetX){
</span><span style="color: #008080">278</span> f.x =<span style="color: #000000"> f.targetX;
</span><span style="color: #008080">279</span> f.hitX = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008080">280</span> } <span style="color: #0000ff">else</span><span style="color: #000000"> {
</span><span style="color: #008080">281</span> f.x +=<span style="color: #000000"> vx;
</span><span style="color: #008080">282</span> <span style="color: #000000"> }
</span><span style="color: #008080">283</span> } <span style="color: #0000ff">else</span><span style="color: #000000"> {
</span><span style="color: #008080">284</span> <span style="color: #0000ff">if</span>(f.x + vx >=<span style="color: #000000"> f.targetX){
</span><span style="color: #008080">285</span> f.x =<span style="color: #000000"> f.targetX;
</span><span style="color: #008080">286</span> f.hitX = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008080">287</span> } <span style="color: #0000ff">else</span><span style="color: #000000"> {
</span><span style="color: #008080">288</span> f.x +=<span style="color: #000000"> vx;
</span><span style="color: #008080">289</span> <span style="color: #000000"> }
</span><span style="color: #008080">290</span> <span style="color: #000000"> }
</span><span style="color: #008080">291</span>
<span style="color: #008080">292</span> <span style="color: #0000ff">if</span>(f.startY >=<span style="color: #000000"> f.targetY){
</span><span style="color: #008080">293</span> <span style="color: #0000ff">if</span>(f.y + vy <=<span style="color: #000000"> f.targetY){
</span><span style="color: #008080">294</span> f.y =<span style="color: #000000"> f.targetY;
</span><span style="color: #008080">295</span> f.hitY = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008080">296</span> } <span style="color: #0000ff">else</span><span style="color: #000000"> {
</span><span style="color: #008080">297</span> f.y +=<span style="color: #000000"> vy;
</span><span style="color: #008080">298</span> <span style="color: #000000"> }
</span><span style="color: #008080">299</span> } <span style="color: #0000ff">else</span><span style="color: #000000"> {
</span><span style="color: #008080">300</span> <span style="color: #0000ff">if</span>(f.y + vy >=<span style="color: #000000"> f.targetY){
</span><span style="color: #008080">301</span> f.y =<span style="color: #000000"> f.targetY;
</span><span style="color: #008080">302</span> f.hitY = <span style="color: #0000ff">true</span><span style="color: #000000">;
</span><span style="color: #008080">303</span> } <span style="color: #0000ff">else</span><span style="color: #000000"> {
</span><span style="color: #008080">304</span> f.y +=<span style="color: #000000"> vy;
</span><span style="color: #008080">305</span> <span style="color: #000000"> }
</span><span style="color: #008080">306</span> <span style="color: #000000"> }
</span><span style="color: #008080">307</span>
<span style="color: #008080">308</span> <span style="color: #0000ff">if</span>(f.hitX &&<span style="color: #000000"> f.hitY){
</span><span style="color: #008080">309</span> <span style="color: #000000"> self.createParticles(f.targetX, f.targetY, f.hue);
</span><span style="color: #008080">310</span> self.fireworks.splice(i, 1<span style="color: #000000">);
</span><span style="color: #008080">311</span>
<span style="color: #008080">312</span> <span style="color: #000000"> }
</span><span style="color: #008080">313</span> <span style="color: #000000"> };
</span><span style="color: #008080">314</span> <span style="color: #000000"> };
</span><span style="color: #008080">315</span>
<span style="color: #008080">316</span> self.drawFireworks = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">317</span> <span style="color: #0000ff">var</span> i =<span style="color: #000000"> self.fireworks.length;
</span><span style="color: #008080">318</span> self.ctx.globalCompositeOperation = 'lighter'<span style="color: #000000">;
</span><span style="color: #008080">319</span> <span style="color: #0000ff">while</span>(i--<span style="color: #000000">){
</span><span style="color: #008080">320</span> <span style="color: #0000ff">var</span> f =<span style="color: #000000"> self.fireworks[i];
</span><span style="color: #008080">321</span> self.ctx.lineWidth =<span style="color: #000000"> f.lineWidth;
</span><span style="color: #008080">322</span>
<span style="color: #008080">323</span> <span style="color: #0000ff">var</span> coordRand = (rand(1,3)-1<span style="color: #000000">);
</span><span style="color: #008080">324</span> <span style="color: #000000"> self.ctx.beginPath();
</span><span style="color: #008080">325</span> <span style="color: #000000"> self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));
</span><span style="color: #008080">326</span> <span style="color: #000000"> self.ctx.lineTo(Math.round(f.x), Math.round(f.y));
</span><span style="color: #008080">327</span> <span style="color: #000000"> self.ctx.closePath();
</span><span style="color: #008080">328</span> self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')'<span style="color: #000000">;
</span><span style="color: #008080">329</span> <span style="color: #000000"> self.ctx.stroke();
</span><span style="color: #008080">330</span>
<span style="color: #008080">331</span> <span style="color: #0000ff">if</span><span style="color: #000000">(self.showTarget){
</span><span style="color: #008080">332</span> <span style="color: #000000"> self.ctx.save();
</span><span style="color: #008080">333</span> <span style="color: #000000"> self.ctx.beginPath();
</span><span style="color: #008080">334</span> self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, <span style="color: #0000ff">false</span><span style="color: #000000">)
</span><span style="color: #008080">335</span> <span style="color: #000000"> self.ctx.closePath();
</span><span style="color: #008080">336</span> self.ctx.lineWidth = 1<span style="color: #000000">;
</span><span style="color: #008080">337</span> <span style="color: #000000"> self.ctx.stroke();
</span><span style="color: #008080">338</span> <span style="color: #000000"> self.ctx.restore();
</span><span style="color: #008080">339</span> <span style="color: #000000"> }
</span><span style="color: #008080">340</span>
<span style="color: #008080">341</span> <span style="color: #0000ff">if</span><span style="color: #000000">(self.showShockwave){
</span><span style="color: #008080">342</span> <span style="color: #000000"> self.ctx.save();
</span><span style="color: #008080">343</span> <span style="color: #000000"> self.ctx.translate(Math.round(f.x), Math.round(f.y));
</span><span style="color: #008080">344</span> <span style="color: #000000"> self.ctx.rotate(f.shockwaveAngle);
</span><span style="color: #008080">345</span> <span style="color: #000000"> self.ctx.beginPath();
</span><span style="color: #008080">346</span> self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);
<span style="color: #008080">347</span> self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';
<span style="color: #008080">348</span> self.ctx.lineWidth =<span style="color: #000000"> f.lineWidth;
</span><span style="color: #008080">349</span> <span style="color: #000000"> self.ctx.stroke();
</span><span style="color: #008080">350</span> <span style="color: #000000"> self.ctx.restore();
</span><span style="color: #008080">351</span> <span style="color: #000000"> }
</span><span style="color: #008080">352</span> <span style="color: #000000"> };
</span><span style="color: #008080">353</span> <span style="color: #000000"> };
</span><span style="color: #008080">354</span>
<span style="color: #008080">355</span> self.bindEvents = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">356</span> $(window).on('resize', <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">357</span> <span style="color: #000000"> clearTimeout(self.timeout);
</span><span style="color: #008080">358</span> self.timeout = setTimeout(<span style="color: #0000ff">function</span><span style="color: #000000">() {
</span><span style="color: #008080">359</span> self.canvas.width = self.cw =<span style="color: #000000"> $(window).innerWidth();
</span><span style="color: #008080">360</span> self.canvas.height = self.ch =<span style="color: #000000"> $(window).innerHeight();
</span><span style="color: #008080">361</span> self.ctx.lineCap = 'round'<span style="color: #000000">;
</span><span style="color: #008080">362</span> self.ctx.lineJoin = 'round'<span style="color: #000000">;
</span><span style="color: #008080">363</span> }, 100<span style="color: #000000">);
</span><span style="color: #008080">364</span> <span style="color: #000000"> });
</span><span style="color: #008080">365</span>
<span style="color: #008080">366</span> $(self.canvas).on('mousedown', <span style="color: #0000ff">function</span><span style="color: #000000">(e){
</span><span style="color: #008080">367</span> self.mx = e.pageX -<span style="color: #000000"> self.canvas.offsetLeft;
</span><span style="color: #008080">368</span> self.my = e.pageY -<span style="color: #000000"> self.canvas.offsetTop;
</span><span style="color: #008080">369</span> self.currentHue =<span style="color: #000000"> rand(self.hueMin, self.hueMax);
</span><span style="color: #008080">370</span> self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
<span style="color: #008080">371</span>
<span style="color: #008080">372</span> $(self.canvas).on('mousemove.fireworks', <span style="color: #0000ff">function</span><span style="color: #000000">(e){
</span><span style="color: #008080">373</span> self.mx = e.pageX -<span style="color: #000000"> self.canvas.offsetLeft;
</span><span style="color: #008080">374</span> self.my = e.pageY -<span style="color: #000000"> self.canvas.offsetTop;
</span><span style="color: #008080">375</span> self.currentHue =<span style="color: #000000"> rand(self.hueMin, self.hueMax);
</span><span style="color: #008080">376</span> self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
<span style="color: #008080">377</span> <span style="color: #000000"> });
</span><span style="color: #008080">378</span> <span style="color: #000000"> });
</span><span style="color: #008080">379</span>
<span style="color: #008080">380</span> $(self.canvas).on('mouseup', <span style="color: #0000ff">function</span><span style="color: #000000">(e){
</span><span style="color: #008080">381</span> $(self.canvas).off('mousemove.fireworks'<span style="color: #000000">);
</span><span style="color: #008080">382</span> <span style="color: #000000"> });
</span><span style="color: #008080">383</span>
<span style="color: #008080">384</span> <span style="color: #000000"> }
</span><span style="color: #008080">385</span>
<span style="color: #008080">386</span> self.clear = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">387</span> self.particles =<span style="color: #000000"> [];
</span><span style="color: #008080">388</span> self.fireworks =<span style="color: #000000"> [];
</span><span style="color: #008080">389</span> self.ctx.clearRect(0, 0<span style="color: #000000">, self.cw, self.ch);
</span><span style="color: #008080">390</span> <span style="color: #000000"> };
</span><span style="color: #008080">391</span>
<span style="color: #008080">392</span>
<span style="color: #008080">393</span> self.canvasLoop = <span style="color: #0000ff">function</span><span style="color: #000000">(){
</span><span style="color: #008080">394</span> <span style="color: #000000"> requestAnimFrame(self.canvasLoop, self.canvas);
</span><span style="color: #008080">395</span> self.ctx.globalCompositeOperation = 'destination-out'<span style="color: #000000">;
</span><span style="color: #008080">396</span> self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';
<span style="color: #008080">397</span> self.ctx.fillRect(0,0<span style="color: #000000">,self.cw,self.ch);
</span><span style="color: #008080">398</span> <span style="color: #000000"> self.updateFireworks();
</span><span style="color: #008080">399</span> <span style="color: #000000"> self.updateParticles();
</span><span style="color: #008080">400</span> <span style="color: #000000"> self.drawFireworks();
</span><span style="color: #008080">401</span> <span style="color: #000000"> self.drawParticles();
</span><span style="color: #008080">402</span>
<span style="color: #008080">403</span> <span style="color: #000000"> };
</span><span style="color: #008080">404</span>
<span style="color: #008080">405</span> <span style="color: #000000"> self.init();
</span><span style="color: #008080">406</span>
<span style="color: #008080">407</span> <span style="color: #000000"> }
</span><span style="color: #008080">408</span> <span style="color: #0000ff">var</span> fworks = <span style="color: #0000ff">new</span><span style="color: #000000"> Fireworks();
</span><span style="color: #008080">409</span>
<span style="color: #008080">410</span> <span style="color: #000000"> });
</span><span style="color: #008080">411</span>
<span style="color: #008080">412</span> </script>
<span style="color: #008080">413</span>
<span style="color: #008080">414</span> </body>
<span style="color: #008080">415</span> </html>Copier après la connexion
Chers internautes ! Parce que ceci a été envoyé par le professeur pendant les vacances ! Donc je ne comprends pas certaines choses, je suis vraiment désolée. Si vous ne comprenez rien, laissez-moi un message ! J'irai voir mon ancien professeur et je demanderai à Ask, même s'il est à la retraite depuis longtemps !!
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article chaud
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines
By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
3 Il y a quelques semaines
By 王林
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Outils chauds Tags
Article chaud
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines
By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
3 Il y a quelques semaines
By 王林
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines
By 尊渡假赌尊渡假赌尊渡假赌
Tags d'article chaud
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
La souris et le tapis de souris sans fil Razer | Pokémon Gengar sont désormais disponibles, au prix fixe de 1 549 yuans
Jul 19, 2024 am 04:17 AM
La souris et le tapis de souris sans fil Razer | Pokémon Gengar sont désormais disponibles, au prix fixe de 1 549 yuans
Les produits de la série de claviers et de souris « Elden's Circle » co-marqués par VGN sont désormais sur les étagères : thème personnalisé Lani / Faded One, à partir de 99 yuans
Aug 12, 2024 pm 10:45 PM
Les produits de la série de claviers et de souris « Elden's Circle » co-marqués par VGN sont désormais sur les étagères : thème personnalisé Lani / Faded One, à partir de 99 yuans
Comment introduire des images dans vue
May 02, 2024 pm 10:48 PM
Comment introduire des images dans vue
Dans quelle langue le plug-in du navigateur est-il écrit ?
May 08, 2024 pm 09:36 PM
Dans quelle langue le plug-in du navigateur est-il écrit ?
La souris de jeu Xuanpai Xuanpanda P1 lance la couleur « Macho Pink » : au prix de 139 yuans, la version Star Flash est en préparation
May 08, 2024 pm 09:10 PM
La souris de jeu Xuanpai Xuanpanda P1 lance la couleur « Macho Pink » : au prix de 139 yuans, la version Star Flash est en préparation
