Игра в мячики от @OoyoO на HTML5 canvas

Разместил: Apocalypse
Опубликовано: 1 октября 2015

Замечательный пример реализации лёгкой развлекушки на 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>

100

101

102

103

104

105

106

107

108

109

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>

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

Автор публикации

не в сети 4 дня

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: @OoyoO Canvas HTML5 Игра Мяч Эффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

Всевидящее око

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

Всевидящее око

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

Для публикации сообщений в чате необходимо авторизоваться