Игра в мячики от @OoyoO на HTML5 canvas
Замечательный пример реализации лёгкой развлекушки на canvas. Помню, такое демонстрировали раньше на официальном сайте Гугл. Думаю, данный материал может быть использован сайтами на детскую тематику или как блок, в котором могут успокоить свои нервишки пользователи сайта
Для начала посмотрите ДЕМО
Установка:
В то место, где хотите видеть блок, вставляйте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<canvas id="c" width="500" height="500"></canvas> <script> document.body.clientWidth; // webkit fix: http://qfox.nl/weblog/218 // start of submission // n = X = Y = 8; a = .994; g = .97; N = [991, 149, 192, 921, 199, 919]; d = document; c = d.body.children[0]; c.onclick = function (e) { l.push({ x: X, y: Y, u: 0, v: 0, r: 25 }); n++ }; c.onmousemove = function (e) { S = e.clientX; T = e.clientY; U = S - X; V = T - Y; X = S; Y = T; for (i = 0; i < n;) { with(l[i++]) { S = x - X; T = y - Y; D = S * S + T * T; if (D < r * r) { u += U / 4; v += V / 4 } } } }; d = d.documentElement; w = 500; h = 500 L = c.getContext("2d"); l = []; for (i = 0; i++ < n;) l.push({ x: w / 2 + i, y: 150, u: i * 2 - 9, v: -i, r: 25 }); setInterval(function () { L.fillStyle = "#ddd"; L.fillRect(0, 0, w + 50, h + 50); for (i = 0; i < n; i++) { with(l[i]) { L.fillStyle = "#" + N[i % 6]; L.beginPath(); L.arc(x, y, r, 0, 6.2, 0); L.fill(); k = w - r; x += u; u *= a; x > k || x < r ? u = -u : 0; x < r ? x = r : (x > k ? x = k : 0); k = h - r; y += v; v *= a; y > k || y < 0 ? v = -v : 0; y > k ? y = k : 0; v += .15; for (j = i + 1; j < n; j++) { o = l[j]; s = x - o.x; t = y - o.y; I = s * s + t * t; f = Math.sqrt(I); m = o.r + r; if (f < m) { p = m - f; q = p / 2; J = q * s / m; K = q * t / m; x += J; y += K; o.x -= J; o.y -= K; z = (s * (u - s) + t * (v - t)) / I + 1; A = s * z; B = t * z; C = A - u; D = B - v; z = (-s * (o.u + s) - t * (o.v + t)) / I + 1; E = -s * z; F = -t * z; G = E - o.u; H = F - o.v; u = (E - C) * g; v = (F - D) * g; o.u = (A - G) * g; o.v = (B - H) * g } } } } }, 12) // end of submission // </script> |
Источник материала: КЛИК
