Главная » Файлы » Прочие скрипты » HTML5

Игра в мячики от @OoyoO на HTML5 canvas для uCoz
11.10.14, 20:17:37



Замечательный пример реализации лёгкой развлекушки на canvas. Помню, такое демонстрировали раньше на официальном сайте Гугл. Думаю, данный материал может быть использован сайтами на детскую тематику или как блок, в котором могут успокоить свои нервишки пользователи сайта

Для начала посмотрите ДЕМО

Установка:

В то место, где хотите видеть блок, вставляйте:
Код
<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>


Источник материала: КЛИК

Материал подготовлен Apocalypse
Категория: HTML5 | Добавил: Apocalypse | Теги: ucoz, Canvas, на, HTML5, От, мячики, игра, для, @OoyoO
Просмотров: 373 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: