Игра в мячики от @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>

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

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

Apocalypse

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

Читайте также:

Вы точно не робот?

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

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

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

stalker1313

https://youtu.be/_GFy0QC_OcU

2023-01-11 02:33:13

Apocalypse

@stalker1313, видел эту фишку в ТикТоке. Ты проверял её?

2023-01-12 23:17:39

stalker1313

Не проверял

2023-01-13 20:58:01

Apocalypse

@stalker1313, это работает! Нифига себе: https://imapo.ru/demos/cssblock.html

2023-01-13 21:03:54

stalker1313

👍

2023-01-18 11:48:44

stalker1313

В вордпрессе есть встроенный счётчик просмотра записей? Тоесть что бы сейчас его “активировать” и можно было бы узнать сколько было просмотров страницы за всё время существования сайта

2023-01-26 23:18:29

fapalnaapo

Ктонибудь вкурсе зачем юкоз сломали лайки, при нажатии ничего ен рпоисходит

2023-01-30 21:43:35

fapalnaapo

у вас вроде работают модно своровать ))))
😀

2023-01-30 21:44:34

Apocalypse

@stalker1313, нет такой функции, насколько мне известно

2023-02-02 18:03:54

Apocalypse

@fapalnaapo, они вечно что-то ломают

2023-02-02 18:04:13

......

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

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

Читайте также:

Посетители сайта

Панель управления

Февраль 2023
Пн	Вт	Ср	Чт	Пт	Сб	Вс
		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

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

Читайте также:

3D вихрь из частиц на HTML5 Canvas

Мыльные пузыри, следующие за курсором на HTML5 Canvas

Искры от костра на HTML5 Canvas

Посетители сайта

Панель управления